Shape 5

Hi I am trying to add a socail icon to the ones already on the site

I want to add linked in and I have added the code for it in the template.css and also the index.php but nothing showing up any ideas what I have missed

PS not showing in the template backend either

colin

Hello,

Can you post a URL of this?

Also if you need the linked in logo to match the other ones, here is the icon set we used:

http://www.iconfinder.com/search/?q=iconset%3AinFocus_social_media

Hi thanks for your reply

here is the URL http://www.boomerangfish.com

You will see I have changed the icon set and currently using the RSS feed for the linkedin account but I would like to add the RSS feed back plus maybe flicker as well so just need to know how to add more than just 4 icons

thanks in advance

Colin

looking at your source code I dont see a 5th DIV being output what I would do is remove the php if statement, most likely something isnt setup correctly across the template files but the if statement is not needed since you want to output the icon

so take for example this:

            <?php if ($s5_rss  != "") { ?>
               <div id="s5_rss" onclick="window.open('<?php echo $s5_rss; ?>')"></div>
            <?php } ?>

and change it to this, and of course change the id and open url:

<div id="s5_rss" onclick="window.open('http://www.yoururl.com')"></div>

Hi and thanks for your replay

this works great for adding duplicate icons but as soon as I change the id and then create a new id in the template.css they disappear?

here is the section of the template I have add 3 new drop,news and blog all currently using the same icon just to see if it works

#s5_socialicons {
   margin-top:130px;
   width:55px;
   z-index: 3;
   right: 24px;
   position:fixed;}
   
   #s5_youtube {
      background: url(../images/Shape5_Appwonder_yticion.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}
   
   
   #s5_facebook {
      background: url(../images/Shape5_Appwonder_fbicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}

   #s5_twitter {
      background: url(../images/Shape5_Appwonder_twicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}
      
   #s5_rss {
      background: url(../images/Shape5_Appwonder_rssicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      width: 24px;
      margin-bottom: 7px;
      padding-left: 8px;}   
      
   #s5_blog {
      background: url(../images/Shape5_Appwonder_twicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}

   #s5_news {
      background: url(../images/Shape5_Appwonder_twicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}
      
   #s5_drop {
      background: url(../images/Shape5_Appwonder_twicon.png) no-repeat scroll 0 0 transparent;
      cursor: pointer;
      height: 40px;
      padding-left: 8px;
      margin-bottom: 7px;
      width: 24px;}


here is my code in the index.php

      <!-- End Menu -->                  
      <?php } ?>

      <?php if (($s5_rss  != "") || ($s5_twitter  != "") || ($s5_linkedin  != "") || ($s5_facebook  != "")) { ?>
         <div id="s5_socialicons">         
            <?php if ($s5_rss  != "") { ?>
               <div id="s5_rss" onclick="window.open('<?php echo $s5_rss; ?>')"></div>
            <?php } ?>
            <?php if ($s5_twitter  != "") { ?>
               <div id="s5_twitter" onclick="window.open('<?php echo $s5_twitter; ?>')"></div>
            <?php } ?>
            <?php if ($s5_youtube != "") { ?>
               <div id="s5_youtube" onclick="window.open('<?php echo $s5_youtube; ?>')"></div>
            <?php } ?>   
            <?php if ($s5_facebook  != "") { ?>
               <div id="s5_facebook" onclick="window.open('<?php echo $s5_facebook; ?>')"></div>
            <?php } ?>   
       <div id="s5_blog" onclick="window.open('http://www.yoururl.com')"></div>
       <div id="s5_news" onclick="window.open('http://www.yoururl.com')"></div>
       <div id="s5_drop" onclick="window.open('http://www.yoururl.com')"></div>
         </div>
      <?php } ?>
   <div style="clear:both;"></div>
   </div>
<div class="s5_topmenuedge"></div>
</div>
</div>
<!-- End Header -->   


as I say if I call them an existing id say facebook they appear but not for new ids?

thanks in advance

If you can provide me login details to your site I can take a look.  Im not sure why they aren't working off hand by just looking at your code because it appears to be correct.

As if by magic they have started to work?? all i did was add my url to the SEF option in the template config

thanks again for all your help

and just out of interest would it be easy to add a alt tag them ie when you hover over the icon it say (twitter) etc

Cheers

Colin

If you created them as HTML images and not DIV backgrounds.  Or use the tooltips script and have tooltips show up on hover.

Works like a charm using the tool tips thanks for all your help

Colin