phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Boarder Rahmen einfügen

https://www.phpbb.de/community/viewtopic.php?t=229920

Seite 2 von 2

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 18:58
von Coyote41
Danke Kirk - probier ich dann gleich mal aus! :wink:

Nur noch mal zum Verständniss, dies in der overall_header.html Datei wäre dann der obere Teil des Rahmens:

Code: Alles auswählen

   <div id="menubase_block">
      <div class="menubase-l"></div>
      <div class="menubase-m"></div>
      <div class="menubase-r"></div>
   </div>
Das wäre die Mitte:

Code: Alles auswählen

   <div id="border_block">
      <div class="borderright"></div>
      <div class="borderright"></div>
   </div>
Und das der untere Teil:

Code: Alles auswählen

   <div id="footer_block">
      <div class="foot-l"></div>
      <div class="foot-m"></div>
      <div class="foot-r"></div>
   </div>
Schreib ich das alles hinter:

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Ein oder muss ich den Border und Footer Block an eine andere Stelle schreiben?

Müsste ich ja dann nur noch in der Colores.css Datei die Linkeinträge machen oder?

Danke für die Hifle! :)

EDIT:

Also müsste das so aussehen:

Finde:

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Danach einfügen:

Code: Alles auswählen

   <div id="menubase_block">
      <div class="menubase-l"></div>
      <div class="menubase-m"></div>
      <div class="menubase-r"></div>
   <div id="border_block">
      <div class="borderright"></div>
      <div class="borderright"></div>
   </div>
   <div id="footer_block">
      <div class="foot-l"></div>
      <div class="foot-m"></div>
      <div class="foot-r"></div>
   </div>
Finde:

Code: Alles auswählen

      </div>
      <!-- ENDIF -->
Davor einfügen:

Code: Alles auswählen

</div>
Den Style hab ich mir schon runter geladen und auch schon durchgestöbert. In einer Datei find ich mich schon zurecht, verlinkungen bzw. verwiese zu anderen, da tuh ich mich noch schwer. Versuch zwar immer über Total Command mit Suche Wort in Text nach Verbindungen zu suchen, klappt aber eben leider nicht immer.

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 19:13
von Kirk
Dieses <div id="footer_block"> kommt in die overall_footer.html
Befass dich mal hiermit: Code des Styles finden und ändern
Mit dem Firefox Browser und dem Addon Firebug lässt sich sowas finden.
Lass dir Zeit dabei, dann bekommst du das schon hin. :wink:

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 19:21
von Coyote41
OK ich sehs gerade, gibts ja schon:

Code: Alles auswählen

<div id="footer_block">
     <div class="foot-l"></div>
     <div class="foot-m">
Und das Mittelstück kommt gleich nach dem Oberen Teil. Stimmt das ganze was ich da zusammen geschrieben habe?

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 19:53
von Lehrling
also, ich habe mir den Style kurzerhand heruntergeladen.
In der overall_header.html ist nach dieser Stelle

<div id="wrap">
<a id="top" name="top" accesskey="t"></a>

folgender Code eingebaut:

Code: Alles auswählen

		
	<div id="menubase_block">
		<div class="menubase-l"></div>
		<div class="menubase-m"></div>
		<div class="menubase-r"></div>
	</div>
	<div id="border_block">
	<div id="borderleft">
	<div id="borderright">
		<div id="content_main" class="bodyfill">
Es gibt also noch einen Container für den Inhalt, und zwar den Container content_main (class="bodyfill").

In der Datei overall_footer steht vor diesem Abschnitt hier

Code: Alles auswählen

<div>
		<a id="bottom" name="bottom" accesskey="z"></a>
		<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
	</div>
folgender Code

Code: Alles auswählen

                    </div> <!-- end content -->
                </div> <!-- end border left -->
            </div> <!-- end border right -->
        </div> <!-- end border block -->
	
	<div id="footer_block">
		<div class="foot-l"></div>
		<div class="foot-m">
			<div class="copyright">{CREDIT_LINE}
				<br />
				<!-- IF TRANSLATION_INFO --><br /><br />{TRANSLATION_INFO}<!-- ENDIF -->
				<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF --><br />
				<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
			</div> <!-- end copyright -->
		</div> <!-- end foot-m -->
		<div class="foot-r"></div>
	</div>
Zu beachten ist, dass der Teil mit dem Copyright darin enthalten ist.

In die common.css musst du dann noch folgende Abschnitte einfügen:

Code: Alles auswählen


#menubase_block {
    margin: 0px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: both;
}     
.menubase-l {
    background: url("{T_THEME_PATH}/images/ADD_style/menubase-left.jpg") no-repeat;
    height: 50px;
    float: left;
    width: 80px;
    padding: 0px;
}

.menubase-m {
    background: url("{T_THEME_PATH}/images/ADD_style/menubase-mid.jpg") repeat;
    height: 50px;
    width: auto;
    margin: 0px 50px 0px 50px;
    padding: 0px;
    text-align: center;
}

.menubase-r {
    background: url("{T_THEME_PATH}/images/ADD_style/menubase-right.jpg") no-repeat;
    height: 50px;
    float: right;
    margin-top: -50px;
    width: 80px;
    padding: 0px;
}




