How do I change the opacity to be a bit more transparent in Modularity Lite

• 

  xfitreloaded · Member · Oct 28, 2011 at 6:30 am

  • Copy link
  • Add topic to favorites

  I’m looking to change the opacity on my blog. I’m using the modularity lite theme, and I am fairly new to CSS. Any help would be greatly appreciated.
  The blog in question is http://plus1strong.wordpress.com
  Also, is there any possible way of moving the transparent box down a bit?

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

• 

  thesacredpath · Member · Oct 28, 2011 at 7:22 am

  • Copy link

  That is a repeating 1px x 1px transparent PNG image. The easiest way to make a new one would be to open the original PNG in an image editing program for reference, change the size of it to something that you can see, such as 100px x 100px. The create a new image at 100px x 100px, create the level of opacity you want comparing it with the original and then save a copy of it and on the copy reduce it to 1px x 1px, save that, upload that to your media library and then replace the relative URL in the #container background declaration with the absolute URL of your new image.

  .container {
  background: url("images/repeater.png") repeat scroll 0 0 transparent;
  }

  Replace images/repeater.png between the double quote marks with the full URL of your image (starting with http:// .

  This is the original image URL: http://s1.wp.com/wp-content/themes/pub/modularity-lite/images/repeater.png (hard to see since it is only 1px square).

• 

  thesacredpath · Member · Oct 28, 2011 at 8:01 am

  • Copy link

  One note though is that going more transparent on the content area background is going to make it harder to read the white text as it will lower contrast.

• 

  xfitreloaded · Member · Oct 28, 2011 at 2:42 pm

  • Copy link

  Thanks. I’ll keep that note in mind. I’m not looking to go too transparent but just a bit more from that to be able to match an image I have for the header.