twenty ten theme: add background color to posts.

You can try this to place a gray background in a post.

If you want the color in Archives then you will need to add another for .entry-summary

Add these lines to the style.css after you make a back-up copy of course.

.entry-content {
background-color: #cccccc;
}

Michael

hi, thanks for your help.

ive tried that before, and all it does is color the post section a certain color.

what i want to do is: use background-color specific only to text, and also use span so only the text has the background color behind it and nothing else (so the text looks highlighted).

ive managed to do this manually by adding this code:

<span style="background-color:yellow">

the problem is i have to add this tag manually to each block of text i want to post to get the desired effect.

i was hoping i could add some extra coding somewhere so everytime i post any text it automatically is always highlighted.

cheers

really highlight all the text in every full post’s paragraphs?

try to add this to functions.php of your theme:

add_filter('the_content','hightlight_the_paragraphs');
function hightlight_the_paragraphs($output) {
if(!is_page()) :
$output = str_replace('<p>','<p><span style="background: #fc3;">',$output);
$output = str_replace('</p>','</span></p>',$output);
endif;
return $output;
}

thank you so much alchymyth!! it worked. i really appreciate it, thank you ??

how do you know how/what to edit and customise so well?

Nice fix.

@jakry001
the answer to your last question:
practice, many mistakes, long hours …

would be fun to see the result in a live site ??

One more thing. Right now it’s doing everything properly, but I also add border to your code:

<span style="background:yellow; border: 3px solid yellow">

The border part allows the appearance of the background to have greater height. This is the only way I know how to increase the height… unless there is another way?

This method of adding border, however, will also add a small yellow vertical line to spaces between paragraphs of text in a post, and add a horizontal line at the bottom of embedded items eg. youtube videos.

If I remove border, then this problem goes away obviously, but the appearance of background height is reduced.

So it there a way to increase height of the background colour without using border, or is there a way to only append this code to text only?

Much thanks again,
Ray

try:

<span style="background:yellow; padding: 3px;">

hmm, its still doing the same thing.

somehow i think this might not be possible…

so you cant change the color of one page directly through the html part of the edit page thing darn that I guess would be to easy….

Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

I copied it into a new directory called theame2 that should work?

can this new thing I found work for changing page background colour in different pages found this in the edit page thing at the bottom I tried some html colour things but nothing seemed to work any ideas?

Add New Custom Field:

Bill

I copied it into a new directory called theame2 that should work?

Yes but ensure that you rename the theme in style.css.

In theory, custom fields could be used to output additional post classes that could then be used to change background colors, yes.

OK I get this colour code thing interesting.
but can you contain it say 300 wide and 100 high ?

<span style=”background:yellow; padding: 30px;”>

Bill

Again- yes. With a working knowledge of PHP, custom fields and CSS, it should be possible.