Add More Social Media Icons to header « Support Forum | Kriesi.at

Support Forum » Angular

Add More Social Media Icons to header

6 posts from 4 voices

Started 3 months ago by sneedesign
Latest reply from GabrielleB925
This topic is closed
This topic is not a support question

Tags:

sneedesign
Member

How do I add more social media icons to the top header of Angular? I've seen lots of other sites using this theme add Instagram, Behance, etc.. in addition to the default Facebook, Twitter, Google+. I'm sure it's probably pretty easy, but I can't find any documentation or previous threads discussing this. Help?

Posted 3 months ago #
Nick
Moderator
Hi,

You need to make the following edits for each additional social network that you add. Please remember that everything is case sensitive so keep everything in small letters for theme names except where the code below has capital letters for the social network name.

.

The name of social network is kept consistent throughout the steps below

1) Find an icon that makes sense and use ftp to upload it inside the theme folder to /images/layout/ sub-folder. make sure the name of the image is icon-name.png. It must be a png file, and it must have a prefix of icon- ... so icon-social_network_name.png is how yours would look

2) In the code below which is located in the theme folder in the /admin/register-admin-options.php on line 111. you would insert the block of code below for each new social network. You would replace the word 'dribbble' in all the parts below with whatever the name of the social network you are adding (1 word no spaces, if have two word use a dash - ,just keep it consistent
```
$avia_elements[] =	array(
 "name" 	=> "Your dribbble account", //you account name, number on the social network
 "slug"	=> "avia",//don't change
 "desc" 	=> "Enter your dribbble account name. If you leave this blank the dribbble link in the head of your site wont be displayed.",
 "id"   	=> "dribbble", //change to 1 word of new social network , no spaces
 "std" 	=> "Kriesi", //this is initial value, just put same here as you wrote in 'name' above.
 "type" 	=> "text"); //don't change
```
3. Add the code below to the bottom of your /css/custom.css file or in the backend of your theme add it to the bottom of the Quick CSS text area located in Angular > Theme Options > Styling.. .on bottom of the page. Don't forget to change dribbble to the same one word name of the new frame social network
```
.social_bookmarks .dribbble:hover{background-position: -42px center; background-color:#e44885;}
.social_bookmarks .dribbble{background: transparent url(../images/layout/icon-dribbble.png) 0 center  no-repeat;}
```
4) In header.php please add the line below after chaning dribble to your social network name, in between any of the lines 122-126, based on where you want it to show up related to it neighbor icons. Also please change the your-social-network.url in the line below
```
if($dribbble = avia_get_option('dribbble')) { $social ++; echo "<li class='dribbble'><a href='http://YOUR-SOCIAL-NETWORK-URL.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a></li>"; }
```
Thanks,

Nick
Posted 3 months ago #
GabrielleB925
Member

Hi Nick, I followed all of these steps in order to try to add Instagram to my Social Media Options and it's not working. It does show an extra box next to Twitter, but it all white. No color or image shows when you hover over it, however it does show on the bottom of my browser that it's linking to Instagram/kriesi.

I just double checked to make sure I followed everything as instructed and I believe I did. The only thing I might think is wrong is the image I selected for the instagram icon, but not really sure of that. Any way you can help?

Thanks so much :)

Posted 2 months ago #
GabrielleB925
Member

Ok, a little update..since I added our account info it now turns pink when you hover over it, but no icon shows. I'm convinced the file I uploaded is wrong or needs to be a specific size or style :-/

Posted 2 months ago #
Ismael
Moderator
Hi,

The image source is not correct. Add this on your custom.css
```
.social_bookmarks .instagram {
background: transparent url(../images/layout/icon-instagram.png) 0 center no-repeat;
}
```
I edited the icon you provided. Please download the instagram icon here and replace the old file.

http://www.mediafire.com/view/?qrs4htor8yeuo8b

Regards,
Ismael
Posted 2 months ago #
GabrielleB925
Member

Hi Ismael, It worked! Thank you so much!

Posted 1 month ago #