Tagged: woothemes social icons in header
October 16, 2012 at 2:19 pm #6875
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?
PaulOctober 16, 2012 at 2:37 pm #6876
Yes the way to do this is to put the code in the header.php but be careful :)
JamieOctober 17, 2012 at 10:11 am #6891
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.
The image have been placed on the page but is on the left hand side of the screenOctober 17, 2012 at 3:01 pm #6897
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.
JamieOctober 17, 2012 at 7:20 pm #6900
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:
<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>
The CSS is as follows:
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?
PaulOctober 17, 2012 at 7:39 pm #6901
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.
PaulOctober 18, 2012 at 5:51 am #6906
Great well done :)
I will put together a tutorial as this is a common request :0)
- You must be logged in to reply to this topic.