1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Change node icon and set the same for read/unread

Discussion in 'Styling and Customization Questions' started by Claudio, Jun 10, 2013.

  1. Claudio

    Claudio Well-Known Member

    Many people have been asking "how can I change the node icons"?

    My questions is a little different.
    I want to set a specific icon for each node but I don't care if the node is read or unread.

    This is the best code I've found (http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/):
    /* custom status icons */
    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    However, due I'm not going to use a different icon for read/unread, I'd like to know if there's a shorter code to do what I want and show ICON1 for NODE1 no matter if it's read or unread.

    Thank you!
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Just combine the classes like so:

    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon,
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-icon-7.png");
    otto and Tracy Perry like this.
  3. Claudio

    Claudio Well-Known Member

    Thanks Brogan, I didn't expect less from you.

    However, I've added
    background-position: 0px 0px;
    to show the icon where it should be. If I don't set this parameter, the icon is not align.
    I'm using a default style so you should add this parameter to following explanations :)
  4. Brogan

    Brogan XenForo Moderator Staff Member

    I didn't check the actual CSS, I was just showing you how to combine the classes into one statement.
    Claudio likes this.
  5. Claudio

    Claudio Well-Known Member

    I know, I only tried to help to other users who might have the same issue I had

Share This Page