Support » Fixing WordPress » Changing colour of one but not all text boxes.

  • Resolved ryanarbabi



    I’m trying to change the style of two out of four of the text boxes on my site.

    My html/php skills are quite meagre, but I have friends who can help if anyone can point me in the right direction.

    I want to center the title, and also change the colour of the text and box background. I can change them all, but I can’t separate them.

    If there were two text-box widgets, it’d be easy, but I’m not sure how to define them separately.


Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael


    Forum Moderator

    with a link to your site, this would be esasier to answer.

    check if the textwidgets have individual css classes or ids to select them with (that might depend on your theme);
    they might also be in different divs or sidebars which you cold use in the css styles.

    Opps sorry, this is my first post, and I literally read that in the rules 30 seconds ago.

    It is the top two boxes I want to change.



    Forum Moderator

    luckily the textwidgets have these css ids;

    the top one has the css id #text-4
    and the next one down has the css id #text-5

    you can add styles like the following to style.css of your theme:

    #text-4 h3 { text-align:center; }
    #text-4 p, #text-4 a { color: #123456; }
    #text-5 h3 { text-align:center; }
    #text-5 p, #text-5 a { color: #123456; }

    Oh, how simple. Thanks very much for your help.

    The other things I wanted to edit in the text box are the boarder colour, the background colour and the title text colour.

    My friend who is teaching me html always refuses to help me unless I’ve tried first, so out of respect for your help, I’m going to apply the same principle. This is what I’ve tried, but its not working:

    #text-4 { background-colour: #9cccc6; }
    #text-4 widget-title { colour: #FFFFFF; }

    (I’m not sure what I need for the outline boarder colour) 🙁



    Forum Moderator

    the spelling is color

    here is a link to an useful tutorial (imho).

    Oh, how silly of me – stupid American spelling.

    Anyway, it’s not entirely my fault, I’ve tried:

    #text-4 { background-color: #9cccc6; }
    #text-4 widget-title { color: #FFFFFF; }


    #text-4 background { color: #9cccc6; }
    #text-4 widget-title { color: #FFFFFF; }

    but neither are working.

    Did you forget the link?



    Forum Moderator

    added the lihnk ;-)]

    the widget backgrounds use background images;
    therefore, just defining a new background-color is still overwroitten by the existing background image style:


    #text-4 { background: #9cccc6; }
    #text-4 .widget-title { color: #FFFFFF; }

    there needs to be a dot . before widget-title to indicate that it is a css class.


    Got it exactly how I want it.

    Thanks so much for your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Changing colour of one but not all text boxes.’ is closed to new replies.