[cXF] Node icons with image

[cXF] Node icons with image

BassMan

Well-known member
BassMan submitted a new resource:

[cXF] Node icons with image - DIY tutorial to change default FA node icons with image

Would you like to change your default Font Awesome node icons with image like this?

< read node >
View attachment 213366


< unread node >
View attachment 213367



To change a single node icon with an image add this code to your extra.less template:

Rich (BB code):
/*** Node icons with image **/
.node.node--idX {
    .node-icon i { display: none; }

    &.node--forum {...

Read more about this resource...
 
How do I make sure the icon is always placed at top of every forum block?

The icon will go to the middle vertically if there are more contents in the block.
 
How do I make sure the icon is always placed at top of every forum block?

The icon will go to the middle vertically if there are more contents in the block.
Can you show me this on a live forum? That will be quicker. You can PM me your URL.
 
Currently all node icons are located in the middle of each row. How can I make them vertically at the top? That's at the same level of the forum titles.

mNrHI6.jpg
 
This has nothing to do with this customization, but add this to your extra.less template:
Less:
.node-icon {
    vertical-align: top !important;
}

Maybe !important is not necessary, haven't tested.
 
Thanks. The vertical-align doesn't work on my UI for some unknow reasons.

I changed background-position: center; to background-position: center top; or more specifically background-position: center 15px; and it works.
 
Last edited:
Hello, I can only see a link in the code to one image, how does the read and unread icon work? thanks
Hello,

in the code you can see this part:
Less:
&.node--read .node-icon {
    opacity: 0.4;
}
This part of the code adds opacity to you image you've chosen for a forum node is it is read. For unread the image will show without opacity. To have another image for unread forum you'll need to change it.

Replace opacity: 0.4; with this:
Less:
background-image: url('/images/your_image.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;

Change the image path to have this image as read forum indicator.
 
Alt forum düğüm türleriyle ilgili yardım için bu kaynağa bakın:
I want to add image not icon
 
Back
Top Bottom