How to change color of text area and ribbon on theme, Ever After?

prhayz · Member · May 10, 2013 at 3:59 pm
Copy link

Add topic to favorites
Hello everybody! Can anyone tell me how to change the color of the text area (wrapper) and the ribbon for the theme Ever After? My site is http://www.photopincher.wordpress.com.

Thanks so much

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 10, 2013 at 9:03 pm
Copy link
The ribbon is made up of three different images. You will either have to create three new images or do some editing of the existing (change color) in an image editing program. Here are the images and below that are the three CSS rules you would have to enter into your CSS and then insert the URLs of the newly modified images.

http://s0.wp.com/wp-content/themes/pub/ever-after/images/ribbon-left.png
http://s0.wp.com/wp-content/themes/pub/ever-after/images/ribbon-middle.png
http://s0.wp.com/wp-content/themes/pub/ever-after/images/ribbon-right.png
```
#description-left {
background: url("URL OF LEFT IMAGE") no-repeat scroll 0 0 / 56px auto transparent;
}

#description-middle {
background: url("URL OF MIDDLE IMAGE") no-repeat scroll 50% 0 / auto 44px transparent;
}

#description-right {
background: url("URL OF RIGHT IMAGE") no-repeat scroll 100% 0 / 56px auto transparent;
}
```
prhayz · Member · May 11, 2013 at 1:18 am
Copy link
Thanks so much for your response, my friend. I am going to give it a try.

Regards
thesacredpath · Member · May 11, 2013 at 3:23 am
Copy link
You are welcome.
prhayz · Member · May 18, 2013 at 1:52 pm
Copy link
Hello my friend! (Thesacredpath) I could not implement your theory. I will just have to work with what I have.

Thanks so much for stepping up to the plate and offer to help. God blesses.
thesacredpath · Member · May 18, 2013 at 4:52 pm
Copy link
If you have created the images and uploaded them, we can help you get them implemented if you wish.

If you do not want to undertake that, we can also help remove the ribbon if you wish and restyle the text of the tagline/site description.
prhayz · Member · May 18, 2013 at 4:57 pm
Copy link
Your second paragraph is definitely my choice. Do you need my info?
thesacredpath · Member · May 18, 2013 at 5:08 pm
Copy link
Let’s start with this which gets rid of the ribbon.
```
#description-left, #description-middle, #description-right {
background: none repeat scroll 0 0 transparent !important;
}
```
For the text, you can edit the color code and size here (I’ve set it to black right now). I’ve included the entire rule in the event you want to change other things as well, such as the font size. We can also move the location of it, or add a basic color for the background if you wish.
```
#site-description {
border-bottom: medium none;
color: #000000;
display: block;
font-family: 'Oswald',sans-serif;
font-size: 1.3rem;
line-height: 3.23077em;
padding: 0;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
}
```
kiranbhatraju · Member · May 20, 2013 at 12:09 am
Copy link
Hi theSacredPath,

Could you help me with your first suggestion? How to implement once you’ve created the images and uploaded them?

Thanks
kiranbhatraju · Member · May 20, 2013 at 12:45 am
Copy link
Nevermind, I just figured it out, thanks!
thesacredpath · Member · May 20, 2013 at 1:58 am
Copy link
You are welcome.

No items found.