Opacity

• 

  phantomcove · Member · Oct 22, 2011 at 8:27 pm

  • Copy link
  • Add topic to favorites

  Hi I’m using the Mystique theme and i just wanted to change the opacity on the white background of my posts. Just wanted to know if this were possible and where i would insert the coding to make this possible. Thanks to any answers. Sorry new to blogging, CSS and all that.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 23, 2011 at 1:04 am

  • Copy link

  Here is the problem. You have to make about 5 different background declarations in #main in order to cover all browsers, which can be done, but the problem is, the CSS tidy program that wordpress uses to check syntax and strip out any bad or disallowed CSS you may insert will strip out all but the main CSS3 background declaration. That means that only a couple of browsers will end up showing the opacity. All others will show just a solid white color.

  The other issue is the image used for the widget titles which have a white background color and if you change it to an opacity as well, that opacity is “added” to the other opacity so you still end up with an almost white block around the widget title image.

  The best way would be to create a 10px x 10px PNG image with a white color with the opacity set where you want it and then declare a background image for #main with a background color declaration of transparent such as below.

  #main {
  background: url("URL OF IMAGE") repeat scroll 0 0 transparent;
  }
  
  .widget-title span {
  background-color: transparent;
  }

  Try the second bit of CSS above to see what that does as it puts a purple and white gradient below the widget title image that is kind of interesting actually.

  Create you transparent PNG image with white with an opacity set, upload it to the media library, get the URL of that image and then replace URL OF IMAGE between the double quotes in the background declaration in #main.