social network icons are not working and want to add Pinterest « Support Forum | Kriesi.at

Support Forum » Brightbox

social network icons are not working and want to add Pinterest

5 posts from 3 voices

Started 7 months ago by peas
Latest reply from Devin
This topic is not a support question

Tags:

peas
Member

Hello,
1) I have the icons for facebook and twitter, but they only refresh the page when they are clicked. How do I get them to reroute to the proper pages?
2) How do I add the Pinterest icon and likewise, have the icon reroute to my pinterest page?

Thank you!!

Posted 7 months ago #
Dude
Dude
1) Add following code to css/custom.css or the quick css field to fix the social icon issue:
```
.social_bookmarks {
    z-index: 100;
}
```
2) tbh I'm not sure if the iconsweet icon set: http://www.iconsweets2.com/ offers a Pinterest icon but anyway - upload your 24x24px icon (I called it pinterest.png in the sample code below) into the brightbox\images\shared folder and add following code to css/custom.css:
```
.social_bookmarks .pinterest a {
    background: url("../images/skin1/pinterest.png") no-repeat scroll 0 0 transparent;
}
```
At least open up header.php and replace:
```
<li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>">RSS</a></li>
```
with:
```
<li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>">RSS</a></li>
<li class='pinterest'><a href="http://myaccounturl.com">Pinterest</a></li>
```
and instead of http://myaccounturl.com insert your pinterest account url.
Posted 7 months ago #
peas
Member

Hi Dude,
Thank you so much for your help!
1) I can now click the icon and my facebook/twitter opens on a new window. Thank you.

2) I added/replaced all the text as you have indicated in the custom.css and the header.php and I think I'm halfway there, but may have done something wrong.
- I also added etsy to custom.css:
.social_bookmarks .etsy a {
background: url("../images/skin1/etsy.png") no-repeat scroll 0 0 transparent;
}

and to header.php

Etsy and Pinterest icons are not visible in the header now; however, if I hover over their space and click, I can get to the associated page.

This is what I have:
<ul class="social_bookmarks">
<li class='rss'>">RSS
<li class='pinterest'>Pinterest
<li class='etsy'>Etsy

<?php
if($twitter = avia_get_option('twitter')) echo "<li class='twitter'>Twitter";
if($facebook = avia_get_option('facebook')) echo "<li class='facebook'>Twitter";
?>



3) I would also like to rearrange the icons like this, if it's possible (I tried and ended up making a mess and had to revert to the original code):
RSS, facebook, Pinterest, Twitter, Etsy

Cheers!

Posted 7 months ago #
peas
Member

This is my site: http://www.spellitwithpeas.com/

Posted 7 months ago #
Devin
Moderator

Hi Peas,

It looks like you don't have the address right for the icons. Make sure to upload them and that you have the correct location so that you can pull them up by navigating directly to them: http://www.spellitwithpeas.com/wp-content/themes/brightbox/images/skin1/pinterest24x24.png

If you can send me a temporary admin login I can re-arrange the icons for you. It'll be quicker than going back and forth here making sure none of the code or syntax gets messed up.

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn't grab it :)

Regards,

Devin

Posted 7 months ago #