Eigenes Icon von Standard Icon verdekt

Seele · 25. Oktober 2016

Hallo zusammen,

wusste grad keinen besseren Titel zu meinem Problem.

Es geht um folgendes. Ich habe mal die Standard Icons gewechselt unter ACP - Syatem - Forum - Forenauflistung unterhalb von Tiefe der Forenstruktur. Das klappte soweit auch ohne Probleme.
Nun habe ich aber einen Bereich, der nur Sporadisch öffentlich gestellt wird, in dem das Icon ein Torte sein sollte. Das sehe ich auch, aber dabei auch das neu eingestellte Standard Icon (Herz)

Hier mal ein Bild dazu geb.icon.PNG

In den Stils - CSS habe ich folgenden Code drin

Code

/* icon geburismilie in thread geb.forum */
.wbbBoardContainer[data-board-id="135"] > .wbbBoard > .icon::before {
	background-image: url("../icon/geburtstag-0138.gif");
	content: "";
	display: block;
	height: 32px;
	width: 32px;
}

Meine Frage nun, wie kann ich das einstellen, evt Code ändern, damit das Standard Icon nicht mehr mit da drin ist?

Der Bereich ist zur Zeit noch nicht Öffentlich eingestellt, also noch für keinen ausser mir zu sehen.

Lg Seele

Pacco · 25. Oktober 2016

Hallo Seele,

du müsstest diesen Teil aus deiner CSS entfernen

CSS

.wbbBoardList li > .wbbBoard > .icon.icon-folder-close-alt::before, .wbbSubBoards li > .icon.icon-folder-close-alt::before {
	content: "\f08a";
}

und diesen Part ändern.

CSS

.icon-folder-close-alt::before {
    content: "\f114";
}

in

CSS

.icon-folder-close-alt::before {
    content: "\f08a";
}

Seele · 26. Oktober 2016

Hallo Paco,

danke für deine Antwort. Leider bin ich irgendwie blind, finden den Teil, wo du sagst das ich ihn entfernen sollte nicht.

Kannst du mir vielleicht sagen wo ich das finden kann?
Also im CSS ist mir schon klar, nur nicht wo genau. Da dies ja nicht in dem Code drin ist, den ich einsezte (siehe oben) weiss ich nicht wo ich den noch suchen soll.
Schaute das CSS durch fand ihn aber nicht.

Hier mal das CSS aus dem Stil

Spoiler anzeigen

CSS

body{
	background-image: url(../images/gallant/hg.jpg);
	background-position:  bottom;
	background-attachment: fixed;
}


.tabularBox{
	background-image: url(../images/gallant/rk.jpg);
}


.dialogTitlebar{
	background-image: url(../images/gallant/rk.jpg);
}


.navigationHeader{
	background-image: url(../images/gallant/rk.jpg);
}


.navigationFooter{
	background-image: url(../images/gallant/rk.jpg);
}


.wbbBoardList, .wbbBoardNode1, .button, .containerList, .messageContent, .message  {
    box-shadow: 2px 10px 35px #beb2de ;
}


.wbbSubBoards > li {
width:45%;
white-space:nowrap;
}


#main.sidebarOrientationRight > div > div > .sidebar {
background-image:linear-gradient(to right, #E6E1F7 0px, #7162A3 5px, #F5F2FD 5px);
}


.mainMenu > ul > li.active > a {
    height: 25px;
    padding: 10px 21px 6px 21px;
	border-radius: 5px 5px 0 0;
}


.mainMenu {
    text-align:left;
	position: relative;
    margin-top: 5px;
	border-radius: 5px 5px 0 0;
}


.mainMenu > ul {
    border-radius: 5px 5px 0 0;
	background-color: rgba(0, 0, 0, .1);
}


.message .messageOptions nav ul.smallButtons > li a.button {
    border-color: #C8B8FB;
    border-style: solid;


	border-radius: 5px 0 0 0;
	box-shadow: -1px -1px 5px #E6E1F7;
}


/* Footer Links farblich anpassen */
#additionalFooterLinks {
background-image: -ms-radial-gradient(center, ellipse farthest-corner, rgba(245,242,253, 0.6) 0%, #000000 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, rgba(245,242,253, 0.6) 0%, #000000 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, rgba(245,242,253, 0.6) 0%, #000000 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #6995C4), color-stop(1, #000000));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(245,242,253, 0.6) 0%, #000000 100%);
background-image: radial-gradient(ellipse farthest-corner at center, rgba(245,242,253, 0.6) 0%, #D5C9FD 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='rgba(245,242,253, 0.8)', endColorstr='#000000')!important;
border: 1px solid #35256B;
border-radius: 6px;
margin-top: 5px;
}
#footerLinks1 h3, #footerLinks2 h3,
#footerLinks3 h3, #footerLinks4 h3, #footerLinks5 h3, #footerLinks6
h3, #footerLinks7 h3, #footerLinks8 h3 {
border-bottom: 1px solid #35256B;
box-shadow: 0 1px 0 #35256B;
color: #35256B;
font-size: large;
font-weight: bold;
margin-bottom: 10px !important;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 7px;
text-shadow: 0 -1px 0
}