#content_main {
   color: #9ff4f5;
   margin-left:       70px;
   margin-right:       70px;
   clear: both;
   padding: 0px;
   overflow:hidden;
}

.bodyfill {
   background-color: #000000;
}




#footer_block {
      margin: 0px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: -20px;
     padding: 0px;
      width: 100%;
    clear: both;
}

.foot-l {
      background: url("{T_THEME_PATH}/images/ADD_style/footer-left.png") no-repeat;
     height: 150px;
      float: left;
      width: 321px;
     padding: 0px;
}
.foot-m {
      background: url("{T_THEME_PATH}/images/ADD_style/footer-mid.png") repeat;
     height: 150px;
      margin: 0px 321px 0px 321px;
      width: auto;
     padding: 0px;
}
.foot-r {
      background: url("{T_THEME_PATH}/images/ADD_style/footer-right.png") no-repeat;
      margin-top:   -150px;
     height: 150px;
      float: right;
      width: 321px;
     padding: 0px;
}

Und natürlich musst du die Bilder in den entsprechenden Ordner hochladen. Beim Original gibt es im Ordner theme/images noch einen Unterordner namens ADD_style. Den kannst du entweder auch anlegen und dort deine Bilder hochladen oder du änderst den Link und nimmst das ADD_style/raus und lädst du Bilder in den Ordner theme/images hoch.
Alle Angaben ohne Gewähr.

Liebe Grüße
Beate

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 21:16
von Coyote41
Na sieht doch schon ganz gut aus! :D

Nur ein Problem noch:

http://img5.fotos-hochladen.net/uploads ... o08udl.jpg

Kann ich den oberen Teil der neuen Grafik an die Stelle weiter unten gesetzt werden kann (grüner Pfeil) um somit die blaue Grafik zu ersetzen.
(Rote Pfeile haben sich geklärt, End - Div musste ganz nach unten.

Zudem hier ein Problem:

http://img5.fotos-hochladen.net/uploads ... iqs9br.jpg

Woher kommem die beiden Grafikhehler?

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 21:27
von Lehrling
Probier das mal aus: ersetze in der common.css folgenden Befehl

Code: Alles auswählen

#wrap {
	padding: 0 40px;
	min-width: 900px;
}
durch

Code: Alles auswählen

#wrap {
	padding: 0 20px;
	width: 95%;
	margin: auto;
}
LG Beate

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 21:33
von Crizzo
Das würde ich nicht tun.

Denn 95% + 20px + 20px, kann je nach Bildschirm >100% sein und damit für eine unnötige horizontale Scrollbar sorgen.

Also am besten eher eine Prozentangabe ohne padding/margin. Denn in CSS2.1 kann man, im Gegensatz zu CSS3, noch nicht rechnen.

Grüße

Re: Boarder Rahmen einfügen

Verfasst: 16.12.2013 21:35
von Coyote41
Habs so gelöst:

Code: Alles auswählen

#wrap {
	padding: 0 40px;
	min-width: 900px;
}
/* Das obere Padding regelt breite des Inneren Forum und Portalkerns */
Padding etwas erhöht, damit wird alles eingerückt. :)

Re: Boarder Rahmen einfügen

Verfasst: 17.12.2013 08:24
von Coyote41
Danke Kirk - ist korregiert. :)

Fragt sich nur noch warum es links unten den Grafikfehler gibt - zudem wie ich diese obere Leiste an die Stelle der Menüleiste bekomme. :oops:

Hab mal meine OverallFooter Datei angehängt:
https://www.phpbb.de/support/pastebin.p ... iew&s=1376

Je nach dem wie ich dein Eintrag:

Code: Alles auswählen

<div id="footer_block">
  <div class="foot-l"></div>
  <div class="foot-m"></div>
  <div class="foot-r"></div>
</div>
Verrücke, ist etweder die überflüssige Grafik auf der linken seite da oder auf beiden. Hab ich irgendwo nen Fehler? :-?

Re: Boarder Rahmen einfügen

Verfasst: 19.12.2013 21:09
von Coyote41
So langsam wirds mit dem Style, nur ein Problem habe ich noch.

Wie auf dem Bild auf der linken Seite zu sehen ist gibt es ganz oben eine R2D2 Leiste. Das ist der obere Bereich des Rahmens den ich eingebaut habe.

http://img5.fotos-hochladen.net/uploads ... smdcew.jpg

Weiter unten habe ich ein Dropdown Menü im neuen Grünstil horizontal. Den möchte ich mit in den Rahmen einbinden, dass es am Ende aussieht ie rechts, also das alles zusammen passt an der Seite wie ein 90° gedrehtes T. Wie kann ich das bewerkstelligen? Mir fällt da nichts mehr ein. Etweder ich verlier das Titelbild, zerstör den Style oder oder oder. Hoffe mir kann wer weiter helfen, bin mit meinem Latein am Ende. :oops:

Hier mal mein Overallheder:

https://www.phpbb.de/support/pastebin.p ... tml4strict

Und die Common.php:

https://www.phpbb.de/support/pastebin.p ... iew&s=1379
Alle Zeiten sind UTC+02:00
Seite 2 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de