Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #18651

    Hi,

    I cannot find the following section from Dude’s Post in exactly in that form in functions.php of Propulsion. When I add the recommended code from that post (http://www.kriesi.at/support/topic/want-to-add-pinterest-icon-to-social-media-icons-in-the-header) the icon shows up without mouse over and a little additional piece on the right side. Screenshot: https://www.sugarsync.com/pf/D0879465_60449408_975984

    3) In header.php replace:

    echo ‘ <li class=”rss”>RSS‘;

    with:

    echo ‘ <li class=”pinterest”>Pinterest‘;

    Is that the right one?:

    echo ‘<ul class=”social_bookmarks”>’;

    do_action(‘avia_add_social_icon’,'header’);

    if($dribbble = avia_get_option(‘dribbble’)) echo “<li class=’dribbble’>“.__(‘Follow us on dribbble’, ‘avia_framework’).”“;

    if($twitter = avia_get_option(‘twitter’)) echo “<li class=’twitter’>“.__(‘Follow us on Twitter’, ‘avia_framework’).”“;

    if($facebook = avia_get_option(‘facebook’)) echo “<li class=’facebook’>“.__(‘Join our Facebook Group’, ‘avia_framework’).”“;

    echo ‘ <li class=”pinterest”>Pinterest‘;

    Regards,

    Frank

    #100291

    Hi Frank,

    That topic is for the Sentence theme so it may need a little bit of adjustment. From your screenshot, it looks like the Pinterest icon may need to be adjusted so that the hover part of the image is a bit further over. The hover state moves the background 47 pixels over so it should enough room for that to create an actual hover effect.

    Regards,

    Devin

    #100292

    Hi Devin,

    thank you. It wasn’t my idea. Comes from Dude (look at that post: http://www.kriesi.at/support/topic/feedburner-from-google-cut-off-in-october-2012?replies=7#post-86599). I have no idea about those codes. But it seems to be difficult or not welcome to add some more icons instead of the already prepared one, right?

    Frank

    #100294

    Hi,

    Along with your theme there should have been other files. Do you still have them? One of those files had 8 psd files (photoshop format) and one of those psd files are the social icons. I am not good with graphics,. always wind up with some ugly stuff.

    http://i.imgur.com/qHdsg.png

    and

    http://i.imgur.com/eX2QU.png

    Thanks,

    Nick

    #100295

    Hi Nick,

    thank you. Yes, I know those .psd files. I used the file “icon-discons-Master.psd” to generate 2 additional files. Size 24×24 format .png. Placed them into the folder /wp-content/themes/propulsion/images/layout and add the additional code snippet “echo ‘ <li class=”pinterest”>Pinterest’;” in functions.php as written above.

    The result is a button without mouse over which is too close to the others seems to have a bit of a iteration on the right side. You can see it here: https://www.sugarsync.com/pf/D0879465_60449408_975984

    I guess that this has something to do with the respective code, hasn’t it?

    Frank

    #100296

    Hi,

    and the second question is, whats the right code is to get the icons also into the footer (footer.php).

    Frank

    #100297

    Hi Frank,

    For your second question, I believe that by default Propulsion’s social icon is already in the footer, on the right side of Copyright. Anyway, adding this code will make social icons appear:

    <ul class="social_bookmarks">
    <?php
    do_action('avia_add_social_icon','footer');
    //contact icon
    $contact_page_id = avia_get_option('email_page');
    if (function_exists('icl_object_id')) $contact_page_id = icl_object_id($contact_page_id, 'page', true); //wpml prepared
    if($contact_page_id) echo "<li class='mail'><a href='".get_permalink($contact_page_id)."'>".__('Send us Mail', 'avia_framework')."</a></li>";

    if($dribbble = avia_get_option('dribbble')) echo "<li class='dribbble'><a href='http://dribbble.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a></li>";
    if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='http://twitter.com/".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a></li>";
    if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a></li>";

    ?>

    <li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>"><?php _e('Subscribe to our RSS Feed', 'avia_framework')?></a></li>

    </ul>
    <!-- end social_bookmarks-->

    Regards,

    Ismael

    #100298

    Hi Ismael,

    yes, they are. For facebook, twitter, dribbble and rss feed which comes all from Propulsion theme options.

    But not for Google+ and Pinterest, which are not yet available in Propulsion theme options?

    Frank

    #100300

    Hi Frank,

    We’ll need to see the page and icons live to give any kind of adjustment at this point. Just need a frame of reference to see what you have now and what else needs to be modified.

    For the footer icons, you just need to add the same list items with your google+ and pinterest code to the list there. Again, some minor adjustment may need to be done.

    Regards,

    Devin

    #100301

    I’m posting this here as a helper for anyone looking to add or adjust their social media icon in the Propulsion theme. This will setup the controls in the backend, allowing you to turn them on or off in the theme’s control panel.

    In the file register-admin-options.php find the code that matches and add the following directly under (i have used Pinterest for this example):

    $avia_elements[] = array(

    “name” => “Pinterest”,

    “desc” => “Enter your Pinterest link. If you leave this blank the Pinterest link in the head / footer of your site wont be displayed.”,

    “id” => “Pinterest”,

    “slug” => “avia”,

    “std” => “”,

    “type” => “text”);

    In the file footer.php find the code that matches and add the following directly under:

    if($Pinterest = avia_get_option(‘Pinterest’)) { $social ++; echo “<li class=’Pinterest’>“; }

    In the file layout.css find the code that matches and add the following directly under:

    .social_bookmarks .Pinterest a{background: transparent url(../images/layout/icon-pinterest.png) 0 0 no-repeat;}

    Hope this helps!

    Best, A.

    #100302

    Hi!

    Thanks for the tutorial :)

    Regards,

    Peter

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

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