BadaBoard Themes erstellen

Aus mobilenations.de Wiki
Zur Navigation springen Zur Suche springen

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

MainForm.List {
	ForumIcon : /forum/forumicon.png
	EditForumIcon : /forum/forumicon_edit.png
	RemoveForumIcon : /forum/forumicon_remove.png
}

UserCP.Footer {
	PMListIcon : /UserCP/mail.png
	PMNewIcon : /UserCP/mailnew.png
	SubscriptionIcon : /UserCP/subscription.png
}

UserCP.List {
	SweepPMDelete : /UserCP/maildelete.png
	SweepDeSubscribe : /UserCP/desubscribe.png
}

*.List {
	BackColor : #000000
	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 {
	BackColor: #bd520f
}

*.List.Posting {
	
}

*.MainText {
	FontSize : 30
	FontColor : #FFFFFF
}

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

*.QuotedText {
	FontSize : 22
	FontColor : #FFFFFF
	BackColor : #333333
}

*.SpoilerText {
	FontSize : 16
	FontColor : #333333
	BackColor : #111111
}

*.LinkText {
	FontColor : #0000FF
}

Posting.List {
	ReplyIcon : /forum/reply_new.png
	
	ElementBackground : /formtopicelement/background100a.9.png
	ElementBackground2 : /formtopicelement/background100b.9.png
	
}

Posting.List.MainText {
	FontSize : 26
	FontColor : #FFFFFF
}


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
    • List
      BackColor, ForumIcon, EditForumIcon , RemoveForumIcon
    • Footer
      BackColor


  • Forum - Die 1. Übersicht eines Forums
    BackColor
    • Header
    • TabBar
      BackColor
    • List - Die Liste der Foren bzw. Topics
      BackColor, ForumIcon, TopicIcon, StickyIcon, AnouncementIcon,MoreIcon, SweepTopicLastPost, SweepTopicSubscribe
      • ForumElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
      • TopicElement
        • MainText
          FontSize, FontColor
        • SubText
          FontSize, FontColor
    • Footer
      UserCPIcon, NewTopicIcon


  • Topic
    BackColor
    • Header
    • TabBar
      BackColor
    • List - Die Liste der Beiträge im Topic
      BackColor, ElementBackground, ElementBackground2
      • Posting
        • Siehe PostingPopUp->Posting für untergeordnete Elemente
    • Footer
      ReplyIcon


  • PostingPopUp
    • Posting
      • MainText
        FontSize, FontColor
      • QuotedText
        FontSize, FontColor, BackColor
      • SpoilerText
        FontSize, FontColor, BackColor
      • LinkText
        FontSize, FontColor
  • NewPosting


  • ReplyPosting


  • UserCP - Das User Control-Panel
    BackColor
    • TabBar
      BackColor
    • List
      BackColor, SweepPMDelete, SweepDeSubscribe
    • Footer
      PMListIcon, PMNewIcon, SubscriptionIcon


  • NewPM


  • ReplyPM