Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #7759

    Hi, I would like to know if there is a “simple” way to add another transparent box (like the one on the background of the main sidebar) below the main content box (as you see in this screenshot created with photoshop: ).

    I imagine that I should create a div (which should content the div with .box and .content classes) in some php page…an then link it to a css class in the custom.css…..but should you please give me some directions?

    Thank you very much!


    Try following code and replace the bg color with your transparent image:

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
    background: #fff;


    It doesn’t create a new different box but it overwrites the transparent one of the sidebar, check my site to see:


    1) For .content .box try “background” instead of “background.image”.

    2) Try to add following code to css/custom.css (before your bg image code):

    .box, .blog-meta, .widget {
    background: none transparent;


    Nothing interesting appened, and using background instead of background-image I get a space between the texture sample…but nothing that can be made similar to the image I posted you before.. should I give up?


    I think the only problem is your “transparent” png image now because it’s not (semi)transparent.

    I.e. if I remove the background code around line 69 (your custom pattern image) I get transparent content areas which indicates that the image itself is not transparent.


    Dear Dude, thank you for your patience.

    I’ve added this code:

    .content .box {

    margin-left: 0px;

    bottom: 50px;

    background-color: #fff;

    background-image: url(“../images/skin-minimal/texture_paper_50_small.png”) !important ;


    .template-page.content {

    background-image: url(“../images/skin-minimal/bg-trans20.png”) !important;

    width: 590px;

    margin-left: 221px;

    margin-bottom: -70px;

    margin-top: 0px;

    padding-top: 100px;


    and as you can see ( I’ve almost solved. To get the same effect I should add right and left border to the new transparent box. But if I use border-right/left css code i don’t get the same effect. I’ve to add other 2

    <span class=”border-transparent border-transparent-left”/>

    <span class=”border-transparent border-transparent-right”/>

    as in the main sidebar and then modify their classes….my question now is…how can add this code? In which php page should I work? Any ideas? Thanks


    The elements are absolute positioned – I’d add it to page.php before following line:

    echo "</div><!--end box-->";

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Add transparent box as the background of .sidebar’ is closed to new replies.