// Dashboard Box Hover raus //
#dashboardBox-89 .containerList > li {
   background-color: rgba(0,0,0,0.0) !important;
}


// Blog Kategorie unten ausblenden //
.blogCategoryList {display:none;
}


// Chat Flüstern farblich hervorheben //
#timsChatMessageContainer0 .timsChatMessage7 .timsChatInnerMessage{
        background: #C3B5F0 !important;
}


// chatfenster vergrössern //
#tplChat .timsChatMessageContainer {
  height: 800px;
}


/* chatsmilies aus-/einblenden */
#tplChat #content #smilies.invisible { display: none;
}


/* linkfarbe in Chat ändern */
.timsChatMessageContainer a {
  color: #A020F0;
}


// sidebar Statistik Schrift grösser //
.sidebar dl.inlineDataList {
font-size: 1rem;
}


// icon über uns verkleinern //
.icon24 {font-size: 21px;height: 24px;width: 24px;
}


// Forenbereich Titel zentrieren //
.tabularBoxTitle > header {
    text-align: center;
}


// Logo und Menue zenttrieren //
.logo {text-align: center;
}


/* wichtig farbe */
.wbbThreadAnnouncement td {
    background: #C3B5F0 !important;
}
.wbbThreadAnnouncement:hover td {
background-color: #C3B5F0 !important;
}


/* Angepinnt Farbe + hover */
.wbbThreadSticky td {
background-color: #D5C8FF !important;
}
.wbbThreadSticky:hover td {
background-color: #D5C8FF !important;
}


/* icon geburismilie in thread geb.forum */
.wbbBoardContainer[data-board-id="135"] > .wbbBoard > .icon::before {
	background-image: url("../icon/geburtstag-0138.gif");
	content: "";
	display: block;
	height: 32px;
	width: 32px;
}


/* Bilderlupe in Beitrag für vergrösserung */
.messageBody a.embeddedImageLink,
.messageBody a.embeddedAttachmentLink {
    position: relative;
    display: inline-block;
    .transition(all, .2s);
    margin-right: 7px;
    margin-bottom: 7px;
}
.messageBody a.embeddedImageLink:after,
.messageBody a.embeddedAttachmentLink:after {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 16px;
    right: 10px;
    bottom: 10px;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.85);
    width: 30px;
    height: 30px;
    border-radius: 3px;
    line-height: 30px;
    text-align:center;
    .transition(all, .2s);
}
.messageBody a.embeddedImageLink:hover:after,
.messageBody a.embeddedAttachmentLink:hover:after {
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow: 
        0px 0px 0px 2px rgba(255, 255, 255, 0.5), 
        0px 0px 15px rgba(0, 0, 0, 0.35);
    .transition(all, .2s);
}
.messageBody a.embeddedImageLink:hover:after,
.messageBody a.embeddedAttachmentLink:hover:after {
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow: 
        0px 0px 0px 2px rgba(255, 255, 255, 0.5), 
        0px 0px 15px rgba(0, 0, 0, 0.35);
    .transition(all, .2s);
}


/* Threadestarter icon wechseln */
@media only screen and (min-width: 801px) {
   .messageList .messageGroupStarter > .message::after {
      content: "\F040";
   }
}


/* Threadstarter farbe */
.messageGroupStarter .messageSidebarOrientationLeft {
    background-color: #C3B5F0;
    box-shadow: 0 0 1px #E6E1F7 inset;
}
.message.messageSidebarOrientationLeft {
    padding-bottom: 15px;
    padding-top: 15px;
}
.message.messageSidebarOrientationLeft .messageContent {margin-right: 15px;}
.sidebar {
    padding: 41px 0 7px;
}


/* Blog Artikel nach links und rechts floaten */
#tplBlog .blogEntryList > li:nth-child(2n+1),
#tplEntryList .blogEntryList > li:nth-child(2n+1) {
    width:49%;
    float:left;
}
#tplBlog .blogEntryList > li:nth-child(2n+2),
#tplEntryList .blogEntryList > li:nth-child(2n+2) {
    width:49%;
    float:right;
}
/* Höhe der Aktikel einstellen und abschneiden */
#tplBlog .blogEntryList .messageBody > div:not(.messageFooter),
#tplEntryList .blogEntryList .messageBody > div:not(.messageFooter) {
    height:230px;
    overflow:hidden;
}
/* Überschrift kürzen */
#tplBlog .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1,
#tplEntryList .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1 {
    white-space: nowrap;
    color:@wcfLinkColor;
    font-size: 1.2rem;
}
/* Mindesthöhe Messagefooter */
#tplBlog .blogEntryList .messageFooter,
#tplEntryList .blogEntryList .messageFooter {
    min-height:30px;
}
/* Mindesthöhe Messageheader */
#tplBlog .blogEntryList .box32,
#tplEntryList .blogEntryList .box32 {
    min-height: 40px;
}




