BadaBoard Themes erstellen: Unterschied zwischen den Versionen

Aus mobilenations.de Wiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(54 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
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.
== badaBoard Themes ==
 
badaBoard Themes bestehen aus einer oder mehreren 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 auf Style enden, und zusammen mit den Bildern in einer Zip Datei verpackt werden, die wiederum 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, oder fehlt das Wort Style am Ende des Names, wird badaBoard die Datei nicht als gültiges Theme erkennen. Um für die unterschiedlichen Bildschirmauflösungen der verfügbaren bada Geräte eigene Einstellungen zu definieren, schaut die App noch nach weiteren .css Dateien, passend zur aktuellen Bildschirmauflösung.
 
Beispiel<br>
<nowiki>
StyleName: MeinStyle
CSS-Datei: MeinStyle.css
- WVGA  : MeinStyle_WVGA.css
- HVGA  : MeinStyle_HVGA.css
- WQVGA : MeinStyle_WQVGA.css
Zip-Datei: MeinStyle.zip
</nowiki>
 
Auf einem Wave-M oder Y würde also zuerst die Datei 'MeinStyle.css' geladen werden, und danach, sofern vorhanden, die Datei 'MeinStyle_HVGA.css'. Sind in der zweiten Datei Parameter enthalten, die schon in der ersten Datei vorhanden waren, werden die Parameter aus der ersten Datei mit denen aus der zweiten Datei überschrieben.


== badaBoards Pseudo-CSS ==
== badaBoards Pseudo-CSS ==
Zeile 8: Zeile 22:
// Default-Style
// Default-Style


MainForm.List {
 
ForumIcon : /forum/forumicon.png
// Allgemeine Einstellungen
EditForumIcon : /forum/forumicon_edit.png
* {
RemoveForumIcon : /forum/forumicon_remove.png
BackColor : #000000
FontColor : #FFFFFF
}
}


UserCP.Footer {
*.Header {
PMListIcon : /UserCP/mail.png
BackColor : default
PMNewIcon : /UserCP/mailnew.png
SubscriptionIcon : /UserCP/subscription.png
}
}


UserCP.List {
*.Footer {
SweepPMDelete : /UserCP/maildelete.png
BackColor : default
SweepDeSubscribe : /UserCP/desubscribe.png
}
}


*.List {
*.ContextMenu {
BackColor : #000000
BackColor : default
NewPostingBackColor : #282828
FontColor : #FFFFFF
TabbarColor : #000000
ForumIcon : /forum/forumicon.png
UserCPIcon : /forum/user_cp.png
TopicIcon : /forum/topicicon.png
StickyIcon : /forum/stickytopicicon.png
AnnouncmentIcon : /forum/announcmenttopicicon.png
SweepTopicLastPost : /forum/topic_last.png
SweepTopicSubscribe : /forum/topic_subscribe.png
NewTopicIcon : /forum/topic_new.png
ActiveTopicIcon : /forum/topic_active.png
More : /forum/topic_more.png
}
}


*.List.Tabbar {
*.List {
BackColor: #bd520f
HightlightBackColor : #282828
}
}


*.List.Posting {
*.Tabbar {
BackColor : #bd520f
}
}


// Main und SubText in den Listen
*.MainText {
*.MainText {
FontSize : 30
FontSize : 30
FontColor : #FFFFFF
}
}


*.SubText {
*.SubText {
FontSize : 22
FontSize : 22
FontColor : #FFFFFF
}
}


*.QuotedText {
// Forenliste
ForumList.List {
FontSize: 36
}
 
// Einstellungen für die Anzeige von Postings
*.Posting.MainText {
FontSize : 26
}
 
*.Posting.SubText {
FontSize : 22
}
 
*.Posting.QuotedText {
FontSize : 22
FontSize : 22
FontColor : #FFFFFF
BackColor : #333333
BackColor : #333333
}
}


*.SpoilerText {
*.Posting.SpoilerText {
FontSize : 16
FontSize : 16
FontColor : #333333
FontColor : #333333
Zeile 73: Zeile 83:
}
}


*.LinkText {
*.Posting.LinkText {
FontColor : #0000FF
FontColor : #0000FF
}
}


Posting.List {
// 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
ReplyIcon : /forum/reply_new.png
}
ElementBackground : /formtopicelement/background100a.9.png
*.Posting.Images {
ElementBackground2 : /formtopicelement/background100b.9.png
DummyImageIcon : /forum/dummyimage.png
}
}
</nowiki>
=== 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.<br>''BackColor, ForumIcon''
**'''Header'''<br>''BackColor'', ''TitleColor'',''ButtonBackColor'', ''ButtonFontColor''
**'''List'''<br>''BackColor'',''FontSize'', ''FontColor'',''ForumIcon'', ''EditForumIcon '', ''RemoveForumIcon ''
***'''SearchElement'''<br>
****'''MainText'''<br>''FontSize, FontColor''
****'''SubText'''<br>''FontSize, FontColor''
**'''Footer'''<br>''BackColor'',''ButtonBackColor'', ''ButtonFontColor''
<br>
*'''Forum''' - Die 1. Übersicht eines Forums<br>''BackColor''
**'''Header'''<br>''BackColor'', ''TitleColor'',''ButtonBackColor'', ''ButtonFontColor''
**'''Tabbar'''<br>''BackColor''
**'''List''' - Die Liste der Foren bzw. Topics<br>''BackColor'', ''ForumIcon'', ''TopicIcon'', ''StickyIcon'', ''AnouncementIcon'', ''SweepForumSubscribeIcon'', ''SweepTopicLastPostIcon'', ''SweepTopicSubscribeIcon'', ''HightlightBackColor''
***'''GroupHeader'''<br>''BackColor'' , ''FontSize'', ''FontColor''
***'''ForumElement'''
****'''MainText'''<br>''FontSize'', ''FontColor''
****'''SubText'''<br>''FontSize'', ''FontColor''
***'''TopicElement'''
****'''MainText'''<br>''FontSize'', ''FontColor''
****'''SubText'''<br>''FontSize'', ''FontColor''
**'''ContextMenu'''<br>''BackColor,&nbsp;FontColor''
**'''Footer'''<br>''BackColor, UserCPIcon'', ''NewTopicIcon'', ''ActiveTopicIcon'',''MoreIcon''
<br>
*'''Topic'''<br>''BackColor''
**'''Header'''<br>''BackColor, TitleColor, ButtonBackColor, ButtonFontColor''
**'''Tabbar'''<br>''BackColor''
**'''List''' - Die Liste der Beiträge im Topic<br>''BackColor'', ''ElementBackgroundIcon'', ''ElementBackgroundIcon2'', ''HightlightBackColor''
***'''Posting'''
****Siehe PostingPopUp-&gt;Posting für untergeordnete Elemente
**'''Footer'''<br>''BackColor'', ''ReplyIcon''
<br>
*'''PostingPopUp'''<br>''BackColor''
**'''Posting'''<br>''BackColor''
***'''MainText'''<br>''FontSize'', ''FontColor''
***'''QuotedText'''<br>''FontSize'', ''FontColor'', ''BackColor''
***'''SpoilerText'''<br>''FontSize'', ''FontColor'', ''BackColor''
***'''LinkText'''<br>''FontSize'', ''FontColor''
***'''Images'''<br>''DummyImageIcon'', ''ErrorImageIcon''
**'''Footer'''<br>''BackIcon'', ''EditIcon'', ''SaveIcon'', ''ThanksIcon, AddImageIcon''
<br>
*'''NewPosting'''<br>''BackColor''
<br>
*'''ReplyPosting'''<br>''BackColor''
**'''Header'''<br>''BackColor'', ''TitleColor'',''ButtonBackColor'', ''ButtonFontColor''&nbsp;
<br>
*'''UserCP''' - Das User Control-Panel<br>''BackColor''
**'''Header'''<br>''BackColor, TitleColor, ButtonBackColor, ButtonFontColor''
**'''Tabbar'''<br>''BackColor''
**'''List'''<br>''BackColor'', ''SweepPMDeleteIcon'', ''SweepDeSubscribeIcon''
***'''PMElement'''
****'''MainText'''<br>''FontSize'', ''FontColor''
****'''SubText'''<br>''FontSize'', ''FontColor''
***'''PMBoxElement'''<br>''FontSize'', ''FontColor''
***'''TopicElement'''
****'''MainText'''<br>''FontSize'', ''FontColor''
****'''SubText'''<br>''FontSize'', ''FontColor''
**'''Footer'''<br>''BackColor, PMListIcon'', ''PMNewIcon, ForumSubscriptionIcon, TopicSubscriptionIcon''
<br>
*'''PMPopup'''<br>
*'''FilePicker'''<br>''DirectoryIcon, FileIcon''
=== 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:<br>
  Icons: ""<br>
  Farben: #FFFFFF<br>
  Zahlen: 0<br>
