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

Discussion in 'Styling and Customization Questions' started by Zovator, Jun 8, 2012.

  1. Zovator

    Zovator Member

    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.
  2. Chris D

    Chris D XenForo Developer Staff Member

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

    Zovator Member

    Hmm, I've been trying to figure out how these folks, did it.
  4. Chris D

    Chris D XenForo Developer Staff Member

    Oh wow... Ok...

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

    Chris D XenForo Developer Staff Member

    Ahhh... I get it.

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

    MagnusB Well-Known Member

  7. Chris D

    Chris D XenForo Developer Staff Member

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

    .nodeList .categoryStrip {
    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. Zovator

    Zovator Member

    Worked, thank you for the assistance!

Share This Page