Adding Social Media icons inside a Child Theme (Propulsion) « Support Forum | Kriesi.at

Support Forum » Propulsion

Adding Social Media icons inside a Child Theme (Propulsion)

5 posts from 3 voices

Started 9 months ago by designjunkies
Latest reply from Devin
This topic is not a support question

Tags:

designjunkies
Member

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!

Posted 9 months ago #
danielsami
Member

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

Posted 9 months ago #
Devin
Moderator

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

Posted 9 months ago #
designjunkies
Member

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

Posted 8 months ago #
Devin
Moderator
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
Posted 8 months ago #