Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #3514

    Hi There,

    Was wondering if it is possible to have something on the top right of the home page. So exactly the same as the logo but directly opposite the logo on the right? My client wants to put his contact number there so I would just create the image I just need to know where to put it in the code and I guess create a smiliar widget to the logo?


    If you could give me some guidance that would be great!

    Thank you,




    Any reason this has to be an image rather than text?

    In header.php you need to create a new element and add the code here, this should get you started:

    <div id="phone-number">
    <!-- delete the next line if you don't want a link -->
    <a href=""><!-- update to your URL if you do want a link -->

    01234 567890

    <!-- delete the next line if you don't want a link -->

    This CSS will position it on the top right; add this to the end of style.css:

    #phone-number {
    float: right;
    display: block;

    Hope this helps!



    Thank you so much for this. The reason I wanted to make it an image was because I wanted to use the same logo font (Neo Sans) and feel that not all computers will support Neo Sans. Even still though, I put the code in and the number is showing up in the wrong place. I have placed the code in css style sheet, but where do i place the code in header.php?

    Thank you!



    open up header.php and place the code James posted above AFTER following code/line:

    <h1 id='logo'><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>


    It still isn’t showing up top right. It has now pushed down the header dark gray part and number is showing up underneath the logo?


    Try to add following code to style.css:

    #phone-number {
    position: absolute;
    right: 0px;
    top: 30px;

    Adjust the top and right value as you like. If you increase the right value the logo will move to the left. If you increase the top value the logo will move downwards.


    Thanks for your help. Just not quite sure what I am doing wrog as even with all of the coding in and changing it, the number is still showing up on the left hand side as opposed to the right! I was looking to have it on the opposite side of the logo but doesn’t seem to changing when I amend things in the phone-number div.

    If I were to create an image similar to the logo and called it phone-number. What code would I put and where in the header.php for it to pull from the ftp site. Like similar to the coding that pulls the logo image from ftp site. That way if I were to create an image I could have the font style same as my logo.

    I might try it this way instead and if this still doesn’t work I will just leave it.

    Sorry to be a nuisance about this one!



    The code within the header looks slightly incorrect, FireBug shows me this is the output:

    <div "="" contact-us="""" http:="" id="phone-number'> <!-- delete the next line if you don't want a link --> <a href="><!-- update to your URL if you do want a link --> 020 7427 0080

    <!-- delete the next line if you don't want a link --> </div>

    By the looks of it, you don’t want a link there so please change the code in header.php to this:

    <div id="phone-number">020 7427 0080</div>

    and change the CSS to:

    #phone-number {
    position: absolute;
    right: 40px;
    top: 30px;

    You can adjust the top and right positioning (all relative to the top right of the main container so increasing right will move the text left).


Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Homepage – top right’ is closed to new replies.