• 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
Home » Add Your Telephone Number and Address to the Pretty Chic Child Theme

Published on November 4, 2014 / Updated on May 5, 2019 / Reading Time: 3 minutes

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

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    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.

    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–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy