WP SITES

Log in

Styling Header Right Widget in Genesis

—

by

Brad Dalton

A common problem Genesis theme users want to solve is styling the header right widget.

This widget is included in most Genesis child themes.

Here’s the selector which you target to style with CSS code:

#header .widget-area {}

First step is to change the line height

#header .widget-area {
line-height: 1.6875;
}

Then we’ll change the font size:

#header .widget-area {
line-height: 1.6875;
font-size: 16px;    
font-size: 1rem;
}

We’ll use both rem and pixel values for the font size:

Based on these values, 1 rem = 16 pixels

Now we’ll change the font style by adding a font family:

#header .widget-area {
line-height: 1.6875;
font-family: Georgia, Times Roman, Arial;
font-size: 16px;    
font-size: 1rem;
}

Now lets change the font color:

#header .widget-area {
line-height: 1.6875;
font-family: Georgia, Times Roman, Arial;
font-size: 16px;    
font-size: 1rem;
color: #fff;
}

Lets now position our widget to float to the right of the header area:

#header .widget-area {
float: right;
width: 25%;
line-height: 1.6875;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;    
font-size: 1rem;
color: #fff;
}

You can easily float your widget to the left and change the width to another percentage by editing the values for the properties in your CSS declarations.

If you want to use a special font, you can easily install Google fonts and use the font family name in the values above. Example:

font-family: Lustria;

If you need to remove the header right widget area altogether, paste this code into your child themes functions.php file:

unregister_sidebar( 'header-right' );

Styling Other Widgets

You can also create a custom widget anywhere there’s a Genesis hook and style it using the code above.

Comments

5 responses to “Styling Header Right Widget in Genesis”

  1. Georgia Avatar
    Georgia

    Thank you so much for your help!! I only have one problem…..my widget will only show up UNDERNEATH my logo, it’s positioned in the right location – I just can’t get it to align with the menu and logo. Any advice?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Georgia

      What did you put inside the widget?

      You may need to increase the widget width and reduce the width of the title area.

      All this can be done in your child themes style.css file and varies depending on the theme you’re using.

  2. Tom Dolan Avatar
    Tom Dolan

    Hi Brad,
    I see that when you talk about installing a google font, you actually show 3 fonts: Georgia, Times Roman, Ariel. Does having 3 fonts give me a choice of using any of them? Do I install the 3 separately?

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Tom. No these fonts are already supported by all browsers so there’s no need to install them.

      You can use them or install Google fonts and then add the Google fonts to your font family properties in any of your themes CSS declarations.

      1. Tom Dolan Avatar
        Tom Dolan

        Thanx for that info Brad. I saw a similar listing of three fonts at the top of the css style sheet of my new theme editor, and wondered what that meant.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.