Banner customization for Ever After theme

• 

  danandjuli · Member · Mar 13, 2013 at 2:04 am

  • Copy link
  • Add topic to favorites

  I’m wondering if it’s possible to change the banner that accompanies the Ever After theme. As a default, it’s a turquoise color, but I’m hoping to change it to more of a blue. Is there any way to achieve this?

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

• 

  thesacredpath · Member · Mar 13, 2013 at 7:00 am

  • Copy link

  I see that you have figured this out.

• 

  designsimply · Member · Mar 13, 2013 at 11:15 pm

  • Copy link

  I found that you used the following CSS to make that change:

  #description-left {
  	background: url('http://danandjuli.files.wordpress.com/2013/03/ribbon-left.png') no-repeat 0 0
  }
  #description-middle {
  	background: transparent url('http://danandjuli.files.wordpress.com/2013/03/ribbon-middle2.png') no-repeat 50% 0
  }
  #description-right {
  	background: transparent url('http://danandjuli.files.wordpress.com/2013/03/ribbon-right.png') no-repeat 100% 0
  }

  Nice work!

• 

  rosebloomphotos · Member · Mar 14, 2013 at 10:43 pm

  • Copy link

  Can you just remove that little blue banner all together? Make it translucent even?

• 

  kararichard · Member · Mar 17, 2013 at 7:44 pm

  • Copy link

  I have the same question…how do you make the banner go away?

• 

  thesacredpath · Member · Mar 17, 2013 at 8:01 pm

  • Copy link

  If you want the banner and tagline/site description to go away, add he following:

  #description {
  display: none;
  }

  If you want only the banner to go away, but want to keep the tagline/description text, then add this and you will need to edit the color codes for the text so that it will show up. I’ve inserted the header blue color so that the text will show up, so edit as you desire.

  #description-left, #description-right, #description-middle {
  background: none repeat scroll 0 0 transparent;
  }
  
  #site-description {
  color: #0088CC;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  If you do not want the text shadow, make the “text-shadow” declaration look like this in the above:

  text-shadow: none !important;