• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Widget font color

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Widget font color

This topic is: not resolved

Tagged: header widget text color

  • This topic has 9 replies, 2 voices, and was last updated 10 years, 8 months ago by tjd.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 7, 2013 at 1:35 am #10074
    tjd
    Member

    Hi,

    I've been working with sidebar and footer widgets. It seems that a change to the widget color affects all widgets, wherever they are. Today I thought of an idea for the Header Widget. At the moment it has grey text and is unreadable. If I change it to white, then the sidebar text will disappear. I'm using the Legacy theme. Is there a practical solution that a barely-coding person can use?

    Thanx,

    Tom

    January 7, 2013 at 1:54 am #10076
    Brad Dalton
    Participant

    #header .widget-area {
    color: white;
    }


    Tutorials for StudioPress Themes & WooCommerce.

    January 7, 2013 at 3:30 am #10079
    tjd
    Member

    Hi braddalton,

    I put the code in between these 2 codes in the css.

    }

    #header .widget-area {
    float: right;
    padding: 20px 0 0;
    width: 300px;
    }

    #header .widget {
    margin: 0 0 10px;
    overflow: hidden;
    }

    I didn't get any change in font color in the widget. Fortunately I didn't see any other change either. I'm past the stage of cardiac arrest but still shudder when unexpected visions pop-up on screen. But thanx so much for your suggestion. If I didn't put it in correctly please advise.

    Thanx, Tom

    January 7, 2013 at 5:05 am #10083
    Brad Dalton
    Participant

    I pasted it at the end of the child themes style.css and it worked fine for me.

    You could add the declaration for color in the existing CSS code

    #header .widget-area {
    float: right;
    padding: 20px 0 0;
    width: 300px;
    color: white;
    }


    Tutorials for StudioPress Themes & WooCommerce.

    January 7, 2013 at 6:00 am #10087
    tjd
    Member

    Hi braddalton,

    Thanx for staying with me on this. I'm getting no change from either code. I added color as you suggested, but nothing changed. Then I added the original as you did, at the very bottom of the css, updated, checked, no change and when I returned to the bottom of css to remove the code, it was gone?? So I'm not sure where to go with this.

    the Title and Title Tag line are both white text on a red header bkgd. The text in the Header widget is grey, and although it's difficult to tell, it looks like the grey text color of the widget titles in the sidebar. As it is I can't use it. It is my attempt to get around the fact that my pic+short bio at the top of the sidebar, fall way down the Page on a Mobile phone. Anyway,

    thanx for your help,

    Tom

    ps/ here's the site if you want to take a peek:  tomjdolan.com

    January 7, 2013 at 6:19 am #10089
    Brad Dalton
    Participant

    I thought you where using a text widget but you are using a profile widget.

    The easiest way would be to paste the text and insert an image aligned left in a new post draft and grab the html from your text editor there and paste it into a text widget in your header right.

    Otherwise the text will be white for all profile widgets as previously stated.

    Not sure how to isolate one profile widget but i'll try and find out for you


    Tutorials for StudioPress Themes & WooCommerce.

    January 7, 2013 at 6:36 am #10094
    Brad Dalton
    Participant

    Here's 3 plugins which all add custom classes to widgets

    Create a name for the custom class and use that as the selector for changing the text color in the header right profile widget

    http://wordpress.org/extend/plugins/kc-widget-enhancements/ KC Widget Enhancements

    http://wordpress.org/extend/plugins/custom-widget-classes/ Custom Widget Classes

    http://wordpress.org/extend/plugins/widget-css-classes/ Widget CSS Classes


    Tutorials for StudioPress Themes & WooCommerce.

    January 7, 2013 at 6:41 am #10096
    tjd
    Member

    Great advice braddalton, Hey that's creative,
    So I simply create a new post with the pic & text, then copy the code from the html page into a text widget and put that up into the header widget area. I wouldn't have thought of that....obviously i don't have the experience. I'll give it a try.

    Thanx, this may take a bit of time and it's gettin late here in Tokyo, but I'll try to get it complete tonite and let you know. So now I see the 3 plugins and I assuming I use one after(?) i create the new text widget, that is not to be used with the current profile widget...or is that not correct?

    I'll hyperlink to the plugins and see what they say...

    You've been great, Thanx'
    Tom

    January 7, 2013 at 7:08 am #10102
    Brad Dalton
    Participant

    No need to install any of those plugins.

    Simply create the HTML (text and image) and paste it into a widget.

    You could make the text white in your editor while creating it or use the CSS.

    #header .widget-area {
    float: right;
    padding: 20px 0 0;
    width: 300px;
    color: white;
    }

    <a href="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg"><img class="alignleft size-full wp-image-37423" alt="tom" src="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg" width="65" height="65" /></a>Welcome to Performance of Speaking, dedicated to Beginning &amp; Advanced Speakers World-wide.

    <a href="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg"><img class="alignleft size-full wp-image-37423" alt="tom" src="http://tomjdolan.com/wp-content/uploads/2013/01/tom.jpeg" width="65" height="65" /></a><span style="color: #ffffff;">Welcome to Performance of Speaking, dedicated to Beginning &amp; Advanced Speakers World-wide.</span>


    Tutorials for StudioPress Themes & WooCommerce.

    January 7, 2013 at 6:16 pm #10224
    tjd
    Member

    Mornin' braddalton,

    Don't know if you received my last email late last nite. Thanx for all your assistance. You made it happen with the creative idea of writing the code in a temp post then taking the created html into the  text widget. My kinda solution. Worked well and it can be seen now in the Header. Had to tinker with the image and I'll be rewriting that tag line for the next week or so.....but it works well.

    Tom

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble