Node icons

creaky

Customer
I would like to change 4 node icons from the default to something else

This is what I used in extra.less on the default style but it's not working with Edge, all node icons stay the same default ones.
Code:
.node--id11 .node-icon i::before { content: '\f008'; }
.node--id11 .node--read .node-icon { opacity: 0.5; }
.node--id19 .node-icon i::before { content: '\f008'; }
.node--id19 .node--read .node-icon { opacity: 0.5; }
.node--id7 .node-icon i::before { content: '\f008'; }
.node--id7 .node--read .node-icon { opacity: 0.5; }

.node--id12 .node-icon i::before { content: '\f26c'; }
.node--id12 .node--read .node-icon { opacity: 0.5; }
 

Steve

Pixel Exit Staff
For now you will need to add an extra class and a '!important' like so.

Rich (BB code):
.node.node--id7 .node-icon i::before {
        content: '\f008' !important;
}
 

Steve

Pixel Exit Staff
This has been changed for the next release, you will just need:

Code:
.node.node--id7 .node-icon i::before { content: '\f008'; }
 

RobParker

Registered
How would I do that with images?

Something like

Code:
.node.node--id2 .node-icon i::before {
        background-image: url("images/node_icons/icn-frontnews2.png");
}
 

Russ

Pixel Exit Staff
How would I do that with images?

Something like

Code:
.node.node--id2 .node-icon i::before {
        background-image: url("images/node_icons/icn-frontnews2.png");
}

An image option will come in the next release I believe.

For node images... you could approach it like this, this is using a sprite with read/unread:

node-sprite.png


Screenshot_2.png



Code:

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

}

It's a little complicated... but if you provide the image + the node id's I can help out with the CSS. XF just isn't built out of the box for images for nodes.

That all being said... we're looking into getting someone to code a little icon add-on for all of our customers. Others do exist but... we'd like it to be free for our clients.
 

RobParker

Registered
What we had in XF1 for Core was this:

Code:
.node .nodeIcon {
    float: left;
    height: 40px !important;
    margin: 10px 0 10px 10px;
    width: 40px !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
      only screen and (min--moz-device-pixel-ratio: 2.0),
      only screen and (-o-min-device-pixel-ratio: 200/100),
      only screen and (min-device-pixel-ratio: 2.0) {
     
      .node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
      -webkit-background-size: 40px 40px;
            -moz-background-size: 40px 40px;
            background-size: 40px 40px;
}
}

.node.node_90 .forumNodeInfo .nodeIcon, .node.node_90 .categoryForumNodeInfo .nodeIcon {
  background-image: url("images/node_icons/icn-frontnews1.png");
  background-position: 0 0;
}

.node.node_90 .forumNodeInfo.unread .nodeIcon, .node.node_90 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("images/node_icons/icn-frontnews2.png");
  background-position: 0 0;
}

With this image for example

icn-frontnews2.png

icn-frontnews1.png
 

Russ

Pixel Exit Staff
What we had in XF1 for Core was this:

Code:
.node .nodeIcon {
    float: left;
    height: 40px !important;
    margin: 10px 0 10px 10px;
    width: 40px !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
      only screen and (min--moz-device-pixel-ratio: 2.0),
      only screen and (-o-min-device-pixel-ratio: 200/100),
      only screen and (min-device-pixel-ratio: 2.0) {
    
      .node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
      -webkit-background-size: 40px 40px;
            -moz-background-size: 40px 40px;
            background-size: 40px 40px;
}
}

.node.node_90 .forumNodeInfo .nodeIcon, .node.node_90 .categoryForumNodeInfo .nodeIcon {
  background-image: url("images/node_icons/icn-frontnews1.png");
  background-position: 0 0;
}

.node.node_90 .forumNodeInfo.unread .nodeIcon, .node.node_90 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("images/node_icons/icn-frontnews2.png");
  background-position: 0 0;
}

With this image for example

View attachment 7231
View attachment 7232

Try something like this in extra.css:

Code:
.block-body
{
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        &:before
        {
            opacity: 0 !important;
        }
        }
    }
    .node--id90 .node-icon i { background: url(styles/default/xenforo/icn-frontnews1.png) no-repeat center center; }
    .node--id90.node--unread .node-icon i { background: url(styles/default/xenforo/icn-frontnews2.png) no-repeat center center; }

}
 

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.