[cXF] Node icons with image

BassMan · Aug 7, 2021

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

Abraham54 · Aug 7, 2021

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 · Aug 7, 2021

Can I see this on your site?

Abraham54 · Aug 7, 2021

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

Abraham54 · Aug 7, 2021

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 · Aug 7, 2021

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

Sorry, but I don't see that style.

Abraham54 · Aug 7, 2021

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

BassMan · Aug 7, 2021

You can use this for specific node:

Less:

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

Less:

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

Abraham54 · Aug 7, 2021

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

CSS:

.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 · Aug 7, 2021

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

Less:

.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 · Aug 7, 2021

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

Less:

.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 · Aug 7, 2021

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

Abraham54 · Aug 10, 2021

Wow @BassMan - that did the trick!

Screenshot 2021-08-10 at 10-56-24 Windows OS.png

Abraham54 · Aug 10, 2021

@BassMan, it looks magnificent now:

Screenshot 2021-08-10 at 14-49-46 Windows OS.webp

SilentGround · Sep 21, 2021

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

BassMan · Sep 21, 2021

SilentGround said:
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:

Less:

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 · Oct 6, 2021

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

BassMan · Oct 8, 2021

Maybe you can try with the code for mobile:

Less:

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

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

hakyangler · Apr 6, 2022

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

BassMan · Apr 6, 2022

hasanakyuz said:
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

[cXF] Node icons with image

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Member

Well-known member

Member

Well-known member

Active member

Well-known member

Similar threads

We value your privacy