Making a category strip transparent?

[Zovator]

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:


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


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]

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.

 

[Zovator]

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]

Oh wow... Ok...

That's smart. Let me take a look at their code for some hints.

 

[Chris D]

Ahhh... I get it.

Let me play with this on my dev site...

 

[MagnusB]

Depending on the effect you want, you can play around with the css3 opacity feature:
http://www.w3schools.com/cssref/css3_pr_opacity.asp

 

[Chris D]

You will need to add this code to the EXTRA.css template:

.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.

 

[Zovator]

You will need to add this code to the EXTRA.css template:

.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!