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


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





    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 :)



    What size should I make the image?


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


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


    You can use following code:

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



    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…


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


    I used the exact path you suggested.


    Ok – in this case replace:




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



    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!


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




    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.




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

    It seem to not work…


    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.


    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;


    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?


    How to make it transparent … not completely gone

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


    You can use rgba colors instead: but they’re not supported by all browsers (modern css3 browsers support them though).


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


    Use the code I posted above but instead of:

    background-color: transparent;

    use i.e.:

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


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


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

    Thank you,



    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);



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


    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);;


    What about the sub menus transparency?


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


    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.


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