WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing colour of one but not all text boxes. (9 posts)

  1. ryanarbabi
    Member
    Posted 3 years ago #

    Hi!

    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.

    Ryan

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  3. ryanarbabi
    Member
    Posted 3 years ago #

    Opps sorry, this is my first post, and I literally read that in the rules 30 seconds ago.
    http://www.flissycakes.com/wp

    It is the top two boxes I want to change.

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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; }
  5. ryanarbabi
    Member
    Posted 3 years ago #

    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) :-(

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    the spelling is color

    here is a link to an useful tutorial (imho).
    http://www.w3schools.com/css/

  7. ryanarbabi
    Member
    Posted 3 years ago #

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

    and

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

    but neither are working.

    Did you forget the link?

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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:

    try

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

  9. ryanarbabi
    Member
    Posted 3 years ago #

    Perfect!

    Got it exactly how I want it.

    Thanks so much for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic