MyBB.de Forum
Tutorial zur Themeerstellung (MyBB 1.2) - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Tutorial zur Themeerstellung (MyBB 1.2) (/thread-1433.html)

Seiten: Seiten: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Tutorial zur Themeerstellung (MyBB 1.2) - krafdi - 16.03.2006

Zu erst sollte man im ACP --> Themes --> Ändern / Entfernen --> Neues Theme ein neues Themes erstellen (Oberes Theme --> MyBB Master Style).
nach einem klick auf Theme hinzufügen kommt man wieder in den Theme- Manager, dort findet man jetzt das erstellte Thema. Nun klicken wir auf Los (das dropdown Menü steht auf Theme-Stil bearbeiten).
Im Folgenden Erkläre ich anhand von Screenshots wo im Frontend dich die Änderungen auswirken.


Box1:Theme anpassen:
[Bild: http://www.krafdi.de/diashow/mybb/themes/box1.gif]



  1. hier empfiehlt es sich einen neuen Ordner zu erstellen in den ihr eure Grafiken ablegt:
  2. Dies ist der Pfad zu eurem Logo
  3. Tabellen zwischen Raum
  4. Angaben sind in % oder px möglich (keine Angabe = px)
  5. Die Stärke des Tabellen Rahmens



[Bild: http://www.krafdi.de/diashow/mybb/themes/box1_erg.gif]

Ich habe die Werte überall so geändert das man sieht was passiert.


Box2: Body (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box2.gif]


  1. Hintergrund Farbe der gesamten Seite (es kann auch eine bg Grafik angegeben werden: #efefef url(images/test/bg_1.gif)
  2. Schrift Farbe im Forum (wenn nicht an einer anderen Stelle definiert)
  3. Schriftfamilie für die Schrift im Forum ( wie bei 3)
  4. Größe der Schrift ( Small,medium oder px möglich)
  5. Farbe, verhalten der Links im Forum
  6. Hier ist es möglich zusätzliche CSS einzugeben


[Bild: http://www.krafdi.de/diashow/mybb/themes/box2_erg.gif]


Box3: Seiten-Container (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box3.gif]


  1. Breite der Inhalts Tabelle
  2. Hintergrundfarbe der Seite
  3. Stärke und Farbe des Rahmens
  4. abstand des Inhaltes zum Rahmen


[Bild: http://www.krafdi.de/diashow/mybb/themes/box3_erg.gif]


Box4: Inhalts-Container (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box4.gif]


  1. Hintergrundfarbe Inhalts Tabelle
  2. Schrift Farbe in der Inhalts Tabelle



[Bild: http://www.krafdi.de/diashow/mybb/themes/box4_erg.gif]


Box5: Oberes Menü (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box5.gif]


  1. Hintergrund Farbe des oberen Menüs
  2. Schrift Farbe/Style im oberen Menü
  3. Link Eigenschaften
  4. Extra CSS (hier bewirkt ein text-align: center; z.B. das der ganze text in der Mitte steht.)


[Bild: http://www.krafdi.de/diashow/mybb/themes/box5_erg.gif]


Box6: Willkommenspanel (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box6.gif]


  1. Hintergrund Farbe des Willkommenspanel
  2. Schrift Farbe/Style im Willkommenspanel
  3. Link Eigenschaften
  4. Rahmen des Willkommenspanels
  5. Abstand zwischen Rahmen und Inhalt


[Bild: http://www.krafdi.de/diashow/mybb/themes/box6_erg.gif]



Box7: Tabellen (Ignoriert von 'Body') (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box7.gif]


  1. hier kann man die Schrift in der gesamten Inhalts Tabelle anpassen ( auch bei den Antworten greifen die Änderungen)


[Bild: http://www.krafdi.de/diashow/mybb/themes/box7_erg.gif]



Box8: Tabellen-Rahmen (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box8.gif]


  1. Dies gibt die Breite der Inhaltstabelle (im ganzem Forum auch die Beitragsansicht usw.) vor. (Angaben in px und % sind möglich)
  2. Die Breite und Farbe des Rahmens der Inhaltstabelle


[Bild: http://www.krafdi.de/diashow/mybb/themes/box8_erg.gif]



Box9: Tabellen-Header (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box9.gif]


  1. Dies ist die Hintergrundfarbe des oberen Tabellen-Header (hier sind nur farb angaben oder/und auch gif´s möglich z.B. url(images/thead_bg.gif) top left repeat-x, bei dieser bg Grafik sollte man darauf achten das sich die Hintergrundfarbe mit der Grafik deckt.
  2. Schrift Farbe/Style/Grösse der schrift im oberen Header (keine Links)
  3. Link Farbe/Style/ der Links im oberen Header (keine Schrift)


[Bild: http://www.krafdi.de/diashow/mybb/themes/box9_erg.gif]



Box10: Tabellen-Subheader (Kategorienhintergrund) (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box10.gif]


  1. Dies ist die Hintergrundfarbe des Tabellen-Subheader (hier sind nur farb angaben oder/und auch gif´s möglich z.B. url(images/thead_bg.gif) top left repeat-x , bei dieser bg Grafik sollte man darauf achten das sich die Hintergrundfarbe mit der Grafik deckt.
  2. Schrift Farbe/Style/Grösse der Schrift im Tabellen-Subheader (keine Links)
  3. Link Farbe/Style/ der Links im Tabellen-Subheader (keine Schrift)


[Bild: http://www.krafdi.de/diashow/mybb/themes/box10_erg.gif]


Box11 & 12: Tabellenzeile 1 & Tabellenzeile 2 (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box11.gif]




[Bild: http://www.krafdi.de/diashow/mybb/themes/box11_erg.gif]



Box13: Übergangs-Tabellenreihe

[Bild: http://www.krafdi.de/diashow/mybb/themes/box13.gif]


  1. Wer mit dieser Box was anfangen kann soll sich bei mir Melden!!



Box14:Tabellenreihen-Trennung (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box14.gif]


  1. Dies ist die Hintergrundfarbe des Tabellenreihen-Trennung (hier sind nur farb angaben oder/und auch gif´s möglich z.B. url(images/thead_bg.gif) top left repeat-x , bei dieser bg Grafik sollte man darauf achten das sich die Hintergrundfarbe mit der Grafik deckt.
  2. Schrift Farbe/Style/Grösse der Schrift im Tabellenreihen-Trennung


[Bild: http://www.krafdi.de/diashow/mybb/themes/box14_erg.gif]


Box15:Tabellen-Footer (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box15.gif]


  1. Dies ist die Hintergrundfarbe des Tabellen-Footer (hier sind nur farb angaben oder/und auch gif´s möglich z.B. url(images/thead_bg.gif) top left repeat-x , bei dieser bg Grafik sollte man darauf achten das sich die Hintergrund farbe mit der Grafik deckt.
  2. Schrift Farbe/Style/Grösse der Schrift im Tabellen-Footer


[Bild: http://www.krafdi.de/diashow/mybb/themes/box15_erg.gif]



Box16:Unteres Menü (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box16.gif]


  1. Dies ist die Hintergrundfarbe des Unteren Menü
  2. Schrift Farbe/Style/Grösse der Schrift im Unteren Menü
  3. Link Farbe im Unteren Menü
  4. CSS Eigenschaften (z.B. Boarder usw.)


[Bild: http://www.krafdi.de/diashow/mybb/themes/box16_erg.gif]


Box17: Hauptnavigation

[Bild: http://www.krafdi.de/diashow/mybb/themes/box17.gif]




[Bild: http://www.krafdi.de/diashow/mybb/themes/box17_erg.gif]


Box18: Hauptnavigation (aktiv) (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box18.gif]




[Bild: http://www.krafdi.de/diashow/mybb/themes/box18_erg.gif]


Box19: Kleiner Text (Angepasst in diesem Theme-Stil)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box19.gif]


  1. Änderungen in dieser Box haben im kompletten Forum Auswirkungen z.B.: Themenansicht, Moderationsoptionen also über all da wo smalltext deklariert ist.


[Bild: http://www.krafdi.de/diashow/mybb/themes/box19_erg.gif]


Box20: Großer Text

[Bild: http://www.krafdi.de/diashow/mybb/themes/box20.gif]


  1. Änderungen in dieser Box haben im kompletten Forum Auswirkungen z.B.: UserName im PostBit.


[Bild: http://www.krafdi.de/diashow/mybb/themes/box20_erg.gif]


Box21: Formular-Elemente (Textboxen, Textareas, Drop-Down-Menüs, Radio-Buttons, Checkboxes)

[Bild: http://www.krafdi.de/diashow/mybb/themes/box21.gif]


  1. Änderungen in dieser Box beziehen sich auf alle Eingabefelder Dropdown und Auswahl Menüs.


[Bild: http://www.krafdi.de/diashow/mybb/themes/box21_erg.gif]


Box22: MyCode Formatierungs-Toolbar

[Bild: http://www.krafdi.de/diashow/mybb/themes/box22.gif]


  1. Mit dieser Box lässt sich das aussehen der MyCode Buttons ändern.


[Bild: http://www.krafdi.de/diashow/mybb/themes/box22_erg.gif]


Box23: Zusätzliches CSS

[Bild: http://www.krafdi.de/diashow/mybb/themes/box23.gif]



[Bild: http://www.krafdi.de/diashow/mybb/themes/box23_erg.gif]


  1. Hier könne alle zusätzlichen CSS angaben eingegeben werden z.B.
    Code:
    .logo {
    text-align: center;
    }
    um das logo zu Zentrieren.




RE: Tutorial zur Themeerstellung - Fatih - 18.03.2006

hi,

schön gemacht - LOB Big Grin. ergänzend noch der link zu http://www.css4you.de


RE: Tutorial zur Themeerstellung - Samu - 18.03.2006

Ab ins Wiki damit Wink

Gutes Teil!.

RE: Tutorial zur Themeerstellung - sindbad123 - 24.03.2006

Super Beitrag !
Vielen Dank krafdi Big Grin

RE: Tutorial zur Themeerstellung - rak - 24.03.2006

einfach nur klasse Smile
Danke

RE: Tutorial zur Themeerstellung - Jochen2003 - 24.03.2006

Klasse das ist doch wirklich eine Super Idee gewesen

RE: Tutorial zur Themeerstellung - press - 12.05.2006

Super AnleitungExclamation

Hätte ich das mal eher gefunden, hätte ich ne menge Zeit gespart.Cool

Hat denn schon jemand eine Erklärung, was eine Übergangs-Tabellenreihe ist ?
Da hab ich auch gegrübelt - leider erfolglos.

RE: Tutorial zur Themeerstellung - Michael - 13.05.2006

Um ehrlich zu sein: Das weiß ich bis heute nicht. Big Grin

RE: Tutorial zur Themeerstellung - P@trick - 13.05.2006

Super Anleitung. Schade das ich erst draufgestoßen bin nachdem ich mich mit den Theme und Template System auseinandergesetzt habe. Das hier hätte mir wirklich einiges an Arbeit und Ärger erspart. Supi! Smile

@Übergangstabelle: Ist das nicht die, die den Hintergrund zwischen den einzelnen Posts in der Threadansicht darstellt?! Also wo hier die AdSense Werbung ist.

RE: Tutorial zur Themeerstellung - StefanT - 13.05.2006

Nein. Das ist der Hintergrund von nicht moderierten Themen.