WordPress.org

Forums

Custom Sidebars
[resolved] CSS code for changing a text widget title color (6 posts)

  1. queridamolly
    Member
    Posted 1 year ago #

    My site: http://turnerdaviscoaching.com/our-team/

    I'd like to change the color of the title of both of the widgets on that page. I am a CSS novice, but after hunting around WordPress forums, my best guess is that I could use this code:

    .widget-1 h3.sidebar {
        color: #f57021;
    }

    Can anyone tell me if I'm on the right track? And where do I find the widget identifier to use in place of .widget-1? I looked in my theme's functions.php file, but they aren't there. Can they be found in the Custom Sidebars plug-in files?

    Any help appreciated, and thanks in advance!

    http://wordpress.org/plugins/custom-sidebars/

  2. WPMU DEV
    Member
    Plugin Contributor

    Posted 1 year ago #

    Hi @queridamolly,

    I hope you are well today and thank you for your question.

    To change the color of text widget titles, Add following CSS code in the style.css file of your child theme or add it in your site using any of the following plugins.

    .sidebar h3 {
        color: #f57021 !important;
    }

    http://wordpress.org/plugins/my-custom-css
    http://wordpress.org/plugins/simple-custom-css

    Best Regards,

  3. queridamolly
    Member
    Posted 1 year ago #

    Thanks for getting back to me so quickly!

    I had already added that code (without !important) to the style.css file of my child theme. So my widget titles are universally aqua across the site. But now I would like to make the widget titles on one page orange. It is ok if these widget titles will be orange where ever they appear on the site.

    Where can I find the individual identifiers for each widget (ie. .widget-1 from my first message in this thread)?

  4. WPMU DEV
    Member
    Plugin Contributor

    Posted 1 year ago #

    Hi @queridamolly,

    But now I would like to make the widget titles on one page orange.

    You can do this by using page specific selector in the CSS rule.

    Just share me the page link where you want to display widget title in orange so that i can provide the specific CSS code.

    Where can I find the individual identifiers for each widget (ie. .widget-1 from my first message in this thread)?

    You can change your sidebar registration code like following using before_widget and after_widget parameters which you can use to add unique id to widgets.

    register_sidebar( array(
    		'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
    		'id'            => 'sidebar-2',
    		'description'   => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</aside>',
    		'before_title'  => '<h1 class="widget-title">',
    		'after_title'   => '</h1>',
    	) );

    Alternatively you can also use the CSS3 :nth-child() Selector to target specific widget title as following.

    .sidebar > div:nth-child(2) > h3 {
    color: #000;
    }

    Kind Regards,

  5. queridamolly
    Member
    Posted 1 year ago #

    Ok, I'm new at this, so bear with me...

    Just share me the page link where you want to display widget title in orange so that i can provide the specific CSS code.

    http://turnerdaviscoaching.com/our-team/
    The page-id is 68 so this code makes the widget titles orange (they are h3s), but it also makes any other h3 on this page orange too, which I don't want.

    body.page-id-68 h3 {
    color:#f57021;
    }

    You can change your sidebar registration code like following using before_widget and after_widget parameters which you can use to add unique id to widgets.

    I think the 'id' is what I was after in the first place, isn't it? Where do I find or change the sidebar registration code?

    Thank you!

  6. WPMU DEV
    Member
    Plugin Contributor

    Posted 1 year ago #

    Hi @queridamolly,

    http://turnerdaviscoaching.com/our-team/
    The page-id is 68 so this code makes the widget titles orange (they are h3s), but it also makes any other h3 on this page orange too, which I don't want.

    In this case you can use sidebar class in the CSS selector as following to apply orange color to only widget titles h3

    body.page-id-68 .sidebar h3 {
    color: #f57021;
    }

    I think the 'id' is what I was after in the first place, isn't it? Where do I find or change the sidebar registration code?

    There isn't any ID associated with your widgets which you have specified in your initial code.

    You should find the sidebar registration code in your theme files mainly in functions.php file.

    If you find editing sidebar registration code difficult then you can consider using alternate solution posted in my previous reply, that is using the CSS3 :nth-child() Selector.

    Regards,

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Custom Sidebars
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic