Social Network Links

[Emily Eiben]

Howdy!

Thanks for much for the theme. It’s really great!

I can’t seem to get the social network link widget to work. Attached are some screenshots. Any ideas?

Thanks 🙂

Emily Eiben

Attachments:

1. 

   SNLinksWidget.png
   

2. 

   ConnectWIthUsNotWorking.png
   

[Bill Robbins]

Good Morning Emily,

Thank you for your business first of all. I really do appreciate it. It looks like a pre-release version of Authentic made it into our production channel. Sorry about that. The styles for the social widget not present just yet. You can add in the styles though for that. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   /* Social Icons
   ----------------------------------------------- */
   
   ul.social-links {
   	list-style-type: none;
   	margin-left: 0;
   	margin-right: 0;
   }
   
   ul.social-links li {
   	float: left;
   	margin-right: 4px;
   	margin-bottom: 4px;
   }
   
   ul.social-links li a:before {
   	padding: 5px;
   }
   
   ul.social-links li a {
   	display: inline-block;
   	color: #fff;
   	-webkit-font-smoothing: antialiased;
   	text-decoration: inherit;
   	font: normal normal 25px/1.5 'Icons';
   	position: relative;
   	z-index: 10;
   }
   
   ul.social-links li:before {
   	content: '';
   }
   
   .widget ul.social-links li:hover a:before {
   	background-color: #000;
   }
   
   ul.social-links li.facebook a:before,
   p.staff-meta a.facebook:before {
   	content: "\e03c";
   	background-color: #435D9F;
   }
   
   ul.social-links li.forrst a:before,
   p.staff-meta a.forrst:before {
   	content: "\e03a";
   	background-color: #5CB84A;
   }
   
   ul.social-links li.twitter a:before,
   p.staff-meta a.twitter:before {
   	content: "\e02a";
   	background-color: #54A4DE;
   }
   
   ul.social-links li.flickr a:before,
   p.staff-meta a.flickr:before {
   	content: "\e03b";
   	background-color: #F60086;
   }
   
   ul.social-links li.dribbble a:before,
   p.staff-meta a.dribbble:before {
   	content: "\e040";
   	background-color: #BE356E;
   }
   
   ul.social-links li.linkedin a:before,
   p.staff-meta a.linkedin:before {
   	content: "\e035";
   	background-color: #2676B5;
   }
   
   ul.social-links li.instagram a:before,
   p.staff-meta a.instagram:before {
   	content: "\e0c0";
   	background-color: #3F729B;
   }
   
   ul.social-links li.google a:before,
   p.staff-meta a.google:before {
   	content: "\e038";
   	background-color: #DC4B39;
   }
   
   ul.social-links li.pinterest a:before,
   p.staff-meta a.pinterest:before {
   	content: "\e031";
   	background-color: #C4202C;
   }
   
   ul.social-links li.youtube a:before,
   p.staff-meta a.youtube:before {
   	content: "\e023";
   	background-color: #CD322C;
   }
   
   ul.social-links li.vimeo a:before,
   p.staff-meta a.vimeo:before {
   	content: "\e028";
   	background-color: #44BBFF;
   }
   
   ul.social-links li.email a:before,
   p.staff-meta a.email:before {
   	content: "\e03f";
   	background-color: #657DAF;
   }
   
   ul.social-links li.skype a:before,
   p.staff-meta a.skype:before {
   	content: "\e02e";
   	background-color: #36ADF0;
   }
   
   ul.social-links li.yelp a:before,
   p.staff-meta a.yelp:before {
   	content: "\e024";
   	background-color: #36ADF0;
   }
   
   ul.social-links li.rss a:before,
   p.staff-meta a.rss:before {
   	content: "\e04e";
   	background-color: #E76B24;
   }
   
   ul.social-links li.itunes a:before,
   p.staff-meta a.itunes:before {
   	content: "\e070";
   	background-color: #BF79CD;
   }
   
   

3. Update your settings.

That should add in the styling for the widget (and the icons). I'll finish checking out the theme and add this to it as well and push out the official release version. Once you've updated your site with version 2.0.1, you can remove those styles since they'll be part of the theme.

If you have any questions or trouble, let me know.

Enjoy your weekend,
Bill

[Author]

Posts