[cXF] Node icons with image

BassMan · Nov 9, 2019

BassMan submitted a new resource:

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

Rich (BB code):
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...

Rock75 · Aug 10, 2020

hi , this code is only for changing one node icon, if i want to change node icon different for each each node how can i do that

BassMan · Aug 10, 2020

Just copy the code again and change the node id (that X in the tutorial).

Rock75 · Aug 10, 2020

thanks got you

gogo · Sep 26, 2020

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.

BassMan · Sep 26, 2020

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

gogo · Sep 26, 2020

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.

BassMan · Sep 26, 2020

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.

gogo · Sep 26, 2020

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.

gogo · Oct 27, 2020

How can I make it work for Link nodes?

BassMan · Oct 27, 2020

Change .node--forum with .node--link in the code. Or add it after. Depends what you need.

LondonDragon · Jan 27, 2021

Hello, I can only see a link in the code to one image, how does the read and unread icon work? thanks

BassMan · Jan 30, 2021

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

LondonDragon · Feb 1, 2021

Many thanks

I will give it a try

LondonDragon · Feb 3, 2021

That seems to work, but the image is huge, is there a way to control the size of it? thanks

BassMan · Feb 4, 2021

LondonDragon said:
That seems to work, but the image is huge, is there a way to control the size of it? thanks

Add width: 35px; and adjust the value.

Maybe you'll need to uncomment this in the code to move the image more to the right: /*padding-left: 5px;*/.

F0STER · Aug 4, 2021

BassMan said:
BassMan submitted a new resource:

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

Read more about this resource...

Sub Forum How To Make

BassMan · Aug 4, 2021

Mukarrebun said:
Sub Forum How To Make

See this resource for help with subforum node types:

[cXF] Coloured Node Icons

Check Free and Premium cXF DIY Customizations on customizexf.com How to change node icon colour to something like that? This is a DIY step-by-step tutorial. Before changing the code let's get prepared: To change the category block header...

xenforo.com

F0STER · Aug 4, 2021

BassMan said:
Alt forum düğüm türleriyle ilgili yardım için bu kaynağa bakın:

[cXF] Coloured Node Icons

Check Free and Premium cXF DIY Customizations on customizexf.com How to change node icon colour to something like that? This is a DIY step-by-step tutorial. Before changing the code let's get prepared: To change the category block header...

xenforo.com

I want to add image not icon

Abraham54 · Aug 7, 2021

@BassMan - see what the standard settings do in my forum:

Screenshot 2021-08-07 at 12-48-32 Webbrowsers, E-mail, Netwerk, Social Media.webp

This style is a pure child of XenForo's default style.

[cXF] Node icons with image

Well-known member

Member

Well-known member

Member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Well-known member

Active member

Active member

Well-known member

Member

Well-known member

Member

Well-known member

Similar threads

We value your privacy