Need help? Check out our Support site, then


Set content box transparent

  1. regensburgdesign
    Member

    Hi,

    I know this issue has been treated quite often already, but dor my theme nothing works.

    I want to see the background image a little bit through but nothing worked until now (Theme Stay): http://pwdesigns.de/

    Can anyone help which css code i could use that the content boxes get transparent?

    The blog I need help with is pwdesigns.de.

  2. Hello,

    Use the following CSS to change the content background from white to transparent, for the Stay Theme:

    .hentry { background: none repeat scroll 0 0 transparent;}

  3. regensburgdesign
    Member

    Thank you but still don't work. See here the screenshot: http://thewesternview.files.wordpress.com/2013/08/369.png

  4. fabianapsimoes
    Staff

    Hey @weinfurtnerp,

    Mind trying the following CSS bit? :)

    #page {
        background: none;
    }
  5. regensburgdesign
    Member

  6. fabianapsimoes
    Staff

    Oh, I see. I tested it only with the main page, previously.

    See if that does the trick:

    #page, .hentry {
        background: none;
    }

    On a side note, I don't see that background here. Did you save it already?

  7. regensburgdesign
    Member

    Great!!!! Now it works! You are brilliant!

    One last thing: Would you have also a solution for the footer? It is actually a text widget.....

  8. regensburgdesign
    Member

    Or is there a way to still have the page background, but only transparent?

  9. fabianapsimoes
    Staff

    One last thing: Would you have also a solution for the footer? It is actually a text widget.....

    You mean to also remove its background? The following should do it:

    #home-widgets {
        background: none;
    }

    Or is there a way to still have the page background, but only transparent?

    Like a translucent background? If so, you can replace "background: none;" in the previous CSS rules with:

    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5);

    You can adjust the transparency by replacing the "0.5" value with any value between 0 and 1 (zero being fully transparent and one being fully opaque).

  10. regensburgdesign
    Member

    Great! Works both perfectly! Thank you so much. You made my day!

  11. fabianapsimoes
    Staff

    Oh, you are welcome :)

  12. regensburgdesign
    Member

    Ok one very last question: I just discovered that the featured sliders at "Home" are always backed white, even I use PNG pictures. is there also a way to let them be transparent? Like it is after u clicked on one of them?

  13. fabianapsimoes
    Staff

    Give this a try:

    .flexslider {
        background: none;
    }

    Again, if you want it to be a translucent layer over your content, you can just use that "rgba" value for the "background" property, as we did before.

  14. regensburgdesign
    Member

    Thx, but no change unfortunately....

  15. fabianapsimoes
    Staff

    That's odd. I tested it here again, adding that CSS to the bottom of your custom stylesheet with Firebug, and it seems to work. Do you mind checking your CSS for any missing semicolons or braces? Those things are pretty easy to miss, but they might make a big difference in how your CSS is processed.

  16. regensburgdesign
    Member

    See: http://thewesternview.files.wordpress.com/2013/08/123.png

    But no problem I also like it fully white. Looks nice now, thanks to you!

  17. fabianapsimoes
    Staff

    There, you are missing a curly brace after the following bit! :)

    #home-widgets { background: none;

  18. regensburgdesign
    Member

    I think I don't get it... You say that there is a brace missing at the end? But it IS there...

    #home-widgets {
    background: none;
    }

  19. fabianapsimoes
    Staff

    In the screenshot you posted previously, it is missing a closing curly brace after that bit. See https://thewesternview.files.wordpress.com/2013/08/123.png

  20. regensburgdesign
    Member

    In the screenshot you should see it on number 15....

    Anyways, don't bother. It is ok.

    But let me ask something new again if you don't mind.

    Until now I found no way to integrate a interactive google maps section. Google only offers the iframe-code... Do you know how to do it?

    https://maps.google.de/maps?q=pwdesigns+regensburg&hl=en&sll=51.151786,10.415039&sspn=9.307307,26.784668&hq=pwdesigns&hnear=Regensburg,+Upper+Palatinate,+Bavaria&t=m&z=15

  21. fabianapsimoes
    Staff

    @winfurtnerp, the brace in line 15 closes the ".flexslider" CSS rule. You are missing a closing brace for the "#home-widgets" CSS rule, right below line 11.

    Until now I found no way to integrate a interactive google maps section. Google only offers the iframe-code... Do you know how to do it?

    You can just paste this iframe code into your Text editor, and then publish your post as usual. Here are some instructions on how embed a Google Map into your blog: http://en.support.wordpress.com/google-maps/

  22. regensburgdesign
    Member

    You were right! Now I got it! Only thing: The forwarding-button of the slider is still white.... Any idea on that?

    Didn't know iframe is accepted now. Few months ago this wasn't possible. Ok, great. Thanks.

  23. fabianapsimoes
    Staff

    .featured h2 {
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.1);
    }

    Again, you can replace "0.1" with any value between 0 and 1 (zero being fully transparent and one being fully opaque).

    I left a light background, because I feel it helps identify that is a clickable area. But, if you want it to be fully transparent, you can try the following CSS:

    .featured h2, .featured .hentry {
        background: none;
    }
  24. regensburgdesign
    Member

    Great! Buttons transparent now.

    Yes, thanks for reminding. But I like it as you determined it. Now I even have a double layer transparency. Awesome for me.

    Can I also influence galleries? For example I want this one being transparent in background instead of black: http://pwdesigns.de/referenzen/referenzen-logos-und-keyvisuals/

  25. regensburgdesign
    Member

    Ah and one more: If I want that the menu buttons glow up slowly to white background color instead of immedeately, is there a way to do that?

  26. fabianapsimoes
    Staff

    Can I also influence galleries? For example I want this one being transparent in background instead of black: http://pwdesigns.de/referenzen/referenzen-logos-und-keyvisuals/

    Here goes a CSS tip: To change the looks of an HTML element in your page, you need to target it with CSS a selector. A lot of times, a selector will be the id of the HTML element you want to change, or a class that is being applied to it (through the "class" attribute in the HTML). For example, if you take a look at the source code of your page, you will see that the slideshow container is a <div> tag with the class "slideshow-window". Because of that, to remove the background in your slideshow, you can use the following CSS;

    div.slideshow-window {
        background: none;
        border: none;
    }

    This will target <div> tags with the "slideshow-window" class applied to them, remove its background and border. A lot of times, targeting an element through its id or through a class applied to it is enough to get you going.

    A good way to figure these things out is to use your browser's developer tools. For example, in Firefox, right click any element you want to change in your page, and select the option "Inspect Element". This will open a panel showing the HTML for the element you clicked, and, on the right, all CSS rules being applied to it. Here is a good post on how to use your browser's developer tools and find CSS selectors: https://dailypost.wordpress.com/2013/07/25/css-selectors/.

  27. fabianapsimoes
    Staff

    Ah and one more: If I want that the menu buttons glow up slowly to white background color instead of immedeately, is there a way to do that?

    Again, if you use your browser's developer tools like I mentioned before, you'll see, on the right, that your menu items have a CSS rule called ".wf-active .navigation-main a" applied to them. You can use that same rule to apply a CSS transition to your menu items:

    .wf-active .navigation-main a {
        transition: 1000ms;
    }

    You can make the transition longer or shorter by tweaking the "1000ms" value. The transition property takes a number of parameters to customize the way your element transitions from a state to another. See http://css-tricks.com/almanac/properties/t/transition/ for more details on how CSS transitions work!

    Hope that helps :)

  28. regensburgdesign
    Member

    Great!!!! Again: you are awesome! You provided me so much help. Can't believe it. Please let me know if I can give back in a way. Maybe you need a logo? Let me know!

  29. fabianapsimoes
    Staff

    Cool! I'm glad your website turned out the way you wanted :)

  30. regensburgdesign
    Member

    Could you tell me how to make the sub-menupoints also appearing slowly in transition?

    By the way could you recommend a list or a collection of all those css-codes? That I can learn for myself and try different things?

Topic Closed

This topic has been closed to new replies.

About this Topic