Forum Support

Shape 5
March 28, 2024, 07:05:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to add a social icon  (Read 895 times)
shynee
Jr. Member
**
Offline Offline

Posts: 24



« on: May 20, 2011, 04:42:08 AM »

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
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: May 20, 2011, 12:26:32 PM »

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
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shynee
Jr. Member
**
Offline Offline

Posts: 24



« Reply #2 on: May 20, 2011, 12:50:05 PM »

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

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: May 23, 2011, 10:50:04 AM »

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>
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shynee
Jr. Member
**
Offline Offline

Posts: 24



« Reply #4 on: May 25, 2011, 06:15:31 PM »

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

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #5 on: May 26, 2011, 11:23:13 AM »

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.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shynee
Jr. Member
**
Offline Offline

Posts: 24



« Reply #6 on: May 26, 2011, 04:10:16 PM »

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
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 on: May 27, 2011, 10:21:01 AM »

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

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shynee
Jr. Member
**
Offline Offline

Posts: 24



« Reply #8 on: May 27, 2011, 04:45:50 PM »

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

Colin
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.