XF 2.2 Is there a way to use custom icon (not FA) for Search forums via extra.less or add-on?

[NandorHUN]

Hi Guys!

Is there any way to set up a custom icon for search forums via extra.less modification or add-on?
I used an add-on, works fine, but it doesnt support search forums... so I have to find an another solution. Thanks for the help a lot!!

 

[Nicolas FR]

You can target the node in CSS and use content: url(path_to_your_image);

 

[NandorHUN]

You can target the node in CSS and use content: url(path_to_your_image);

Can you write me an example, so I will replace it with my forum ID and image url?

 

[Nicolas FR]

Something like that

.node.node--idX .node--search .node-icon {
    content: url(path_to_your_image);
}

 

[NandorHUN]

Something like that

.node.node--idX .node--search .node-icon {
    content: url(path_to_your_image);
}

I tried this in extra.less - This doesnt work, not even or normal discussion forums :/

 

[Nicolas FR]

.node.node--idX {
    &.node--forum {

        .node-icon i:before {
            content: url(path_to_your_image);
            width: 32px;
        }
        &.node--read .node-icon i:before {
            opacity: 0.5;
        }
    }
}

With this code opacity will be applied to image when forum is read, and image will be without opacity when forum is unread.
it will works for basics forums

So i think for search forum just add .node-search after &.node-forum

@BassMan style

 

[NandorHUN]

.node.node--idX {
    &.node--forum {

        .node-icon i:before {
            content: url(path_to_your_image);
            width: 32px;
        }
        &.node--read .node-icon i:before {
            opacity: 0.5;
        }
    }
}

With this code opacity will be applied to image when forum is read, and image will be without opacity when forum is unread.
it will works for basics forums

So i think for search forum just add .node-search after &.node-forum

@BassMan style

So like this?


.node.node--idX {
&.node--forum.node-search {

.node-icon i:before {
content: url(path_to_your_image);
width: 32px;
}
&.node--read .node-icon i:before {
opacity: 0.5;
}
}
}

Unfortunatelly, it doenst work at all...

 

[NandorHUN]

.node.node--idX {
    &.node--forum {

        .node-icon i:before {
            content: url(path_to_your_image);
            width: 32px;
        }
        &.node--read .node-icon i:before {
            opacity: 0.5;
        }
    }
}

With this code opacity will be applied to image when forum is read, and image will be without opacity when forum is unread.
it will works for basics forums

So i think for search forum just add .node-search after &.node-forum

@BassMan style

Hi!

Any tip? Or how did I edited it wrong?
I wrote an example.

 

[BassMan]

Try removing .node--forum from your example.

 

[NandorHUN]

Try removing .node--forum from your example.

So like this:


.node.node--id99 {
&.node-search {

.node-icon i:before {
content: url(path_to_your_image);
width: 32px;
}
&.node--read .node-icon i:before {
opacity: 0.5;
}
}
}

Does it works for you, or it's just me? Because for me it doesnt change the icon... :/

 

[Nicolas FR]

Your search forums are forums or sub-forums ?

 

[BassMan]

Sorry, haven't tested. You have a typo in node-search. There are double - characters, so it should be like node--search.

Anyway, maybe you should try with this code:

.node.node--id99 {
    .node-icon i { display: none; }
    
    &.node--search {

        .node-icon {
            background-image: url(path_to_your_image);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}

 

[NandorHUN]

Wow, thanks! Works like a charm!
Thank you too @nicodak

One more thing, for some reason Search forum doesnt seem to be in the same "line" as other forums like this:

Spoiler

It little out of line to the left. Any way to compensate for that, it seems not just the icon but the whole title.
I checked and it is the same even without the extra.less modification, the title was a little to the left even without the new icon.

 

[BassMan]

I will need to see this on your site but try adding this to your extra.less template:

.node.node--id99.node--depth2.node--search {
    margin-left: 0px !important;
}

Or adjust the margin to a negative value. Check the mobile view after changing.

 

[NandorHUN]

I will need to see this on your site but try adding this to your extra.less template:

.node.node--id99.node--depth2.node--search {
    margin-left: 0px !important;
}

Or adjust the margin to a negative value. Check the mobile view after changing.

I checked the mobile site and it appears that the icon is smaller then the others in mobile view...
Which is independent from the margin.

 

[BassMan]

Like said, will need to see this on a live forum. You can PM me if you want.

 

[NandorHUN]

Like said, will need to see this on a live forum. You can PM me if you want.

Sure thanks!

I will send the link in PM.