• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Making a category strip transparent?

#1
I would like to make my my category strips transparent, so you can see through to the background in them. My categories currently look like this:
Capture.PNG

I tried changing the category strip background colour property to "clear value", and it then looked like this:
Capture.PNG

Is there a way I can get the category strip to be transparent, and let the user be able to see the forum's background image through it? Instead of it going some weird colour like it is now? I'm using the Flexile Xenforo style.
-Thanks.
 

Chris D

XenForo developer
Staff member
#2
Hmm, I've just found your forum via the magic that is Google :)

The problem you've got is you can absolutely turn off the background colour of the category strip, and you can absolutely set it to transparent. But of course that div is on top of your main content div which is white, so that will stop the background image from showing through.

Your best bet is to change the style property or CSS for the category heading to be your dark blue colour.
 
#3
Hmm, I've just found your forum via the magic that is Google :)

The problem you've got is you can absolutely turn off the background colour of the category strip, and you can absolutely set it to transparent. But of course that div is on top of your main content div which is white, so that will stop the background image from showing through.

Your best bet is to change the style property or CSS for the category heading to be your dark blue colour.
Hmm, I've been trying to figure out how these folks, did it.
 

Chris D

XenForo developer
Staff member
#7
You will need to add this code to the EXTRA.css template:

Code:
.nodeList .categoryStrip {
background: 
black url('http://www.wonderbolts.org/bgimg.jpg') no-repeat 50% 0 fixed !important;
}
There's more work to do to get it looking right, but that certainly gives the effect of the category area being transparent and shows the background image.
 
#8
You will need to add this code to the EXTRA.css template:

Code:
.nodeList .categoryStrip {
background:
black url('http://www.wonderbolts.org/bgimg.jpg') no-repeat 50% 0 fixed !important;
}
There's more work to do to get it looking right, but that certainly gives the effect of the category area being transparent and shows the background image.
Worked, thank you for the assistance!