The Cre8tive Diva - WordPress & Genesis Framework Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

Add Your Telephone Number and Address to the Pretty Chic Child Theme

320ScreenShot-PrettyChic
320 Mobile Response View

Several weeks ago I was asked to provide a few customizations for Andrea of Central Austin Psychology. Andrea uses the Pretty Chic Child Theme by Pretty Darn Cute Designs.

One of the things we wanted to do was to add the telephone number and address to the Header Right widget area. We also wanted it to center on mobile devices.

Follow these steps and if you think you can’t do it – just email me. I’ll be happy to add it for you.

Add telephone number and address to Header Right Widget Area

First, locate this in your style.css file:

.site-header .widget-area {
     float: right;
     text-align: right;
     width: 600px;
}

Change the width from 600px to 400px. Save it.

Then we need to add some custom CSS for the telephone number and address. Add the following code to your style.css sheet above the section called “Media Queries.” Keep in mind that the colors and font presented here will probably need to be changed based on your own individual branding guidelines.

The .phone and .address will be used in your widget shortly.

.site-header .widget-area .phone {
    background: none repeat scroll 0 0 #91d8ef;
    border-radius: 0 0 10px 10px;
    color: #FFFFFF;
    display: block;
    float: right;
    font-family: 'Habibi',arial,serif;
    font-size: 20px;
    line-height: 1;
    padding: 5px 15px 10px;
    position: relative;
}
 
.site-header .widget-area .phone a {
    color: #fff;
}
 
.site-header .widget-area .address {
    clear: both;
    color: #929b38;
    display: block;
    float: right;
    font-family: Lato;
    font-size: 12px;
    line-height: 1.5;
    margin-top: -25px;
    padding: 10px 0 0;
    text-align: right;
    width: 100%;
}

Stay in the style sheet. Now we need to add some custom CSS to the Media Queries so that area will be responsive.

Search for this:

@media only screen and (max-width: 1200px) {
 
    .site-inner,
    .wrap {
        max-width: 960px;
    }
 
    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
        width: 740px;
    }
 
    .content,
    .site-header .widget-area {
        width: 620px;
    }
 
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .content-sidebar-sidebar .content {
        width: 400px;
    }
 
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-primary,
    .title-area {
        width: 300px;
    }
 
    .footer-widgets-1 {
        margin-right: 30px;
    }
}

You want to add this code to it right before the last closing }. This will give you the extra space at the top you will need if you are using the Adspace area.

.header-image .adspace {
    margin-top: 75px;
}

Save it.

Go to Appearance > Widgets. Drag over a Text widget to Header Right area. Copy and paste this code and change the telephone number and address to your information.

<span class="phone">(555) 555-5555</span><br><br>
<span class="address">123 Your Address, Suite 123<br>
Your City, State Zip</span>

That’s it. Again, if you have difficulty adding this or you don’t feel comfortable doing it – let me know.

Thanks for stopping by!

Did you find this blog or tutorial helpful?
Buy Me a Coffee at ko-fi.com
Like my Signature? Get the Signature Widget for Genesis right here!