Plugin Node Icon Darstellung

Dexter86

Dexter86

Aktives Mitglied
Registriert
2. Sep. 2014
Beiträge
49
Punkte
33
Hallo zusammen,

ich bin derzeit dabei unsere Forum etwas umzubauen bzw einzurichten. Derzeit hänge ich irgendwie an den Icons der einzelnen Foren. :/

Um das Custom Icons in den einzlenen Foren nutzen zu können hab ich das Plugin Node Icon installiert. Dann hab ich versucht das so hinzubekommen wie auf unserer Vbulletin Installation, leider schneidet Node Icons aber die Icons ab undzwar sieht das ganze so aus:

Original:
3eckr62hz4o6.png


Xenforo:
zw4z3s25b5up.png


Ich hab das Fenster für die Node Icon´s via CSS vergrößert, dennoch bleibt die größe wie oben gesehen.

t3hcackncfd.png


Hier mal die Zeile dazu:
.node .nodeIcon {
margin: 10px 0px 10px 10px;
float: left;
width: 50px;
height: 80px;
}

Mfg Jense
:)
 
Das sollte eigentlich so funktionieren.
Bindest du pro Node ein eigenes Icon ein? Wenn ja, wie?
 
Hallo hoffi :)

Ja genau pro node ein Icon, das Plugin heißt richtig "Node Icon" damit lassen sich je Forum ein eigenes Icon einbinden für Read und Unread.

Mfg Jense
 
Oder gibt es noch ne Möglichkeit für jedes Forum ein eigenes Icon zu verwenden? :)

Mfg
 
Ja, dazu brauchst du kein Plugin, das ist ein kleines bisschen CSS.

Jede Node hat ja Ihre ID die sich auch im CSS wiederfindet, so das du die als Selektor in CSS benutzen kannst.

Code: 
li.node .nodeIcon {
margin: 10px 0px 10px 10px;
float: left;
width: 50px;
height: 80px;
}
li.node.node_XX  .nodeIcon{
background-image url(your/image.png);
}

XX gegen die NodeID tauschen. Fertig.
 
Zuletzt bearbeitet:
Hallo Alluidh,

Das von dir benannte Plugin nutze ich ja :D

@Hoffi das werde ich doch mal glatt probieren und feedback geben, tausend dank dafür :)
 
hm Problem ist, das ich hier noch ein paar andere CSS befehle betreffend der Node Icons habe die ich nicht so richtig deuten kann, da diese aus dem Theme Stammen^^
:)

Das wäre jetzt zum Bsp eine ID:
node forum level_2 node_31
Code: 
/* FONT AWESOME NODE ICONS */


@font-face
{
  font-family: 'FontAwesome';
  src: url('./styles/modernui/xenforo/fonts/fontawesome-webfont.eot');
  src: url('./styles/modernui/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
  url('./styles/modernui/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
  url('./styles/modernui/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  url('./styles/modernui/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
  font-style: normal;
  font-weight: normal;
}

.node.node .forumNodeInfo .nodeIcon:after, .node.node .categoryForumNodeInfo .nodeIcon:after
{
  font-family: "FontAwesome";
  font-size: 34px;
  content: "\f009";
  color: @primaryDarker;
  padding: 4px;
}

/*Test*/


li.node .nodeIcon {
margin: 10px 0px 10px 10px;
float: left;
width: 50px;
height: 80px;
}
li.node.node_31  .nodeIcon{
background-image url(http://www11.pic-upload.de/20.09.14/qqul5myso1s.jpg);
}

.node.node .forumNodeInfo.unread .nodeIcon:after, .node.node .categoryForumNodeInfo.unread .nodeIcon:after
{
  font-family: "FontAwesome";
  font-size: 34px;
  content: "\f009";
  color: #ea2e49;
  padding: 4px;
}

.node.node .pageNodeInfo .nodeIcon:after
{
  font-family: "FontAwesome";
  font-size: 34px;
  content:"\f016";
  color: @primaryDarker;
  padding: 4px;
}

.node.node .linkNodeInfo .nodeIcon:after
{
  font-family: "FontAwesome";
  font-size: 34px;
  content: "\f0a9";
  color: @primaryDarker;
  padding: 4px;
}
 
Zuletzt bearbeitet:
Oh, dieser FontAwesome Kram. Das ist so unübersichtlich weil man aus der Content Angabe nicht direkt sieht was man bekommt.

Das sollte keine Probleme machen, vermute ich. Kann ich aber sagen wenn ich das in echt sehe. Das könnte sein, das es die Icons für Mods usw. sind.
 
Ja, du hast node_31 in der CSS angegeben, aber es ist keine node 31 in der Übersicht zu finden.

FF oder Chrome, dann F12 drücken und HTML Elemente Untersuchen.
 
Hallo Hoffi,

also ich lese das ne 31 herraus oder bin ich jetzt ganz falsch? :(

1li7t5g8kpae.png


für die Sache mit dem Read und Unread müsste der Code wahrscheinlich so aussehen oder?
Code: 
li.node .nodeIcon {
margin: 10px 0px 10px 10px;
float: left;
width: 50px;
height: 80px;
}
li.node.node_141 .forumNodeInfo.unread  .nodeIcon{
background-image url(http://www11.pic-upload.de/21.09.14/emus3s9zqcr.png);
}
 
Dann muss man für node_31 wohl angemeldet sein, ich hab den nicht. ;)

Das mit dem Unread sollte passen, ja.

Wenn du nur Background-image setzt, wird noch die position des originals übernommen. Du solltest du noch setzen.

background-position: 0 0;
 
Setz das mal auf eine Node die Gäste sehen dürfen. Node 17 z.B.
 
Hab jetzt auch noch nen !important hinter geknallt aber selbst das geht, hab das ganze jetzt bei Nod_icon.css und extra.css hinzugefügt aber ohne erfolg:(

EDIT:
Hoffi schrieb:
Setz das mal auf eine Node die Gäste sehen dürfen. Node 17 z.B.
Zum Vergrößern anklicken....
hab ich gemacht :)
 
Finger weg von Important! Nicht nutzen wenn es irgendwie geht.

Setz das mal auf die Node 17, dann schraub ich das fix.
 
Jetzt, wo ich da im Browser das anpasse seh ich auch deinene Fehler. ;) Da fehlt ein Doppelpunkt. ^^

HTML: 
li.node.node_17 .forumNodeInfo.unread .nodeIcon {
background-position: 0 0;
background-image: url(http://www11.pic-upload.de/20.09.14/qqul5myso1s.jpg);
background-repeat: no-repeat;
}
li.node .nodeIcon {
margin: 10px 0px 10px 10px;
float: left;
width: 32px;
height: 59px;
}

Den Code für die Background-position hast du aktuell zwei mal drin. Wo kann ich aber nicht erkennen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben