Support » Fixing WordPress » twenty ten theme: add background color to posts.

  • hi there,

    is it possible to add a background color only to the text in a post?

    basically like highlighting the text in a certain color? from my understanding it has something to do with <span>.

    all posts are in div .entry-content…

    ive managed to do this exact thing to my post title and date, but cant get the actual text in the poste highlighted ina background color.

    thank you for any help,
    ray

Viewing 15 replies - 1 through 15 (of 15 total)
  • 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

    Thread Starter jakry001

    (@jakry001)

    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;
    }
    Thread Starter jakry001

    (@jakry001)

    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 😉

    Thread Starter jakry001

    (@jakry001)

    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;">

    Thread Starter jakry001

    (@jakry001)

    hmm, its still doing the same thing.

    somehow i think this might not be possible…

    survival bill

    (@survival-bill)

    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….

    esmi

    (@esmi)

    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.

    survival bill

    (@survival-bill)

    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

    esmi

    (@esmi)

    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.

    survival bill

    (@survival-bill)

    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

    esmi

    (@esmi)

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘twenty ten theme: add background color to posts.’ is closed to new replies.