[cXF] Node icons with image

[BassMan]

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:

/*** Node icons with image **/
.node.node--idX {
    .node-icon i { display: none; }

    &.node--forum {...

Read more about this resource...

 

[Rock75]

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]

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

 

[Rock75]

thanks got you

 

[gogo]

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]

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]

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]

This has nothing to do with this customization, but add this to your extra.less template:

.node-icon {
    vertical-align: top !important;
}

Maybe !important is not necessary, haven't tested.

 

[gogo]

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]

How can I make it work for Link nodes?

 

[BassMan]

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

 

[LondonDragon]

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

 

[BassMan]

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:

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

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]

Many thanks I will give it a try

 

[LondonDragon]

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

 

[BassMan]

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]

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]

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]

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]

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



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