Support » Theme: Pinboard » make page (content) transparent

  • Hi fellow WP’ers,

    I’m using the PINBOARD theme and I’d like to make my website semi-transparent, so I can see the background image through the site. I partly succeeded in doing so. Here is the link to my website.

    Notice that it doesn’t work in IE yet. It tested it OK in Chrome and Safari (on Mac).

    In Appearance / Theme Options / Layout / Custom CSS, I entered the following code :

    #wrapper {
    background: rgba(190, 190, 190, 0.7)!important;
    }

    Most of the site is now transparent, but I’d like to have the CONTENT PAGE transparent as well, just like the rest of the site (header, Facebook widget, etc…)
    I’ve tried a lot of things, but whatever I try, it stays white and not transparent.

    Please help me ! 😉

    ps : and if anyone knows what I can do to make it work in IE as well, any advice on that is also welcome !!

    Thanks in advance 🙂
    Rik (Ghent, Belgium)

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’ll run into issues with transparency inheritance of children elements if you use CSS opacity. To avoid this, you could use an opacity-equivalent background image on the wrapper instead.

    Thread Starter rikd

    (@rikd)

    Hi Andrew,
    Thanks for your quick reply !
    I googled that and came across another code, which I used and modified to 80 % and should work in all browsers.

    The code is :

    #wrapper
    {
     -khtml-opacity:.80;
     -moz-opacity:.80;
     -ms-filter:"alpha(opacity=80)";
      filter:alpha(opacity=80);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
      opacity:.80;
    }

    Now the whole site is transparent, which looks really good for me :
    See : http://deckersmusic.com/ladybird

    However 1 more question : if there’s an image on the site or a youtube movie and I don’t want that particular image or movie to be transparent, is there a way to do that in the html code of the page ?

    Thanks again 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    is there a way to do that in the html code of the page ?

    Yes, well a CSS solution, re-read my first post.

    Thread Starter rikd

    (@rikd)

    Ok, I re-read your first post, but unfortunately I’m new to CSS code.
    Could you be a bit more specific or could you provide me with an example of the code (or a link) ? Thanks again !

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is how to assign a background image in CSS
    http://www.w3schools.com/cssref/pr_background-image.asp

    You ought to make an image of the translucency you want and use that within the #wrapper styles.

    Thread Starter rikd

    (@rikd)

    Andrew,
    Thanks for the tips !

    I figured out how to make a translucent image and use it as background image. However, I can’t find how that background image can affect the page content area.
    It makes the whole wrapper transparent, except for the page content area. That remains a white non-transparent background.

    And what’s even stranger : with the underneath code the whole wrapper (including the page content !) gets semi-tranparent…

    #wrapper
    {
     -khtml-opacity:.80;
     -moz-opacity:.80;
     -ms-filter:"alpha(opacity=80)";
      filter:alpha(opacity=80);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
      opacity:.80;
    }

    In short, what I want to do is : have the whole wrapper semi-transparent,
    – including the page content
    – except some elements on the page content, eg. a youtube movie or an image, because otherwise the two images (background and foreground) are getting mixed up…

    Thanks again for helping me out !

    Thread Starter rikd

    (@rikd)

    Anyone ?

    Quickly summerized :

    What I want to do is : have the whole wrapper semi-transparent, see example page
    – including the page content
    – except some elements on the page content, eg. a youtube movie or an image, because otherwise the two images (background and foreground) are getting mixed up…

    Thanks in advance if someone knows the answer to my issue 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There’s no point using CSS opacity, you cannot (easily & semantically) exclude any child elements of the CSS-transparency-styled element.

    When you use a translucent background image, you need to apply it to all elements necessary and remove your CSS transparency.

    If you want a CSS discussion as to why not to use the suggested methods, consider a CSS forum. This doesn’t seem to be a WordPress issue.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘make page (content) transparent’ is closed to new replies.