Viewing 30 posts - 1 through 30 (of 32 total)
  • Author
    Posts
  • #7154

    Hello,

    I’d like to set the white spaces to appear a bit opaque, so as to the see the image through them…

    Thanks,

    Justin

    #56857

    Hey,

    the easiest way is to create a semi transparent background image (.png) with Photoshop or Gimp. Then apply it to the sidebar with following code:

    .sidebar .box {
    background: url("../images/skin-minimal/sidebarbg.png") repeat transparent;
    }

    You can change the image path and/or image name :)

    #56858

    Thanks.

    What size should I make the image?

    #56859

    The code above will repeat the image – you can even create a 1x1px image if you’d like to save traffic/.

    #56860

    Thanks. How can I change the post box on the front page in the same way?

    #56861

    You can use following code:

    .content .box {
    background: url("../images/skin-minimal/sidebarbg.png") repeat transparent;
    }

    #56862

    Thanks.

    So I created the .png at 90% opacity. Yet when I paste these code portions in the quick CSS, instead of getting an opaque white background for the post area and sidebar, I get complete opacity…

    #56863

    Did you try to use an absolute path instead of ../images/skin-minimal/sidebarbg.png ?

    #56865

    I used the exact path you suggested.

    #56866

    Ok – in this case replace:

    ../images/skin-minimal/sidebarbg.png

    with:

    http://yourdomain.com/exact-image-location/path.

    i.e.

    http://yourdomain.com/wp-content/themes/flashlight/images/skin-minimal/sidebarbg.png

    Make sure that you can view the image in the browser – otherwise it won’t be display as css background image too.

    #56867

    Hello!

    I tried to apply this to the MINI Content box but it doesn’t work. Can it be done? I already tried it on the other content boxes and worked perfectly.

    Thank you very much in advance for your help!

    #56868

    Dude you are my hero!

    How can I do the same with the date-box on posts and the woocommerce shopping cart under the main-menu?

    My blog is really getting there!!

    Best,

    Martin

    #56869

    Yet another question beside the one above.

    It seems that the changes of opacity I did to the content area and the main menu did not work when on the frontpage and the blog. When on pages it’s all perfect.

    Best,

    Martin

    #56870

    Need to have ths to my Minibar and my right bar…

    It seem to not work…

    #56871

    I also tried to apply this to the mini content box on the front page and it did not work. It DID work for the menu so it is not a problem with the path.

    #56872

    Try to add following code to css/custom.css:

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
    background-color: transparent;
    }

    #56873

    I find this works but it works for all boxes. I need the transparency to be only on the left sidebar menu area. I really need it to be only 40% or thereabout. Any way to do that?

    #56874

    How to make it transparent … not completely gone

    https://skitch.com/baiaz/8y8s1/myownpictures

    After adding this:

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{

    background-color: transparent;

    }

    the solide white is gone… but I want it like the rest ….

    #56875

    You can use rgba colors instead: http://www.css3.info/introduction-opacity-rgba/ but they’re not supported by all browsers (modern css3 browsers support them though).

    #56876

    I’m trying to figure out where to add this code. I too would like a transparent menu bar and mini-box.

    #56877

    Use the code I posted above but instead of:

    background-color: transparent;

    use i.e.:

    background-color: rgba(0,0,255,0.5);

    #56878

    I used background-color: rgba(0,0,255,0.8); — and that was perfect

    #56879

    I am sorry, but could someone please explain in detail where to enter these codes please?

    Thank you,

    aaron

    #56880

    I’m also getting confused by this thread. So is this the correct code for the custom CSS box (obviously setting the rgba value to what ever you want):

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{

    background-color: rgba(0,0,255,0.5);

    }

    #56881

    This code works for me. But the menu drop downs aren’t transparent and the main menu overlaps with the already transparent bar reducing the transparency and making it mismatch the rest of the transparent elements..

    #56882

    Yes – this is the drawback of transparent elements (overlapping elements will reduce the transparency). You can change the background of the menu with following code:

    #top .main_menu .menu ul {
    background-color: rgba(0,0,255,0.5);;
    }

    #56883

    What about the sub menus transparency?

    #56884

    The code I posted above ( .main_menu .menu ul ) will change the submenu background color.

    #56885

    The menu code didn’t work for me. Is there code to sett the transparency for all the components separately? Because I would really like that.

    I’m trying to set everything to .8 transparency but leave the main vertical bar (under the menu that extends down to the hind menu toggle) at the original 0.1 / 0.2 transparency.

    Thanks! I’m looking forward to the response.

    #56886

    Yes – here is the element list:

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget

    I.e. if you just want to change the widget background use:

    .widget {
    background-color: rgba(0,0,255,0.5);
    }

    I’d suggest to use plugins like firebug: https://addons.mozilla.org/en/firefox/addon/firebug/ – they help you to investigate the css code and elements.

Viewing 30 posts - 1 through 30 (of 32 total)

The topic ‘Opacity For White Space In Minimal?’ is closed to new replies.