Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 15, 2014 at 6:51 pm #265433
    chevettetutu

    Hi, I wish to take control of theme’s socials icons, is it posible to use them with some shortcode to insert somewhere in a page? In that case, how can I customize them to change the colour or size? Thanks in advance…

    May 15, 2014 at 7:27 pm #265455
    Flikk

    In the advanced layout builder you can simply add icons to your page.
    In the options of each icon element, you can then place a link

    May 15, 2014 at 7:34 pm #265465
    chevettetutu

    Thanks for your help, but I mean using social icons appearing in theme’s menu in other areas, with its hover effect also

    May 15, 2014 at 8:08 pm #265481
    Flikk

    To give the icon a class:
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    For a facebook icon the class you’d need to use is av-social-link-facebook

    hope that helps

    May 16, 2014 at 2:44 am #265656
    Ismael

    Hi!

    Thank you for the update.

    Where do you like to show the social icons? You can use the avia_social_media_icons function in order to render the social icons on different parts of the page. 

    $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$icons = avia_social_media_icons($social_args, false); 
						
echo $icons;

    A screenshot of what you’re trying to do will help.

    Cheers!
    Ismael

    May 18, 2014 at 7:49 pm #266406
    chevettetutu

    Thanks, I want to use theme’s social icons as a widget, or adding to a page with a code block element. How can I do that? How can I use the code you typed?

    May 18, 2014 at 8:49 pm #266429
    Josue

    Hi!

    Try using the Chrome Inspect Tool to get the HTML code of the icons (select the ul container), then you can use it wherever you like:

    Regards,
    Josue

    May 18, 2014 at 8:59 pm #266434
    chevettetutu

    Ok that works, Thanks! Finally how can I customize them? (makes bigger, change hover colour and so on)

    May 18, 2014 at 9:08 pm #266438
    Josue

    Setting a custom ID to the container:

    <ul id="custom_links" class="noLightbox social_bookmarks icon_count_4"><li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com/#/" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_skype av-social-link-skype social_icon_2"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Skype"><span class="avia_hidden_link_text">Skype</span></a></li><li class="social_bookmarks_mail av-social-link-mail social_icon_3"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Mail"><span class="avia_hidden_link_text">Mail</span></a></li></ul>

    Then you can customize them with CSS:

    /* Idle (all links) */
#custom_links li a {
    background: blue !important;
    color: white;
}

/* Hover(all links) */
#custom_links li a:hover {
    background: green !important;
    color: yellow !important;
}

/* Specific link (second one) */
#custom_links li:nth-child(2) a {
    background: peru !important;
}

    Best regards,
    Josue

    August 15, 2014 at 2:50 pm #304927
    codecreative

    hi any advice as to why the social media icons other than facebook aren’t displaying or floating in the footer of column1 on http://79.170.43.15/opulentfinancialplanning.co.uk/

    August 15, 2014 at 3:03 pm #304930
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #footer ul.social_bookmarks li {
clear: none;
}

    Cheers!
    Yigit

    August 15, 2014 at 3:10 pm #304933
    codecreative

    Ah great thank you Yigit it now works fine :)

    August 15, 2014 at 3:22 pm #304934
    Yigit

    Hey!

    You are welcome :) Have a great weekend!

    Regards,
    Yigit

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Using Enfold Social Icons?’ is closed to new replies.