Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #19672

    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)

    #104529

    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

    #104530

    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!

    #104531

    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

    #104532

    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

    #104533

    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

    #104534

    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

    #104535

    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.

    #104536

    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???

    #104537

    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

    #104538

    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

    #104539

    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!!!

    #104540

    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

    #104541

    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

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

The topic ‘Adding Social Media icon to Replete Theme’ is closed to new replies.