XF 2.1 Add image to Filter Bar

[MediaSVI]

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.

 

[gogo]

This is not the best one but you can try.

In extra.less, add:

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

 

[MediaSVI]

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]

Change XXX to the node ID.

[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]

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.

 

[Ozzy47]

43

 

[gogo]

Node ID = Forum ID



Forum ID for this forum is.. 47, for example.

 

[MediaSVI]

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

 

[gogo]

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]

Ok thank you for your time.

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

 

[Mr Lucky]

Check the examples here with 50% 50%

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[MediaSVI]

Thanks but that code edits the position of the filter bar and not the image when I use it.

 

[Mr Lucky]

Thanks but that code edits the position of the filter bar and not the image when I use it.

Seems to work well left middle ( 2% 50%)

 

[Mr Lucky]

Or else 10px 50% will work.

 

[MediaSVI]

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

 

[Mr Lucky]

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)

 

[MediaSVI]

Not sure how you would adjust for mobile?

 

[Mr Lucky]

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

 

[MediaSVI]

How would you use a smaller image would it be different code or just code added to the code being used?

 

[Mr Lucky]

Another bit of code with just the smaller image but done like this:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com