Transparent page tabs with Ocean Mist

  • springfieldmillrace · Member ·

    I’m using the Ocean Mist theme. I have a custom image on there. The page tabs cover the lower part of the image.

    Is there any way to make the background behind the page tabs transparent? It’s now a fairly imposing gray bloc, which is visually unappetizing. (The rest of the theme, though, is awesome.)

    The blog I need help with is: (visible only to logged in users)

  • springfieldmillrace · Member ·

    OOPS! The URL is http://www.springfieldmillrace.org

  • springfieldmillrace · Member ·

    Never mind. Got it figured as as soon as I posted.

    /* page tabs */
    #pagetabs a {float: left; display: block; padding: 5px 5px 3px 5px; background: transparent; color: #aaf; font-weight: bold; border-bottom: 2px solid #4a5e65;}
    #pagetabs a:hover {background: transparent; border-bottom: 2px solid #527077; color: #fff;}

  • thesacredpath · Member ·

    This can be done via the paid CSS upgrade using an “opacity” declaration, but it is somewhat tricky because Internet Explorer and older versions of Firefox require special handling, so you end up with needing three lines of code to take care of all browsers.

    There is also a trick where you can actually specify a background color using RGB instead of hexadecimal color codes and then specify an alpha channel transparency.

    The first solution using “opacity” would make the grey background as well as the white lettering more transparent.

    The second using the RGB/alpha channel transparency would only make the grey background more transparent.

    The other possibility is to simply do away with the grey background for the tabs and just let the white text float over the image.

  • The topic ‘Transparent page tabs with Ocean Mist’ is closed to new replies.