[cXF] Node icons with image

[BassMan]

Add some padding (uncomment padding-left in the code). If necessary, add top padding too.

 

[Abraham54]

With padding-left I have tried more than enough settings, while noticing these have no effect at all.
Padding-top I can try.
The image is webp.

 

[BassMan]

Can I see this on your site?

 

[Abraham54]

Now you can, choose PCS-Standaardstijl 2
You will see three images - all webp

 

[Abraham54]

Through playing with width: xxpx; I made images smaller.
The problem is now how to get the images away from the border, because padding-left does not work!

 

[BassMan]

Now you can, choose PCS-Standaardstijl 2
You will see three images - all webp

Sorry, but I don't see that style.

 

[Abraham54]

Well, I had the style again deactivated, but is available again.

 

[BassMan]

You can use this for specific node:

.node.node--id31.node--depth2.node--forum {
    padding-left: 12px;
}

If you're going to add custom icons for all nodes, you can try with this one for all:

.node.node--depth2.node--forum {
    padding-left: 12px;
}

 

[Abraham54]

@BassMan - i adjusted te settings for office forum, but to no avail!

.node.node--id140 {
        .node-icon i { display: none; }

    &.node--forum {
        .node-body {
        .node.node--id31.node--depth2.node--forum {
         padding-left: 12px;
}
        }
        .node-icon {
            background-image: url('/styles/enhance/node icon/office.webp');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 34px;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}

 

[BassMan]

I've used this code (I've changed the node to yours, so try with this one):

.node.node--id31 {
        .node-icon i { display: none; }

    &.node--forum {
        .node-body {
            padding-left: 12px;
        }
        .node-icon {
            background-image: url('/styles/enhance/node icon/techniews.webp');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 34px;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}

And this is what I get:




It's the same code as in the tutorial.

 

[BassMan]

If for some reason it's not working on your site, use this code:

.node.node--id31 {
        .node-icon i { display: none; }

    &.node--forum {
        padding-left: 12px;
        .node-icon {
            background-image: url('https://piepcomp.nl/styles/enhance/node icon/techniews.webp');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 34px;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}

 

[Abraham54]

I have to start anew.
But that will be tomorow.

 

[Abraham54]

Wow @BassMan - that did the trick!

 

[Abraham54]

@BassMan, it looks magnificent now:

 

[SilentGround]

Instead of single images, can this be done with sprite-sheet?

 

[BassMan]

Instead of single images, can this be done with sprite-sheet?

Haven't tried, but it should go. Add something like this to the code:

width: 22px;
height: 22px;
background: url('sprite_sheet.png') no-repeat 0px -22px;
background-size: 100%;
}

Change the sprite sheet path and other values accordingly.

 

[SilentGround]

Yes that is working, but when i simulate a mobile screen, there are 2 images from the sprite

 

[BassMan]

Maybe you can try with the code for mobile:

@media (max-width: @xf-responsiveMedium) {
    ***
}

Just wrap the code you have with the code above and adjust the values.

 

[hasanakyuz]

Dear @BassMan How do I set the read and unread icons as two different images?

 

[BassMan]

Dear @BassMan How do I set the read and unread icons as two different images?

Check here: https://xenforo.com/community/threads/cxf-node-icons-with-image.172080/#post-1495755