Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #282064

    Hi guys!

    I would like to add some more social icons and links to my customer’s social media networks and I wonder if I could add them on the main page under the menu. The default ones are Twitter and Facebook, but would like to add some more. Also would like to change the style.

    Can you please give me a hand with that? Thanks in advance!!

    #282087

    Hey Carlos!

    Thank you for using the theme!

    What social icons would you like to add? Please go to Enfold > Header Layout. Look for the Social Icon section then click the green plus sign symbol to add new social icons. If you want to add your own custom social icons. Edit functions.php, find this code on line 16:

    if(isset($avia_config['use_child_theme_functions_only'])) return;
    

    Below, add this code:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons['new-social-icon']	 = array( 'font' =>'fontello', 'icon' => 'ue970');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons['New Social Icon'] = 'new-social-icon';
    return $icons;
    }

    If that doesn’t work please download the font that you want on http://fontello.com/ then upload it via Enfold > Enfold > Import/Export panel > Iconfont Manager. Edit functions.php, find this code:

    'scrolltop' 	=> array( 'font' =>'entypo-fontello', 'icon' => 'ue876'),
    

    Below, add this code:

    'new-social-icon' 	=> array( 'font' =>'fontello', 'icon' => 'ue802'),
    

    I used the checkmark from Font Awesome. Edit includes > admin > register-admin-options.php, find this code on line 971:

    'Youtube'   => 'youtube',
    

    Below, add this code:

    'New Social Icon'   => 'new-social-icon',
    

    You can now select the Slideshare social icon. You can do the same with yelp icons. Regarding the icon codes, you need to remove the plus sign. U+E802 should be converted to ue802. You can do the same with different social icons.

    Refer to this thread for more info: http://www.kriesi.at/support/topic/head-with-social-media-and-large-logo/

    Cheers!
    Ismael

    #282109

    Hi Ismael!!

    Thanks for your quick reply! Although I am not sure if that is going to work, my theme is not Unfold but Flashlight and I am not sure whether the function you are talking about at the beginning of your reply is available in Flashlight. Can you confirm please? I can’t find it. :)

    Regards

    #282119

    Hi!

    I’m sorry about that, 90% or more of the inquiries are related to Enfold. No, the suggestions above won’t work on Flashlight. Please edit sidebar.php, find this code on line 93:

    if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>Facebook</a></li>";
    						if($twitter = avia_get_option('twitter')) 	echo "<li class='twitter'><a href='http://twitter.com/".$twitter."'>Twitter</a></li>";
    

    You can manually add social icons. For example, we’ll add an instagram icon. Add this below:

    echo "<li class='instagram'><a href='http://instagram.com/instagram-account-here'>Instagram</a></li>";	
    

    Change the url of the instagram account. Create a new instagram png format icon then place it on themes/flashlight/images/skin-minimal/ folder. Call it icons-rounded-instagram.png. Add this on Quick CSS or custom.css:

    social_bookmarks .instagram a {
    background: transparent url(../images/skin-minimal/icons-rounded-instagram.png) 0 0 no-repeat;
    }
    

    Use the existing social icon image if you want to know the icon size.

    Regards,
    Ismael

    #284991
    This reply has been marked as private.
    #285575

    Hi!

    The code in Quick CSS should be (there was a missing dot at the start):

    .social_bookmarks .instagram a {
    background: transparent url(../images/skin-minimal/icons-rounded-instagram.png) 0 0 no-repeat;
    }

    Also, you would need to make sure the Instagram icon exists here:

    http://www.jamminjerk.com.au/wp-content/themes/flashlight/images/skin-dark/icons-rounded-instagram.png

    Regards,
    Josue

    #286053
    This reply has been marked as private.
    #286083

    @generatorgroup, please create another topic in the Enfold subforum, this issue is for Flashlight.

    Cheers!
    Josue

    #286146

    Hi Josue,

    Thanks for your help. I have tried everything but still can’t get it working… I think I am not missing anything… Sorry

    #286321

    Hey!

    Check it now, i modified something in the Quick CSS.

    Cheers!
    Josue

    #286448

    Greeeeeeat!!! Thanks heaps Josue! Have a wonderful day!

    #286449

    You are welcome, always glad to help :)

    Regards,
    Josue

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Social Media’ is closed to new replies.