BadaBoard Themes erstellen: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
|||
Zeile 136: | Zeile 136: | ||
**'''Tabbar'''<br>''BackColor'' | **'''Tabbar'''<br>''BackColor'' | ||
**'''List''' - Die Liste der Foren bzw. Topics<br>''BackColor'', ''ForumIcon'', ''TopicIcon'', ''StickyIcon'', ''AnouncementIcon'', ''SweepTopicLastPostIcon'', ''SweepTopicSubscribeIcon'', ''HightlightBackColor'' | **'''List''' - Die Liste der Foren bzw. Topics<br>''BackColor'', ''ForumIcon'', ''TopicIcon'', ''StickyIcon'', ''AnouncementIcon'', ''SweepTopicLastPostIcon'', ''SweepTopicSubscribeIcon'', ''HightlightBackColor'' | ||
***'''GroupHeader'''<br>''BackColor'' , ''FontSize'', ''FontColor'' | |||
***'''ForumElement''' | ***'''ForumElement''' | ||
****'''MainText'''<br>''FontSize'', ''FontColor'' | ****'''MainText'''<br>''FontSize'', ''FontColor'' |
Version vom 16. April 2012, 17:04 Uhr
badaBoard Themes bestehen aus einer pseudo-CSS Datei und einer Ansammlung von Icons. Pseudo-CSS, weil die Datei zwar im groben so aussieht, wie eine CSS Datei, aber nur wenig mit dem echten CSS zu tun hat. Um ein Theme in badaBoard zu importieren, muss die CSS Datei zusammen mit den Bildern in einer Zip Datei verpackt werden, die genauso heisst, wie die CSS Datei. Der Name des Themes ergibt sich dabei aus dem Namen der Zip bzw. CSS Datei. Weichen die Namen voneinander ab, wird badaBoard die Datei nicht als gültiges Theme erkennen.
badaBoards Pseudo-CSS
So sieht die aktuelle DefaultStyle.css Datei aus:
// Default-Style // Allgemeine Einstellungen * { BackColor : #000000 FontColor : #FFFFFF } *.Header { BackColor : default } *.Footer { BackColor : default } *.ContextMenu { BackColor : default } *.List { HightlightBackColor : #282828 } *.Tabbar { BackColor : #bd520f } // Main und SubText in den Listen *.MainText { FontSize : 30 } *.SubText { FontSize : 22 } // Forenliste ForumList.List { FontSize: 36 } // Einstellungen für die Anzeige von Postings *.Posting.MainText { FontSize : 26 } *.Posting.SubText { FontSize : 22 } *.Posting.QuotedText { FontSize : 22 BackColor : #333333 } *.Posting.SpoilerText { FontSize : 16 FontColor : #333333 BackColor : #111111 } *.Posting.LinkText { FontColor : #0000FF } // Alle Icons ForumList.List { ForumIcon : /forum/forumicon.png EditForumIcon : /forum/forumicon_edit.png RemoveForumIcon : /forum/forumicon_remove.png } UserCP.List { SweepPMDeleteIcon : /UserCP/maildelete.png SweepDeSubscribeIcon : /UserCP/desubscribe.png } UserCP.Footer { PMListIcon : /UserCP/mail.png PMNewIcon : /UserCP/mailnew.png SubscriptionIcon : /UserCP/subscription.png } Forum.List { ForumIcon : /forum/forumicon.png TopicIcon : /forum/topicicon.png StickyIcon : /forum/stickytopicicon.png AnnouncmentIcon : /forum/announcmenttopicicon.png SweepTopicLastPostIcon : /forum/topic_last.png SweepTopicSubscribeIcon : /forum/topic_subscribe.png } Forum.Footer { UserCPIcon : /forum/user_cp.png NewTopicIcon : /forum/topic_new.png ActiveTopicIcon : /forum/topic_active.png MoreIcon : /forum/topic_more.png } Topic.List { ElementBackgroundIcon : /formtopicelement/background100a.9.png ElementBackgroundIcon2 : /formtopicelement/background100b.9.png } Topic.Footer { ReplyIcon : /forum/reply_new.png } *.Posting.Images { DummyImageIcon : /forum/dummyimage.png }
Struktur
Die App ist in folgende Bereiche aufgeteilt, die als ID für die CSS Datei dienen:
- ForumList - Das erste Fenster, mit der Auswahl der Foren.
BackColor- Header
BackColor, TitleColor - List
BackColor,FontSize, FontColor,ForumIcon, EditForumIcon , RemoveForumIcon - Footer
BackColor,ButtonBackColor, ButtonFontColor
- Header
- Forum - Die 1. Übersicht eines Forums
BackColor- Header
BackColor, TitleColor,ButtonBackColor, ButtonFontColor - Tabbar
BackColor - List - Die Liste der Foren bzw. Topics
BackColor, ForumIcon, TopicIcon, StickyIcon, AnouncementIcon, SweepTopicLastPostIcon, SweepTopicSubscribeIcon, HightlightBackColor- GroupHeader
BackColor , FontSize, FontColor - ForumElement
- MainText
FontSize, FontColor - SubText
FontSize, FontColor
- MainText
- TopicElement
- MainText
FontSize, FontColor - SubText
FontSize, FontColor
- MainText
- GroupHeader
- ContextMenu
BackColor, FontColor - Footer
BackColor, UserCPIcon, NewTopicIcon, ActiveTopicIcon,MoreIcon
- Header
- Topic
BackColor- Header
BackColor, TitleColor, ButtonBackColor, ButtonFontColor - Tabbar
BackColor - List - Die Liste der Beiträge im Topic
BackColor, ElementBackgroundIcon, ElementBackgroundIcon2, HightlightBackColor- Posting
- Siehe PostingPopUp->Posting für untergeordnete Elemente
- Posting
- Footer
BackColor, ReplyIcon
- Header
- PostingPopUp
BackColor- Posting
BackColor- MainText
FontSize, FontColor - QuotedText
FontSize, FontColor, BackColor - SpoilerText
FontSize, FontColor, BackColor - LinkText
FontSize, FontColor
- MainText
- Posting
- NewPosting
BackColor
- ReplyPosting
BackColor
- UserCP - Das User Control-Panel
BackColor- Header
BackColor, TitleColor, ButtonBackColor, ButtonFontColor - Tabbar
BackColor - List
BackColor, SweepPMDeleteIcon, SweepDeSubscribeIcon - Footer
BackColor, PMListIcon, PMNewIcon, SubscriptionIcon
- Header
- PMPopup
BackColor
Ablauf der Element-Suche
Wenn die App ein bestimmtes Element in der CSS sucht, geht sie folgt vor:
- Alle Elemente des aktuellen Themes werden auf einen exakten Treffer abgesucht
- Wenn das nicht gebracht hat, wird die Suche nochmal durchgeführt, diesmal wird das * als Wildcard im Elementnamen berücksichtigt
- Wenn auch das nicht zu einem Ergebnis geführt hat, werden Schritt 1. und 2. mit Default-Style wiederholt
- Wenn das auch nicht zu einem Treffer geführt hat, wird ein in der App festkodierter Wert genutzt:
Icons: ""
Farben: #FFFFFF
Zahlen: 0
Was ist zu beachten
Farben
Farben beginnen mit einem #-Zeichen, gefolgt von den Hexadezimal-kodierten RGB bzw. RGBA Werten. Es ist möglich einen zusätzlichen Alphakanal anzugeben, falls man Transparanz-Effekte erzielen möchte.
Beispiele:
#FFFFFF = Weiß #000000 = Schwarz #FF0000 = Rot #00FF00 = Grün #0000FF = Blau #00FF00AA = Grün mit leichter Transparenz
Suchreihenfolge
Wenn mehere Elemente mit Wildcards für eine Suche in Frage kommen, wird immer das Element bevorzugt, welches den längsten Namen hat:
*.MainText { FontSize : 22 }
geht vor
* { FontSize : 22 }
Default Werte
Elemente wie die Header und Footer einer Maske können auch im bada standard Style belassen werden. Dazu muss explizit der Wert 'default' für eine Eigenschaft gesetzt werden.
*.Header { BackColor : default } *.Footer { BackColor : default }
Pfade
Pfadangaben für Icons sind immer relativ zu CSS Datei im Zip File anzugeben.