XF 2.1 Add image to Filter Bar

MediaSVI

Member
This has been answered.

Here is the code to make it work.

X is the Node ID
Insert Image URL

[data-template='forum_view'][data-container-key='node-X'] .block-filterBar {
background-image: url(IMAGE URL HERE);
background-repeat: no-repeat;
background-position: 2% 50%;
}

To find the Node ID open up the forum with the Filter Bar you would like to add the image to and look to the browsers address bar and you will see the ID number in the URL for that thread. In the picture, the node number is 47



Add code to Appearance > Templates Choose the Style you what to use, top left. Then find extra.less and paste the code in.
---------------------------------------------------------------------------------------------------------------------


I would like to add an image to a filter bar in a forum thread. You can see in the first picture where I would like the image and in the 2nd picture you can see what I would like to do. Can this be done?

Thank you for your time.

filterbar1.png

filterbarLogo2.png
 
Last edited:

gogo

Active member
This is not the best one but you can try.

In extra.less, add:

Code:
.block-filterBar
{
    background-image: url(https://xenforo.com/community/styles/default/xenforo/xenforo-logo.png);
    background-repeat: no-repeat;
    margin-left: 10px;
}
 

MediaSVI

Member
Thanks but that puts the image in every filter bar in the forum. I only want the image in a specific filter bar not the others.
 

gogo

Active member
Change XXX to the node ID.

Less:
[data-template='forum_view'][data-container-key='node-XXX'] .block-filterBar {
    background-image: url(https://xenforo.com/community/styles/default/xenforo/xenforo-logo.png);
    background-repeat: no-repeat;
    margin-left: 10px;   
}
 

MediaSVI

Member
I can not find the ID for the filter bar I can only find the title of the forum that the filter bar is in.

Screen Shot 2020-05-23 at 10.51.36 AM.png
 
Last edited:

MediaSVI

Member
Ok that worked. This is the way the image looks like can it made to be be positioned like the image below?

Screen Shot 2020-05-23 at 11.01.54 AM.png

filterbarLogo2.png
 

gogo

Active member
Yes sure. As I said it's not the best one, you'll have to find the exact point to insert that bunch of codes. I'm no expert in this actually. Just give you an idea that it's doable.
 

MediaSVI

Member
Ok thank you for your time.

If anyone knows how to position the image your help would be appreciated.
 
Last edited:

MediaSVI

Member
Ok thank you so much.

Here is the code to make it work.

X is the Node ID
Insert Image URL

[data-template='forum_view'][data-container-key='node-X'] .block-filterBar {
background-image: url(IMAGE URL HERE);
background-repeat: no-repeat;
background-position: 2% 50%;
}
 
Last edited:

Mr Lucky

Well-known member
I do not understand what you mean 2% 50% can you share the code, please?
As in the w3c link above

Here is the code to make it work.

X is the Node ID
Insert Image URL

[data-template='forum_view'][data-container-key='node-X'] .block-filterBar {
background-image: url(IMAGE URL HERE);
background-repeat: no-repeat;
background-position: 2% 50%;
}
Ah, you got it! yes

The 1st percentage is left to right, the second top to bottom.

But you could also have pixels, hence 10px 50% means 10px from the left and half way between top and bottom

Glad you got it sorted!

(You will need to adjust for mobiles probably)
 

Mr Lucky

Well-known member
First thing would be to check, see how it looks You may need a smaller image or just not have it.
 
Top