css customization

• 

  ovnigraphic · Member · Nov 2, 2013 at 8:00 am

  • Copy link
  • Add topic to favorites

  Hi,
  How could I get my banner thinner in height, my image has the size I want but is not centered, and i think a thinner banner would really look nicer. And then get all the other elements of the page a bit higher to keep the same space between the banner and them.
  Is it possible to add just a little of transparency (80% or so) to the background banner ?
  Thank you

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

• 

  thesacredpath · Member · Nov 2, 2013 at 3:40 pm

  • Copy link

  Are you talking about he background image with the boxes? If so, you can add the following and adjust the last number (0.8) as desired, which is the opacity setting. 0 would be transparent and 1 would be completely opaque.

  body.custom-background {
      background-color: rgba(0, 0, 0, 0.8);
  }

  On the image positioning, can you explain a little more what you are wanting?

• 

  trailercardreamingnomad · Member · Nov 3, 2013 at 4:30 am

  • Copy link

  Hi! My dashboard does not have ‘Editor’ button under ‘Appearance’, how do I find it?

• 

  raincoaster · Member · Nov 3, 2013 at 4:44 am

  • Copy link

  Do you have the Custom Design upgrade?

• 

  ovnigraphic · Member · Nov 3, 2013 at 12:19 pm

  • Copy link

  hi,
  thank you for the transparency tip….
  About positionning, I would like the whole banner on top of the page to be thinner… and about the transparency , my banner image has no bacgroung , so may be by getting the banner a little transparent I could see a little bit of the cubes in the background…
  Thanks again for all your precious help !!!

• 

  justpi · Member · Nov 3, 2013 at 1:02 pm

  • Copy link

  To make the header thinner, add this:

  .site-header img {
  margin-bottom: 0;
  }

  To make it semi-transparent, add this:

  .site-header {
  background-color: rgba(66, 66, 66, 0.75);
  }

  Change the 66 (all three of them) to make it lighter or darker, change the 0.75 to adjust the degree of transparency.

• 

  ovnigraphic · Member · Nov 4, 2013 at 12:28 am

  • Copy link

  Hi,
  That’s great ! that’s exactly what I wanted, thanks a lot !
  How could I do the same thing for the widget in the side bar ?
  Thanks again.

• 

  ovnigraphic · Member · Nov 4, 2013 at 12:31 am

  • Copy link

  I coded it this way
  .site-header {
  background-color: rgba(66, 66, 66, 0.75);
  }
  and it’s exactly what I wanted.
  Thanks again.

• 

  justpi · Member · Nov 4, 2013 at 12:35 am

  • Copy link

  You’re welcome!

  If you want the same shade of grey and the same degree of transparency, turn this:

  .site-header {
  background-color: rgba(66, 66, 66, 0.9);
  }

  to:

  .site-header, .widget {
  background-color: rgba(66, 66, 66, 0.9);
  }