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

NandorHUN

Active member
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!! :)
 

nicodak

Well-known member
CSS:
.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

Active member
CSS:
.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

Active member
CSS:
.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.
 

NandorHUN

Active member
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... :/
 

BassMan

Well-known member
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:

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

Active member
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:
opera2020.1212.png


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

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

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

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

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