/* Festtagszähler aus Seitenliste raus */
#tplDashboard .headerPatchSidebarBoxesTop {
            display: none!important;
}


/* Gruppe Chatmod, Gesperrt, Newbie und Komma in letzter Gruppe aus Legende ausblenden */
.usersOnlineLegend li {
	&:nth-child(4),
	&:nth-child(7),
	&:nth-child(6),
    &:nth-last-child(2)::after{
        display: none;
    }
}


/* Suche einklappen */
@media only screen and (min-width: 801px) {
	.userPanel > div > .searchBar > form input[type="search"] {
		width: 36px;
		border-radius: @wcfContainerBorderRadius;
		padding: 6px 10px 5px 26px;
	}

	.userPanel > div > .searchBar > form input[type="search"]:hover,
	.userPanel > div > .searchBar > form input[type="search"]:focus {
		width: 240px;
	}

	.userPanel > div > .searchBar::before {
    	left: 11px;
	}
}


/* Dashboardboxen "Das bietet..." farbig */


@media screen and (min-width: 801px) {
    .dashboardBox-214 {
        display: flex;
    }
    .dashboardBox-214Box1,
    .dashboardBox-214Box2 {
        margin-right: 14px;
    }
    .dashboardBox-214 > div {
        width: 32%;
    }    
}
@media screen and (max-width: 800px) {
    .dashboardBox-214Box1,
    .dashboardBox-214Box2 {
        margin-bottom: 14px;
    }
    .dashboardBox-214 > div {
        width: 100%;
    }     
}
.dashboardBox-214 > div {
    box-sizing: border-box;
	border-radius: 20px 40px 20px 40px;
    border: 1px solid #000;
    padding: 14px 21px;
    color: #fff;
}
.dashboardBox-214Box1 {
    background: #990000;
}
.dashboardBox-214Box2 {
    background: #009900;
}
.dashboardBox-214Box3 {
    background: #000099;
}


// Dashboard Box (das biettet...) Hover raus //
#dashboardBox-214 .containerList > li {
   background-color: rgba(0,0,0,0.0) !important;
}
// Dashboard Box (willkommen im seelenst...) Hover raus //
#dashboardBox-219 .containerList > li {
   background-color: rgba(0,0,0,0.0) !important;
}
// Dashboard Box (ist seelensturm was für dich) Hover raus //
#dashboardBox-220 .containerList > li {
   background-color: rgba(0,0,0,0.0) !important;
}


/* Signatur abgrenzen und alter Strich raus*/
.messageSignature {border-top: solid 1px !important;
}

Alles anzeigen

Lg Seele

Pacco · 26. Oktober 2016

Eventuell liegt es daran, dass du das Heart-Icon hier angegeben hast

und deswegen nicht in der CSS auftaucht!??

Vielleicht klappt es damit

Seele · 26. Oktober 2016

Bein dem betreffenden Bereich habe ich keine vorgegebenen Icon drin, nur die Farben.

in den andere Foren Bereichen sind die Herzen drin.
Meinst du ch soll erst mal überall die Herzen rausmachen und alle auf Standard stellen?

norse · 26. Oktober 2016

@Seele: Verwendest Du eventuell ein Plugin für die Angabe der Forenicons?

Gruß norse

Seele · 26. Oktober 2016

Ja, ich habe das Font Awesome Icon Util
https://pluginstore.woltlab.co…6-font-awesome-icon-util/

und dann noch
Animiertes Benachrichtigungs-Icon da habe ich grad keinen Link dazu es heisst
be.bastelstu.sascha.wcf2.animatednotificationbell

Nachtrag 29.10.

Habe das Forenicon nun geändert. Das eigene (den Code dazu) entfernt und bei Foren Auflistung das Geschenke Icon aktiviert, obwohl das nicht ganz meinen Wünschen entspricht aber besser so, als zwei Icons übereinander.

Was ich einfach komisch finde, ist die Tatsache das die Jahre davor, auch letztes Jahr noch, das Icon alleine Sichtbar war mit dem Code den ich schon lange drin hatte, warum es jetzt plötzlich nicht mehr geht verstehe ich nicht.

Eigenes Icon von Standard Icon verdekt

cls-design

Informationen

Demoinstallationen

Hilfe