Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16240

    Hi guys,

    I would like to add a couple of social media icons to the top of the template (pinterest,instagram)

    There is a fair amount of documentation on this issue in the forum, but not specifically inside a Child Theme of Propulsion.

    1. I have made a couple of icons and added them to the ‘images/layout’ folder.

    2. I have created a new child theme: (see code below)

    /*

    Theme Name: Propulsion Child

    Version: 2.0

    Description: Child theme for Propulsion.

    Author: Kriesi

    Author URI: http://www.kriesi.at

    Template: Propulsion

    */

    /*This is the code to add another icon to the top header for pinterest*/

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

    3. But this is where I get stuck, because next I need to add some code so it knows what URL to look for, and also does it need to sit under any other code: ie: .social_bookmarks

    My assumption is that it is something like this:

    /*This is the code to list the pinterest URL*/

    <li class=’pinterest’>“>/images/layout/icon-pinterest.png” />

    Also I understand that I need to ‘activate my child theme’ after this for it to function but the code to get the URL needs to be put somewhere and that’s where I am out of my depth.

    —- OR


    Do I just use the custom.css file. It tells me my child theme is broken as it says ‘The parent theme is missing. Please install the “Propulsion” parent theme.”

    I currently only have a stye.css and the screenshot. I assume I need some kinds of functions.css file?

    —- OR


    Do I just forget it and edit the layout etc pages in editor?

    Thanks heaps! Seems to be a cool theme!

    #90736

    Hello, I also want to add Social Media Icons (Facebook/Twitter) on top of Propulsion theme. Unlike #designjunkie, I did not create a child theme, just want to add them to the main theme.

    The current location (bottom of page) is hard to find, and my client is working on promoting his Facebook page.

    Thanks in advance for your help.

    Daniel

    #90737

    Hi designjunkies,

    You would need to create your own header.php file in your child theme and then copy over the entire themes header.php since this would be replacing that one. Then add the code to that one.

    As for the actual code, it depends on where and how you want to add in your own new icons.

    The easiest solution would probably be to add a new text block element to the top of your home pages dynamic template with a call to action for visitors to visit facebook. Then the rest of the site can just use the normal social header thats already included in the theme.

    Regards,

    Devin

    #90738

    Oh right… I have gone off using a custom child theme as I didn’t realise that I would have to duplicate whole pages in to my child theme folder to customise them.

    Is there any way to add the social media icons by adding it to the custom.css file (where I have been putting my custom code which works fine)


    OR


    can I just hack the code on one of the other Social Media icons that I wouldnt use like the dribbble one?

    Cheers

    #90739

    Sure thing! Since the Propulsion icons are handled via css, you would just need to change the css for the dribbble icon and modify the link a bit.

    Alternatively, since you’ll be in the same spot, you could just add your own icon instead of modifying the other one. In your theme files, start in footer.php and look for:

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

    Change it to your values modifying like this:

    if($dribbble = avia_get_option('dribbble')) echo "<li class='newclass'><a href='http://socialurlhere.com/".$dribbble."'>".__('Follow us on socialsitename', 'avia_framework')."</a></li>";

    Then, you’ll need to do the same thing in functions.php which is where the social icons displayed in the header get created.

    To create a new social icon entry, insert it after the rss li class using this template:

    <li class='newclass'><a href="http://yoursocialsite.com"><?php _e('Visit this social site', 'avia_framework')?></a></li>

    Either way you’ll also need to add in your new social icon css:

    .social_bookmarks .newclass a {
    background: transparent url(yourimagelocation/image.jpg) 0 0 no-repeat;
    }

    Regards,

    Devin

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

The topic ‘Adding Social Media icons inside a Child Theme (Propulsion)’ is closed to new replies.