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;
}
 

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;   
}
 

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 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)
 
Top