Guten Abend,
ich möchte im Forum in der Sidebar, u.a. in den Boxen "Letzte Beiträge" und "Heiße Themen" vor dem Titel ein Icon hinzufügen.
Ist das möglich?
Viele Grüße
Niklas
Guten Abend,
ich möchte im Forum in der Sidebar, u.a. in den Boxen "Letzte Beiträge" und "Heiße Themen" vor dem Titel ein Icon hinzufügen.
Ist das möglich?
Viele Grüße
Niklas
Über CSS bzw das Template bestimmt
Mit ::before und ::after.
Hier die wichtigsten Icons für Sidebar-Boxen der Woltlab Software:
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.HotThreads"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.HotThreads"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.MostCommentedEntries"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.MostCommentedEntries"] .boxTitle::before {
content: "\f06d";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.LatestPosts"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.LatestPosts"] .boxTitle::before {
content: "\f27a";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.BoardTagCloud"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.BoardTagCloud"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.TagCloud"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.TagCloud"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.TagCloud"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.TagCloud"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.TagCloud"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.TagCloud"] .boxTitle::before {
content: "\f02b";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] .boxTitle::before {
content: "\f080";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] .boxTitle::before {
content: "\f044";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.NewestMembers"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.NewestMembers"] .boxTitle::before {
content: "\f234";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.MostActiveMembers"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.MostActiveMembers"] .boxTitle::before {
content: "\f007";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.LatestComments"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.LatestComments"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.LatestComments"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.LatestComments"] .boxTitle::before {
content: "\f040";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.Categories"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.Categories"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.Categories"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.Categories"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.Categories"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.Categories"] .boxTitle::before,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.ArticleCategories"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.ArticleCategories"] .boxTitle::before {
content: "\f0ca";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.MostActiveAuthors"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.MostActiveAuthors"] .boxTitle::before {
content: "\f005";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.LatestEntries"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.LatestEntries"] .boxTitle::before {
content: "\f27b";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.StaffOnline"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.StaffOnline"] .boxTitle::before {
content: "\f0c0";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
Alles anzeigen
Vielen Dank Gino Zantarelli
Hättest du vielleicht noch ein passendes Icon für die Sidebar-Box "Statistiken"?
... ist doch dabei (Zeile 36 /37).
Vielleicht sollte ich schlafen gehen, ich meinte die Box "Benutzer online"
Diese Box hat keine explizite Boxenbezeichnung, daher muss ein Code auf ID-Basis genutzt werden (über den Webinspektor herauszufinden, das Doppel XX auswechseln gegen die ID-Nummer).
Beispielcode:
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.genericBoxXX"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.genericBoxXX"] .boxTitle::before {
content: "\f129";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
Vielen Dank! Wie ich gerade herausgefunden habe, hat die Box ein eigene Bezeichnung, und zwar: UsersOnline.
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.UsersOnline"] .boxTitle::before,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.UsersOnline"] .boxTitle::before {
content: "\f129";
display: inline-block;
font-family: FontAwesome;
font-weight: normal !important;
font-style: normal !important;
margin-right: 5px;
}
Gibt es irgendwo eine Icon-Übersicht? Würde gerne ein Benutzer-Icon verwenden.
Hier findest du die Übersicht verfügbarer FontAwesome-Symbole: https://fontawesome.com/v4.7.0/icons/
Vielen Dank
Bin gerade hier fündig geworden...Danke.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!