XF 1.2 Add an image to forum categories?

[WiseHollow]

Hello, I'm new to template modifications. If someone can point me to the right direction that would be super-appriciated!

I'm trying to add an image to the right side of all the forum categories. I've circled the location in the image below. I'm not sure where to begin editing in the template or what to edit.

I have plenty of experience with HTML formatting but like I said, this is all very new to me.

 

[Paul B]

See this post: http://xenforo.com/community/threads/replacing-the-category-strip-with-image-s.15789/#post-207305 or this one: http://xenforo.com/community/threads/replacing-the-category-strip-with-image-s.15789/#post-207307

Edit the CSS to suit.

 

[WiseHollow]

See this post: http://xenforo.com/community/threads/replacing-the-category-strip-with-image-s.15789/#post-207305 or this one: http://xenforo.com/community/threads/replacing-the-category-strip-with-image-s.15789/#post-207307

Edit the CSS to suit.

Correct me if I am wrong but, all I could do with that is make a background image on the container. I'm looking to place an html image over the container and not a css-background-image.

 

[WiseHollow]

bump

 

[WiseHollow]

Figured it out. I had to edit the template called "node_category_level_1" and insert an HTML table.

 

[TPerry]

Figured it out. I had to edit the template called "node_category_level_1" and insert an HTML table.

If I understand what you were wanting to do, no you did not.

.node .categoryText {padding-left: 36px;}
.node.category.level_1.node_37 .categoryText{ background: url("images/forum/vendor.png") no-repeat scroll left transparent;}
.node.category.level_1.node_34 .categoryText{ background: url("images/forum/forsale.png") no-repeat scroll left transparent;}

with the node # corresponding to the one you want, and the padding adjusted to where you want for all of them (mine is to the left side of the categories) would give you something like this

 

[Shelley]

If I understand what you were wanting to do, no you did not.

.node .categoryText {padding-left: 36px;}
.node.category.level_1.node_37 .categoryText{ background: url("images/forum/vendor.png") no-repeat scroll left transparent;}
.node.category.level_1.node_34 .categoryText{ background: url("images/forum/forsale.png") no-repeat scroll left transparent;}

with the node # corresponding to the one you want, and the padding adjusted to where you want for all of them (mine is to the left side of the categories) would give you something like this

View attachment 52442

I'm suspecting that they are wanting the images to overlap past the category container rather than it being contained within it. It's still possible though if I'm correct with css and I did have the css to that but must have deleted it.

 

[WiseHollow]

I'm suspecting that they are wanting the images to overlap past the category container rather than it being contained within it. It's still possible though if I'm correct with css and I did have the css to that but must have deleted it.

That is exactly what I am trying to do. I got the image itself to appear on the element but I was having a small other problem. I started a new thread considering there was a new problem.

http://xenforo.com/community/threads/image-z-index-not-having-an-effect.55892/

 

[Shelley]

I haven't got the code offhand but your going to need to use node IDs to specifically allocate the image to that specific forum (unless your displaying the same image on all forum category's. If I saved the css in notepad I'll post it here but since i've mentioned exactly what your wanting to achieve you'll probably have someone jump in and posting the full css.

 

[WiseHollow]

I haven't got the code offhand but your going to need to use node IDs to specifically allocate the image to that specific forum (unless your displaying the same image on all forum category's. If I saved the css in notepad I'll post it here but since i've mentioned exactly what your wanting to achieve you'll probably have someone jump in and posting the full css.

Yes I'm needing the same image on all forum categories. Thanks for the input

 

[imaxorz]

I've replaced by categories with images, but of course there is still the original category text. Can I add something to EXTRA.css to remove the text?