XF 2.0 Using custom icons for node icons

chaot3ch

Member
Hey everyone, was having trouble finding out how to do this yesterday but I figured it out and figured I would post it here in case anyone else was having issues.

CSS:
// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

// Custome node icons for specific forums
// Replace the x after .node--id to correspond to the correct node ID you would like to make a custom icon for
.node--idx.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px -32px;
}
.node--idx.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px -32px;
}
 
Hey everyone, was having trouble finding out how to do this yesterday but I figured it out and figured I would post it here in case anyone else was having issues.

CSS:
// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

Is there a way to make this apply to the sub nodes as well?

In this screen in the admin cp, Appearance -> Style Properties -> Node/Forum List -> Sub Forums Display Style,

I have it set for "Listed Below Node"

So when I view the main Node list page, the sub nodes one level deep show up under the parent node. My custom icon appears for the parent nodes, but the sub nodes still show the default icon. If I enter the parent node, the sub nodes are listed and then they show my custom icon. Any second level sub nodes with a first level sub node still shows the default icon.


Main Node List.webp

1st Level Sub Nodes.webp

2nd Level Subnodes.webp
 
Top Bottom