Adding a telephone number to the header

  • VinceG

    #8152

    Thank you for a great theme.

    Please could someone tell me how I could add our telephone number to the site like this image here?

    I have photoshopped the phone number onto a screenshot of my site to show you what I want and how I want it to look.

    add_phone_number.jpg

    VinceG

    #40537

    Sorry, I made the image too big for it to show what I am looking for. Here’s a smaller image to show the phone number.

    add_phone_number1.jpg

    ianizaguirre

    #40538

    You can do this many ways. I will say 2 that come to mind

    1.) Create the phone number with whatever special effects/ text in photoshop and save it as a png. or jpeg image. then upload it to your wordpress. – create a custom .div class in your child theme and then put the image inside a text box in your widgets with the div class and drag it under an action hook and place it into your prefered postion using firebug as a refrence …with postion absolute.

    2.) Do the same thing as above but instead of using an image you can just do normal text and change the font style and color etc. through your CSS in your child theme by changing the styles in the custom div class that surround your text again use firebug as a refrence.

    Hope that helps

    Mod

    Kenneth John Odle

    #40539

    You can use a Graphene action hook widget area, as well.

    VinceG

    #40540

    Thanks for your replies guys, but that’s gone right over my head. I understand a bit of CSS and HTML, and a little php but am new to wordpress and it’s workings. Is this what you mean about about creating a custom .div class

    Is that like putting the following into my css

    .telephone_number

    Then call it somewhere in the php file of the header.php?

    I also don’t know what you mean by Dragging it under an action hook…

    Please could you explain it like I’m a 50 year old fogey… you’d be right.

    Mod

    Kenneth John Odle

    #40541
    Quote:
    Then call it somewhere in the php file of the header.php?

    Do not edit theme files. This is bad practice, for a number of reasons.

    Here is a tutorial of Graphene action hook widget areas. If you understand widgets, it’s fairly simple, actually:

    http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    ianizaguirre

    #40542

    Have you created a child theme ? If not then I would make that a priority to do this before doing anything else with your website

    VinceG

    #40543

    Thanks Kenneth, that link doesn’t work.

    Ian, thanks for your info, I’ll look into making a child theme.

    VinceG

    #40544

    Thanks again for your replies guys.

    I have made a child theme and I am now trying to put the telephone number in the header where I want it.

    I have added this to my childs css file

    Code:
    .vg-telephone {padding:10px;text-align:right;
    color:#ffffff;
    font-size:24;
    font-weight:bold;
    }

    And I have added the following to the childs header.php

    Code:
    <div id=”vg-telephone”>
    Telephone 0800 000000
    </div>

    However, I still get the same dark grey text which is small, and it’s in the wrong place. I try moving it everywhere within the header file but to no avail. It seems that it’s not taking any notice of the CSS, see here this screen shot.

    3.jpg

    Mod

    Kenneth John Odle

    #40545

    That’s because you are using .vg-telephone in your CSS. A dot designates a CSS class, but you are referencing an ID in your header.

    Use #vg-telephone in your CSS, instead.

    The link works. It really is better to use an action hook widget area, because using header.php in you child theme could have issues when you update the theme. If at all possible, you really want to use theme features before you use a child theme.

Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.