Jump to content

Search the Community

Showing results for tags 'portable'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Found 1 result

  1. Not sure if this is appropriate or not, but I thought it might be useful to some members so I'm sharing it here. The default social icons that come with the PageLines branding section look and "feel" (on hover) great. The only thing I wasn't crazy about was that I didn't want them in the header. I wanted them in the footer. So I did a little bit of fiddling around and managed to find a way to make them somewhat portable and, at the same time, retain the nice hover behaviour. <section class="section-branding"><div class="texture"><div class="content"><div class="content-pad"><div class="branding_wrap fix"><div class="icons" style="bottom: 12px; right: 1px;"><a target="_blank" href="http://YOURURL.com/feed/" class="rsslink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/rss.png" alt="RSS"/></a><a target="_blank" href="http://twitter.com/YOURTWITTERID" class="twitterlink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/twitter.png" alt="Twitter"/></a><a target="_blank" href="http://facebook.com/YOURFACEBOOKPAGEURL" class="facebooklink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a><a target="_blank" href="http://linkedin.com/YOURLINKEDINID" class="linkedinlink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/linkedin.png" alt="LinkedIn"/></a><a target="_blank" href="http://youtube.com/YOURYOUTUBEID" class="youtubelink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"/></a><a target="_blank" href="https://plus.google.com/YOURGOOGLEPLUSID" class="gpluslink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"/></a></div></div> <script type="text/javascript"> jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);}); </script> Just copy and paste the code above into a footer widget (it also appears to work in sidebar widgets) and you'll have those beautiful social icons - with that great hover effect - in your footer. Obviously, in the code above, you'll need to replace YOURURL with the actual URL for your site. You'll also need to replace YOURTWITTERID, YOURFACEBOOKPAGEURL, and other social profile links with your own. If you didn't want to use one of the social icons, then simply select and delete the code for it between the opening <a and closing </a> tags. Note: you may have to add/modify some CSS in order to make them display exactly how you want them to - e.g. I added the following CSS (to remove the absolute positioning and to center-align the icons inside the footer widget): .section-branding .icons { position: static; width: 192px; margin-left: auto; margin-right: auto; } Depending on the number of icons you use, you'll need to adjust the width accordingly (I'm using six, for which 192px seems to be correct). Anyway, hope this is useful.
×