forocom

Well-Known Member
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

Code:
.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
Code:
.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 ?
 
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
 
Actually looking at your second attempt css it's bad CSS:

Code:
.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.
 
Actually looking at your second attempt css it's bad CSS:

Code:
.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.
 
Couple things... you did NOT uncheck that box:

Screenshot_8.png


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
 
Your background-image was the wrong location (css).

you had:

Code:
@imagePath/styles/core/
which equates to: styles/core/styles/core/

Just use:
Code:
@imagePath/spritesheet.png

I adjusted this for you.
 
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 ?

search before.png
 
On the newest version of XenForo I think they increased it. You can add this to extra.css if you want:
Code:
.XenBase .xenForm {
    max-width: 1100px;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back