• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

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

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
  • Shop
  • $0.00

Updated on May 5, 2019

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.

(555) 555-5555

123 Your Address, Suite 123
Your City, State Zip

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!

Like my Signature? Get the Signature Widget for Genesis right here!

FacebookTweetPinPrint

Filed Under: Genesis Framework, Genesis Themes, Tipsy Tuesday, Tutorials, WordPress Tagged With: customization, genesis framework, pretty chic, pretty darn cute designs

Primary Sidebar

It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

Sign Me Up!

Receive my blog posts, tips and updates delivered to your inbox!

Yes, Sign Me Up

*By signing up you will receive new blogs, updates on products, services and important alerts.

Categories

  • Design
  • eCommerce
  • Five on Friday
  • Fonts
  • Free Themes
  • Freebie Friday
  • Genesis Framework
  • Genesis Plugins
  • Genesis Themes
  • Genesis Untapped
  • Instagram
  • MailChimp
  • News
  • Plugins
  • Press This News
  • Social Media
  • Tipsy Tuesday
  • Troubleshooting
  • Tutorials
  • Uncategorized
  • Web Development
  • WooCommerce
  • WordPress
  • WordPress Plugins

Footer

Digital Nomad! I can be anywhere I wanna be now.

  • Facebook
  • Google+
  • RSS
  • Twitter

Latest Blog Posts

  • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
  • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
  • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

Looking for Something?

Copyright © 2012–2021 · Designed with by Me! · Hosted on SiteGround