Node icons

[creaky]

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.

.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]

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

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

 

[Steve]

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

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

 

[RobParker]

How would I do that with images?

Something like

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

 

[Russ]

How would I do that with images?

Something like

.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:

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]

What we had in XF1 for Core was this:

.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

 

[Russ]

What we had in XF1 for Core was this:

.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:

.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; }

}

 

[RobParker]

Thanks! That seems to work