Adding image and links to social media in Wootheme header

Home Pootlepress Academy Support Forums Academy Support Forum Working with video and pictures Adding image and links to social media in Wootheme header

This topic contains 6 replies, has 2 voices, and was last updated by Adding image and links to social media in Wootheme header 1 Jamie Marsland 6 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #6875

    Hello

    I am designing a directory website for artists and I need to put a custom Facebook and Twitter image/logo and a link to the feeds in the header of Listings theme from Woothemes. I have put an image background image in the header, but I can’t seem to find any way to put other items in the header section. Would it also be able to put text and numbers in a header as well?

    Thanks

    Paul

    #6876
    Adding image and links to social media in Wootheme header 3
    Jamie Marsland
    Keymaster

    Hi Paul,

    Yes the way to do this is to put the code in the header.php but be careful :)

    Jamie

    #6891

    Hello Jamie

    Thank you for getting back so quickly.

    I have put the following code in the header:

    <a href=http://www.facebook.com/pages/Artistsinfocouk/472255556127807 target=”_blank”> <img src=”images/facebook_icon.jpg”></a>

    <a href=”https://twitter.com/ArtistsInfo “target=”_blank”> <img src=” images/vsmall_twitter.jpg “></a>

    It apears to be place above the header back ground image and the images are not showing.

    Paul

     

    The image have been placed on the page but is on the left hand side of the screen

    #6897
    Adding image and links to social media in Wootheme header 3
    Jamie Marsland
    Keymaster

    Hi Paul,

    Yes you will need some css to position the images. It’s a bit difficult to explain so I will try and get a tutorial done in the next couple of days.
    Jamie

    #6900

    Hello Jamie

     

    I have been playing with the code on the header and seem to be getting confused. I have managed to get the logos to go to the right at the top but I still can’t see the icons on the webpage.

     

    I have separated the positioning code to a div id. The code on the page is as follows:

     

    <div id=”socialmedia”>

     

    <a href=”http://www.facebook.com/pages/Artistsinfocouk/472255556127807” target=”_blank”>

    <img src=”http://www.artsistinfo.co.uk/wp-content/themes/listings/images/facebook_icon.jpg” alt=”Facebook”></a>

     

    <a href=”https://twitter.com/ArtistsInfo” “target=”_blank”>

    <img src=”http://www.artsistinfo.co.uk/wp-content/themes/listings/images/vsmall_twitter.jpg” alt=”Twitter”></a>

    </div>

     

    The CSS is as follows:

     

    #socialmedia {

    float:right;

    margin-top:50px;

    width:100px;

    padding-left:15px;

    display: inline;

    }

     

    The icons I hoped would be in line but the appear to be beneath each other. Does the “display: inline;” make them line up horizontally?

     

    Paul

    #6901

    Hello Jamie

    It would be good to see a tutorial to see if there is an easier way to do it.

    Found typos in the directory path for the images. seems to be working ok now.

    Paul

    #6906
    Adding image and links to social media in Wootheme header 3
    Jamie Marsland
    Keymaster

    Great well done :)

    I will put together a tutorial as this is a common request :0)

    Jamie

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

You must be logged in to reply to this topic.