Boarder Rahmen einfügen

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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.
Zuletzt geändert von Crizzo am 16.12.2013 19:00, insgesamt 1-mal geändert.
Grund: Bitte [code] nutzen, nicht [quote]. Letzteres ist für Zitate.
Nach oben
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 8136
Registriert: 24.05.2010 08:31
Kontaktdaten:
Kontaktdaten von Kirk

Re: Boarder Rahmen einfügen

Beitrag 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:
Nach oben
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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?
Nach oben
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:
Kontaktdaten von Lehrling

Re: Boarder Rahmen einfügen

Beitrag 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
Nach oben
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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?
Zuletzt geändert von Coyote41 am 16.12.2013 21:29, insgesamt 1-mal geändert.
Nach oben
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:
Kontaktdaten von Lehrling

Re: Boarder Rahmen einfügen

Beitrag 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
Nach oben
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12113
Registriert: 19.05.2005 21:45
Kontaktdaten:
Kontaktdaten von Crizzo

Re: Boarder Rahmen einfügen

Beitrag 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
Nach oben
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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. :)
Nach oben
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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? :-?
Nach oben
Coyote41
Mitglied
Beiträge: 69
Registriert: 06.12.2013 15:21

Re: Boarder Rahmen einfügen

Beitrag 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
Nach oben
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“