Adding Social Media icon to Replete Theme « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Replete

not resolved

Adding Social Media icon to Replete Theme

14 posts from 5 voices

Started 3 months ago by luvhood
Latest reply from Ismael
This topic is not resolved

Tags:

luvhood
Member

can you please tell me how to add more social media icons/links to Replete? would like to add Instagram. thanks

(Edit Nick: The answer can be found here http://www.kriesi.at/support/topic/adding-social-media-icon-to-replete-theme#post-94853)

Posted 3 months ago #
Devin
Moderator
Hi luvhood,

First add the following to your Quick CSS or custom.css replacing the generic name with your new icon name:
```
.social_bookmarks_socialiconname a{	background: transparent url(../images/icons/icon-socialiconname.png) 	  center 0px  no-repeat;}
```
Then, add the icon for your new social icon in to the themes images>icons folder and name it icon-socialiconname.png (replacing the generic name with whatever you are adding.)

Now the theme knows what to do with an icon selection of this choice so you need to add it as a selectable option in the theme options. Open up includes>admin>register-admin-options.php and loop for:
```
'Behance' 	=> 'behance',
'Dribbble' 	=> 'dribbble',
'Facebook' 	=> 'facebook',
```
To the top of that array you'll add your new icon like this:
```
'SocialIconName' => 'socialiconname',
'Behance' 	=> 'behance',
'Dribbble' 	=> 'dribbble',
'Facebook' 	=> 'facebook',
```
Save the file back on your server and you should now be able to select it, add the URL and the icon you added in with the css will show up for it.

If it doesn't make sure you have used the same exact name in the css as you have in the new item in the array.

Regards,

Devin
Posted 3 months ago #
luvhood
Member

thanks for that info. we were able to do all of that except edit "custom.css". The only CSS I seem to have access to edit is "style.css", but that's not working. How do we get into custom.css? It's saying we're not allowed to edit that when I try to open it on a text editor from the FT, and it does not come up as an option to edit on the Wordpress Appearance dashboard.

Thanks!

Posted 3 months ago #
Ismael
Moderator

Hi,

You need to check the file permission for your custom.css. Login to your cpanel and check the file permission for custom.css.

Regards,
Ismael

Posted 3 months ago #
Nick
Moderator

Hi,

You need to install a better wordpress editor plugin. The reason you can't edit via ftp is that your ftp user is not a member of your wordpress group probably which is normally done for security... only the other way around. So that if someone breaks into your wordpress they wont be able to install anything without knowing your ftp password too. Contact your host and tell them to add you to the group, because someone made a mistake with permissions.

But in any case, you can install either http://wordpress.org/extend/plugins/wp-editor/ or http://wordpress.org/extend/plugins/advanced-code-editor/ plugin, and in Admin just go where you would normally edit files, and one of the two (sorry i forget which one) actually shows a folder structure and lets you create folders as well ... so you can navigate to the css folder and open custom.css. Wordpress editor is strange and I dont know how it decides which files to show.

However, You can also just drop your css into Quick CSS located in the admin area Replete > Theme Options > Styling ... the text area on the bottom of the page. It will get injected right into the page but before custom.css (which is ok since yours is empty anyways)

Thanks,

Nick

Posted 3 months ago #
luvhood
Member

Ok, we finally got the icon for instagram to show on the side of the site with the others BUT, it does not show the icon unless you hover over it. if not, you only see the small gray box. Also, it does not change colors like the others when you do hover over it and it is not perfectly centered. hopefully the last questions on this!!!

much thanks

Posted 3 months ago #
Nick
Moderator
Hi,

1) Please delete the line you've added to style.css

2) Please delete (besides the line that was originally there on top) the content of your custom.css and replace them with
```
#top .social_bookmarks_instagram a {
	background:transparent url(http://www.luvhoodparis.com/wp-content/themes/replete/images/icons/icon-instagram.png) center 0px no-repeat;
}
#top .social_bookmarks_instagram:hover a,#top .social_bookmarks_instagram .css_3_hover {
	background-position:center -43px;
	background-color: #12a5f4;
}
```
3) Please change the class name where you made the edit Devin originally showed you, but keep in mind that everything is case sensative and you use some capital I and other small i. In places where you see Facebook capitalize, that's where you do it as well, otherwise

The problem you are having is that you are using inconsistent capitalization in case sensitive areas. So if you should be using small letter i in instagram in all locations except the one where the other social media services are also capitalized.

Thanks,

Nick
Posted 3 months ago #
luvhood
Member

OK, we now have the color working when hovering--it changes to Red. but I still cannot see the camera icon. I have confirmed that the capitalization is consistent with the other social media icons in all place.

Posted 3 months ago #
luvhood
Member

Ok so this is crazy. IF I select the Instagram icon in the THeme Options, what shows on the site is a gray box and the camera shows when hovering over it. IF i DESELECT the Instagram icon in the Theme Options, what shows is a gray box and it turns red when hovering. I don't see anything wrong with our settings, double and triple checked them. why can't the camera show on static page and then red when hovering???

Posted 3 months ago #
Ismael
Moderator

Hi,

Everything is OK except for the instagram icon you provided. Please download this file (http://www.mediafire.com/view/?gerybh3hg9hlybi) and replace the icon you have.

Regards,
Ismael

Posted 3 months ago #
Nick
Moderator
Hi,

Lets start from the beginning. You didn't insert the instagram in all the required places in the back-end most likely, and this is the problem..

Please replace everything, so we can be 100% sure we got it all.

1) CSS
```
#top .social_bookmarks_instagram a{ background: transparent url(../images/icons/icon-instagram.png) center 0px  no-repeat;}

#top .social_bookmarks_instagram:hover a, body .social_bookmarks_instagram .css_3_hover {background-position: center -43px ; background-color:#12a5f4; }
```
2) /includes/helper-social-media.php line 52 you add (no delete)
```
case 'instagram':
```
3) /includes/admin/register-admin-options.php line 90 you (don't delete line 90 just push one line down and paste it there
```
array('social_icon'=>'instagram', 'social_icon_link'=>'http://YOUR-INSTAGRAM-URL.com'),
```
Please remember to keep everything, everywhere in small letters including the instagram I in the file name. No capitals.

Thanks,

Nick
Posted 3 months ago #
luvhood
Member

Thanks, it works now. How do we get all social media links to open in a new tab/window rather than making the user leave the site? Thanks GUYS!!!

Posted 3 months ago #
Noahj
Member

Hey luvhood, good thread post as I was just thinking about how to add a new social icon.

However, to have your social icons in a new window has already been answered
@ http://www.kriesi.at/support/topic/social-media-icons-how-to-open-in-a-new-window

It is the second post down by Devin

Posted 3 months ago #
Ismael
Moderator

Hi luvhood,

Kindly open wp-content/themes/replete/includes/helper-social-media.php and find this line of code (line 63):
$html .= "<a href='".$icon['social_icon_link']."'>".ucfirst($icon['social_icon'])."</a>";
and replace it with:
$html .= "<a href='".$icon['social_icon_link']."' target='_blank'>".ucfirst($icon['social_icon'])."</a>";

Hope this helps. :)

Regards,
Ismael

Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top