Jump to content
dawsonbarber

How To Make Social Icons "Portable"

Recommended Posts

dawsonbarber

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.

  • Like 1

Share this post


Link to post
Share on other sites
mackenzie

Thank you for taking the time to write this out and share :)

  • Like 1

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
dawsonbarber

No worries, Mackenzie.

Share this post


Link to post
Share on other sites
pehja

:D


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
jimraffel

First of all this is great and I have it almost working, but I'm wondering if there is a typo in the code above?

 

I've installed this at: http://businesstravelexclusive.zippysites.com/

 

You'll notice I'm getting:

 

icons" style="bottom: 12px; right: 1px;">

 

displaying before the icons.

 

I am using this in a universal sidebar installed in the header so maybe that is my problem?

 

I'm not much of a CSS coder but I also notices only two closing </div> and five opening <div> as well as no closing </section>

 

Any help would be greatly appreciated!

 

Thanks again for coming up with this if I can get it to work it's a perfect solution to our current need.

 

Jim :)

Share this post


Link to post
Share on other sites
James B

Hi Jim, I'm assuming you've resolved this as I can no longer see the code appearing on your site before the icons.

 

http://screencast.com/t/E64hSIVwHMK


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • Anthony CALCI
      By Anthony CALCI+
      Hello,
      I have switched from the Framwork theme to DMS theme on http://calcipatrimoine.theproofingcompany.fr (miror site of http://calci-patrimoine.com).
      But I have now only the Primary sidebar in the Widget section ! Secondary sidear, Footer sidebar have all disapear...
      Can I have help to have them back ?
      Regards,
      Anthony
    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
       
      All other plugins deactivated.
    • colleenc
      By colleenc+
      I am having an issue with the size of the font in a text box widget on my sidebar. It has me completely baffled because I have two text widgets on my sidebar and the other one is displaying perfectly. 
      The sole difference between the two is the amount of text in the widget, but that can't be the problem.
      My site is: loveandnudes.com and the text widgets are on the right side at the top. 
      I have duplicated the one with the issue and I am fiddling with it right now to see if I can find a solution. But I would love any suggestions. I though CSS would do the trick, but either I tried the wrong thing - or I put it into the wrong place.
      Thanks for your help!
×