[RC 1] Custom Node Status Icons ( Read & Unread)

[thunderup]

can't get this to work in 1.0.4 ... copied and pasted exactly and put images into the proper folder

 

[Brett Peters]

can't get this to work in 1.0.4 ... copied and pasted exactly and put images into the proper folder

Might pay to check those folder locations again, Works fine here

 

[Brett Peters]

How would you get this to work for subforums?

I just had a look at this for someone, For subforums replace .node to .categoryForumNodeInfo, .nodeList

Should end up like this

/* Forum description */
.categoryForumNodeInfo, .nodeList  .node_36 .forumNodeInfo .nodeIcon, .node .node_36 .categoryForumNodeInfo .nodeIcon {
    background-image: url("http://YOUR-SITE/YOUR-IMAGE.png");
}
.categoryForumNodeInfo, .nodeList  .node_36 .forumNodeInfo.unread .nodeIcon, .node .node_36 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("http://YOUR-SITE/YOUR-IMAGE.png");
}

Works for me anyways

 

[raytrails]

... and as with most (or all?) template edits, this will have to be re-done after every forum upgrade?

 

[Vilandra]

Nope, because it's in your extra.css which does not get overwritten

 

[Mikey]

With the new sprites, this doesn't work for 1.1?

 

[Paul B]

I still use EXTRA.css for my node icons, albeit not this particular code.

Just make sure you remove any image settings in Style Properties -> Node Icons

 

[Morgain]

Is there a way to assign an icon to a Category and all forums, Pages, whatever there is in it, inherit that icon setup, with its Read/ Unread versions?

I'd also like to give the Categories their own background colour at least on the main first level list. That is the white content area which holds the Forum and Page links. (sorry if this is out of place but it goes together with the icon allocation in terms of design)

 

[Morgain]

Ok I tried this just for the Categories at the top level but it's not showing up.
Double checked Category is no. 3
Checked the graphic triskele_red.png file is in the right directory.
Size 40 X 36.

In EXTRA.css I put

 /* custom status icon for cat 3 triskele_red */
.node .node_3 .forumNodeInfo .nodeIcon, .node .node_3 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/triskele_red.png");
opacity: 0.4;
}
.node .node_3 .forumNodeInfo.unread .nodeIcon, .node .node_3 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/triskele_red.png");
}

My board is not installed in root; it has its own directory called /forumxf
Other than that the directory structure is standard.
I couldn't find where to check the imagePath in case that's the problem.

 

[Saeed]

I have been trying this with 1.1 beta 3, which uses sprites.

Now if you go to: Appearance > Styles > Default Style (or your style name) > Style Property Groups > Style Properties: Node Icons

The issue here is that for the Node Icon: Forum, the position set for the icon is 0 0, but for Node Icon: Unread Forum, it is -36px 0. If you change it to:

Node Icon: Unread Forum 0 0, the custom icons show correctly with the code posted in the first post for the read nodes. However, for any unread nodes which use the original sprite image to show the unread icon, the icon shows as the read one since the position has been changed to 0 instead of -36px.

I've tried keeping the sprite position for the unread node as -36px 0 and making the following change (in red) in the extra css for only those nodes for which I am specifying another icon as follows, but is isn't quite working and I'm a newbie with CSS. Perhaps someone could help me a bit?

.node .node_4 .forumNodeInfo .nodeIcon, .node .node_4 .categoryForumNodeInfo .nodeIcon {
    background-image: url("http://site.com/nodeicons/4.read.png"); position:absolute; left:10px !important;
}
.node .node_4 .forumNodeInfo.unread .nodeIcon, .node .node_4 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("http://site.com/nodeicons/4.unread.png"); position:absolute; left:10px !important;
}

 

[Brett Peters]

I have been trying this with 1.1 beta 3, which uses sprites.

Shelley posted an example in the CSS Sprites thread

 

[Saeed]

Shelley posted an example in the CSS Sprites thread

Thank you so much, Brett.

And thanks for Shelley too.

 

[x7iBiT]

Why

hello I copied the above and three are not showing? how can I fix that?

It happens the same: unread forums dind't show the icon. Why?

I using this code (1.1.0 beta4):

.node .node_35 .forumNodeInfo .nodeIcon, .node .node_35 .categoryForumNodeInfo .nodeIcon {
    background-image: url("img/iconos_foro/mercado.png");
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.node .node_35 .forumNodeInfo.unread .nodeIcon, .node .node_35 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("img/iconos_foro/mercado.png");
}

 

[wickedstangs]

Why

It happens the same: unread forums dind't show the icon. Why?

I using this code (1.1.0 beta4):

.node .node_35 .forumNodeInfo .nodeIcon, .node .node_35 .categoryForumNodeInfo .nodeIcon {
    background-image: url("img/iconos_foro/mercado.png");
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.node .node_35 .forumNodeInfo.unread .nodeIcon, .node .node_35 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("img/iconos_foro/mercado.png");
}

I think they are using sprites now..
http://xenforo.com/community/threads/css-sprites.19650/

 

[James33]

Hi There , even i resized icons 40x40 px they are not showing correctly ?

 

[James33]

Okay just reading that now xenforo using CSS Sprites , can we confirm this will not work properly ?

 

[Digital Doctor]

Node status icons are sometimes called forum status icons.
http://xenforo.com/community/search/1681160/?searchform=1&q=forum+Status&o=date&c[title_only]=1

Okay just reading that now xenforo using CSS Sprites , can we confirm this will not work properly ?

Closed at the request of the thread author.

Re-opened at the request of the thread author, as the option is still available to use individual node icons in 1.1.

Seems like you can use individual forum icons in 1.1.

 

[AndreaMarucci]

I've upgraded to 1.1 and I'm using individual icons. Can someone explain how to modify the code so that the sprites are used?

 

[lagrange]

Hi everybody,

im using custom nodes on our forum, the code i use is following:

/* custom status icons */
.node .node_77 .forumNodeInfo .nodeIcon, .node .node_77 .categoryForumNodeInfo .nodeIcon {
background-image: url("Bilder/Cas.jpg");
 
}
.node .node_77 .forumNodeInfo.unread .nodeIcon, .node .node_77 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("Bilder/Cas.jpg");
}

Its working perfect, but what i need is the same for subforums...anyone got a hint? You can see it here on our forum when you click on "Meeting and Matches"...i would like to have a special icon or NONE for the "[OLD] Soul Calibur 4" Subforum....

http://www.ger-calibur.de/index.php?forum/

Anyone a hint for me?

Thanks a lot, lagrange.

 

[Rho Delta]

I tried this with sprites but the node I did it for just has an empty space where an image should be.