=== Was ist zu beachten ===


Posting.List.MainText {
==== Farben ====
FontSize : 26
 
FontColor : #FFFFFF
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:
<nowiki>
#FFFFFF = Weiß
#000000 = Schwarz
#FF0000 = Rot
#00FF00 = Grün
#0000FF = Blau
#00FF00AA = Grün mit leichter Transparenz
</nowiki>
 
==== Suchreihenfolge ====
Wenn mehere Elemente mit Wildcards für eine Suche in Frage kommen, wird immer das Element bevorzugt, welches den längsten Namen hat:
<nowiki>
*.MainText {
    FontSize : 22
}</nowiki>
 
geht vor
 
<nowiki>
* {
    FontSize : 22
}</nowiki>
 
==== 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.
 
<nowiki>
*.Header {
BackColor : default
}
}
</nowiki>
 
*.Footer {
BackColor : default
}</nowiki>




Die App ist in folgende Bereiche aufgeteilt, die als ID für die CSS Datei dienen:


* '''Mainform''' Das erste Fenster, mit der Auswahl der Foren.
==== Pfade ====
* '''Forum''' Die 1. Übersicht eines Forums
Pfadangaben für Icons sind immer relativ zu CSS Datei im Zip File anzugeben.
** '''List''' Die Liste der Foren bzw. Topics
* '''UserCP''' Das User Control-Panel

Aktuelle Version vom 27. August 2012, 14:50 Uhr

badaBoard Themes

badaBoard Themes bestehen aus einer oder mehreren 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 auf Style enden, und zusammen mit den Bildern in einer Zip Datei verpackt werden, die wiederum 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, oder fehlt das Wort Style am Ende des Names, wird badaBoard die Datei nicht als gültiges Theme erkennen. Um für die unterschiedlichen Bildschirmauflösungen der verfügbaren bada Geräte eigene Einstellungen zu definieren, schaut die App noch nach weiteren .css Dateien, passend zur aktuellen Bildschirmauflösung.

Beispiel

StyleName: MeinStyle
CSS-Datei: MeinStyle.css
 - WVGA  : MeinStyle_WVGA.css
 - HVGA  : MeinStyle_HVGA.css
 - WQVGA : MeinStyle_WQVGA.css
Zip-Datei: MeinStyle.zip

Auf einem Wave-M oder Y würde also zuerst die Datei 'MeinStyle.css' geladen werden, und danach, sofern vorhanden, die Datei 'MeinStyle_HVGA.css'. Sind in der zweiten Datei Parameter enthalten, die schon in der ersten Datei vorhanden waren, werden die Parameter aus der ersten Datei mit denen aus der zweiten Datei überschrieben.

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, ForumIcon
    • Header
      BackColor, TitleColor,ButtonBackColor, ButtonFontColor
    • List
      BackColor,FontSize, FontColor,ForumIcon, EditForumIcon , RemoveForumIcon
      • SearchElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
    • Footer
      BackColor,ButtonBackColor, ButtonFontColor


  • 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, SweepForumSubscribeIcon, SweepTopicLastPostIcon, SweepTopicSubscribeIcon, HightlightBackColor
      • GroupHeader
        BackColor , FontSize, FontColor
      • ForumElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
      • TopicElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
    • ContextMenu
      BackColor, FontColor
    • Footer
      BackColor, UserCPIcon, NewTopicIcon, ActiveTopicIcon,MoreIcon


  • 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
    • Footer
      BackColor, ReplyIcon


  • PostingPopUp
    BackColor
    • Posting
      BackColor
      • MainText
        FontSize, FontColor
      • QuotedText
        FontSize, FontColor, BackColor
      • SpoilerText
        FontSize, FontColor, BackColor
      • LinkText
        FontSize, FontColor
      • Images
        DummyImageIcon, ErrorImageIcon
    • Footer
      BackIcon, EditIcon, SaveIcon, ThanksIcon, AddImageIcon


  • NewPosting
    BackColor


  • ReplyPosting
    BackColor
    • Header
      BackColor, TitleColor,ButtonBackColor, ButtonFontColor 


  • UserCP - Das User Control-Panel
    BackColor
    • Header
      BackColor, TitleColor, ButtonBackColor, ButtonFontColor
    • Tabbar
      BackColor
    • List
      BackColor, SweepPMDeleteIcon, SweepDeSubscribeIcon
      • PMElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
      • PMBoxElement
        FontSize, FontColor
      • TopicElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
    • Footer
      BackColor, PMListIcon, PMNewIcon, ForumSubscriptionIcon, TopicSubscriptionIcon


  • PMPopup


  • FilePicker
    DirectoryIcon, FileIcon

Ablauf der Element-Suche

Wenn die App ein bestimmtes Element in der CSS sucht, geht sie folgt vor:

  1. Alle Elemente des aktuellen Themes werden auf einen exakten Treffer abgesucht
  2. Wenn das nicht gebracht hat, wird die Suche nochmal durchgeführt, diesmal wird das * als Wildcard im Elementnamen berücksichtigt
  3. Wenn auch das nicht zu einem Ergebnis geführt hat, werden Schritt 1. und 2. mit Default-Style wiederholt
  4. 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.

Abgerufen von „http:///index.php?title=BadaBoard_Themes_erstellen&oldid=2934“