6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

How can one

by dgmufasa
5 replies
  • WEB DESIGN
    • |
set the opacity in this theme? I am trying to set the opacity in the menu bar.

I know that one wouls set the opacity in the styles.css file but when doing so, the menu turns gray and is still not "see through"

How can setting the opacity be done?

TIA
  • Profile picture of the author Brandon Tanner
    Originally Posted by dgmufasa View Post

    I know that one wouls set the opacity in the styles.css file but when doing so, the menu turns gray and is still not "see through"
    That's because the background image is not directly beneath the menu bar -- the "content" div is. So when you lower the opacity of the menu bar, you are only seeing through to the "content" layer.

    If you adjust the opacity of the menu and the "content" div, then you will see the background image behind it. But that will affect the entire content div, which is probably not what you want.

    If you want only the menu part to be transparent through to the background image, then you'll have to move it outside of the "content" div (so that it's directly above the background image layer).
    Signature

    {{ DiscussionBoard.errors[8899760].message }}
    • Profile picture of the author dgmufasa
      Thanks for the help Brandon.

      If you adjust the opacity of the menu and the "content" div, then you will see the background image behind it. But that will affect the entire content div, which is probably not what you want.
      Yes, I found this out the hard way - how one can see just exactly what is under what? The Firebug tool moves around - I mean, I click on the area for investigation and then when I click back to the Firebug tool, the definition of what I first clicked on (in this case the menu bar) is gone. It's almost like when you move the mouse around (after first targeting the object). Firebug will follow your mouse - so - if you so happen to pass over a button on the way back to the Firebug screen, firebug then will have the definition of the button (and not the menu) - hope I am making sense here.

      I have recently been trying the developer tool with Google but it seems to crash every 2 or 3 seconds.

      If you want only the menu part to be transparent through to the background image, then you'll have to move it outside of the "content" div (so that it's directly above the background image layer).
      Is there a safe way to do this (I mean changing the template code)? I saw on a video there was something about "Edit CSS" - which is "safer" but I do not see that particular option on this theme.

      Thanks again!

      ---------------------------------------------
      forgot something
      ---------------------------------------------

      If I were to set "content" to opacity and needed to reverse an item within it - for example, I did not want a video to be opaque, then would this be enough to turn the opacity off?

      But if that is not enough, try adding a second style rule like:

      #fancybox-close{
      filter:alpha(opacity=100);
      -moz-opacity:1;
      opacity:1;
      }
      to force the close button back to it's normal opaque state.
      I found it on this page
      {{ DiscussionBoard.errors[8900504].message }}
      • Profile picture of the author dgmufasa
        Hi,

        Disregard the previous post as I have found most of the answers - with the exception of one:

        above the following was mentioned:
        If you want only the menu part to be transparent through to the background image, then you'll have to move it outside of the "content" div (so that it's directly above the background image layer).
        How does one go about locating the correct file to change this? I can track where it is in Firebug - but - it looks like the index page is generated dynamically.

        TIA
        {{ DiscussionBoard.errors[8905904].message }}
        • Profile picture of the author tx138
          I am able to change the opacity on just the nav bar by editing the CSS style to this:

          Code:
          #top-categories, .nav ul {
background-color: #222323;
opacity: .5;
}
          You can find the CSS stylesheet at the following path:
          Code:
          /wp-content/themes/StyleShop/style.css?ver=3.8.1
          If you have any questions please let me know and I can try to help you
          {{ DiscussionBoard.errors[8917445].message }}
          • Profile picture of the author dgmufasa
            Thanks for the reply. I got it to work as necessary I followed the first set of advice and moved things around (as well as added .css code). There is a place in Wordpress that allows one to modify .css code specifically (under Appearance).

            Needless to say, it was quite an exercise ...
            {{ DiscussionBoard.errors[8918669].message }}

Trending Topics