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.
<p><span class="phone">(555) 555-5555</span><br><br> <span class="address">123 Your Address, Suite 123<br> Your City, State Zip</span></p> |
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!
