Cotum node icon ( sprite )

[forocom]

Hi, I'm trying to add costum icons to the nodes, but none of these two attempts has worked for me

Code added in EXTRA.css

First attempt

.node .node_216 .forumNodeInfo .nodeIcon, .node .node_216 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px;
}
.node .node_216 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px;
}

Second attempt

.node .node_216 .forumNodeInfo .nodeIcon, .node .node_216 .categoryForumNodeInfo .nodeIcon  {

    background-image: url("/styles/spritesheet.pn);
    background-position: -5px -5px;

    background-repeat: no-repeat;
  width: 48px; << Add this in.
  height: 48px; << Add this in.

}

What am i missing here ?

 

[Russ]

Double check you don't have font awesome icons checked (they're enabled by default).

Style Properties -> Node Icons, uncheck Enable Font Awesome Node Icons

 

[forocom]

Double check you don't have font awesome icons checked (they're enabled by default).

Style Properties -> Node Icons, uncheck Enable Font Awesome Node Icons

Thanks for your reply,

Enable Font Awesome Node Icons : is uncheck

 

[Russ]

Actually looking at your second attempt css it's bad CSS:

.node .node_216 .forumNodeInfo .nodeIcon, .node .node_216 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px; width: 48px; height: 48px;
}
.node .node_216 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px; width: 48px; height: 48px;
}

Make sure spritesheet is uploaded, past that I'd need to see it live to debug.

 

[forocom]

Actually looking at your second attempt css it's bad CSS:

.node .node_216 .forumNodeInfo .nodeIcon, .node .node_216 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px; width: 48px; height: 48px;
}
.node .node_216 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/styles/spritesheet.png"); background-position: -5px -5px; width: 48px; height: 48px;
}

Make sure spritesheet is uploaded, past that I'd need to see it live to debug.

I confirm the location of spritesheet.png

if you need to access my site, I remind you that in private talks, you have access information.

Best regards.

 

[Russ]

Couple things... you did NOT uncheck that box:

Secondly, it's linking to: styles/core/styles/spritesheet.png which can't be found on your site.

I even tried styles/core/spritesheet.png, nothing

 

[forocom]

sorry, it's a bit confusing to me.

spriteshee was in ( /styles/spritesheet.png ) but I've moved to [ /styles/core/spritesheet.png ]

plz check images

 

[Russ]

Your background-image was the wrong location (css).

you had:

@imagePath/styles/core/

which equates to: styles/core/styles/core/

Just use:

@imagePath/spritesheet.png

I adjusted this for you.

 

[forocom]

It was great, i have done wrong from the start ( I think, for following the wrong guide )

Thanks.

one last thing :

when it comes to resize the search form in mysite.com/search , is related to your style ?

 

[Russ]

On the newest version of XenForo I think they increased it. You can add this to extra.css if you want:

.XenBase .xenForm {
    max-width: 1100px;
}

 

[forocom]

On the newest version of XenForo I think they increased it. You can add this to extra.css if you want:

.XenBase .xenForm {
    max-width: 1100px;
}

again, thanks. work great.