XF 2.0 Replace FA node icon with a sprite image?

D

Deleted member 745

Guest
Hi,

How can I replace the FontAwesome node icons with a sprite image for both read and unread forums?

Thank you
 
Add this to extra.less:

Less:
.node--unread .node-icon {
    background-image: url(styles/default/xenforo/imagename.png);
    background-repeat: no-repeat;
    background-position: center
}
.node--read .node-icon {
    background-image: url(styles/default/xenforo/imagename.png);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3
}
 
When I use that code, I'm getting this problem (see picture below). This is the custom sprite I'm using attached.

sprite.webp

Sprites
[deleted]
unread - Read - Page - Link

PS - What would the code be for the Page and Links, please?
 
Last edited by a moderator:
My code was for single images not sprites, for sprites you will need to use background: url(styles/default/xenforo/imagename.png) x y ;

x and y are the coordinates to the sprite.
 
Something like this should work:

Code:
.block-body
{
    .node--unread .node-icon i
    {
        background-position: right center;
    }
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
        background: url(styles/mystylefolder/xenforo/node-sprite.png) no-repeat left center;
        width: 44px;
        height: 49px;
        &:before
        {
            opacity: 0 !important;
        }
        }
    }

}

You may need to tweak some things...
 
Last edited:
These are the positions for the sprite image but dont know where I would put them.

Code:
Node Icon...
Width: 44px
Height: 49px

Node Icon: Read Forum...
Position: -44px 0

Node Icon: Unread Forum...
Position: 0 0

Node Icon: Page...
Position: -88px 0

Node Icon: Link...
Position: -132px 0
 
So your css may look something like this in extra.less:

Code:
.block-body
{
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
        background: url(styles/mystylefolder/xenforo/node-sprite.png) no-repeat -44px 0;
        width: 44px;
        height: 49px
        &:before
        {
            opacity: 0 !important;
        }
        }
    }
    .node--unread .node-icon i
    {
        background-position: 0 0;
    }
    .node--link .node-icon i
    {
        background-position: -132px 0;
    }
    .node--page .node-icon i
    {
        background-position: -88px 0;
    }

}
 
Last edited:
No luck still the same.

UPDATE - Got it working, adding width and height above background, cheers guys.
 
Last edited by a moderator:
Top Bottom