[LedZappaParticipant]

I would like to change the what the social icons to something custom or at least larger and have control over their colors independent of other theme settings if possible. Are there plugins available that can replace that part of the theme?

I am using Icon2 and my site is currently at http://visteka.com

Thanks,
Shawn

[RadModerator]

Hi there,

Thanks for posting in.

Are you referring to have different social feature at your footer other than the default X social?

Sure, add this code at your child theme’s functions.php and add your own social code.

if ( ! function_exists( 'x_social_global' ) ) :
function x_social_global() { ?>

<!--REPLACE THIS WITH YOUR SOCIAL CODE, COULD BE FROM THE PLUGIN-->
    
<?php }

endif;

Cheers!

[LedZappaParticipant]

Man, my English was bad last night.

That looks a bit more complicated than I was hoping for, but if I go that route, would that affect the header and footer and then I can choose which show up in the Customizer as I do now or do I disable the view in Customizer and the code takes over? Looks like I have some reading to do on Child Themes, which I’ve been meaning to do anyways.

I was really hoping there was something I was missing or a plugin that could be added and I was just using the wrong search terms when researching.

Being able to change the size and colors (main/rollover) of the default icons if not the icons themselves in the customizer would be a nice addition to the theme IMO.

[MrinalMember]

Hi Shawn,

I want know what’s your requirement exactly? 🙂 We can’t add/blend or support other plugins, for many reasons. However we stand here to help you about X by any means.

Please let me know how you’d like to customize the icons. Custom CSS are really help to target specific element & customize as you need. May I know your requirements in detail please?

[LedZappaParticipant]

What I mean is that the same way you can add your own logo to the header theme in the Customizer section I would like to be able to change the icons/images that your theme uses for Facebook, Twitter etc… instead of use the defaults. Like I can change the colors, static/rollover, of buttons in the Customizer I would like to be able to do that with the social icons. And if I can’t change the social images I would at least like to be able to make them larger. This is more of a future request for the themes as a whole. I viewed all available stacks and versions and it seems you use the same social icons across the board, though I did see some were green and some were black. I assumed that was stack or stack/version specific.

Ultimately I would like to be able to have a top right header like this site where I can add social(s), phone and email for example. http://www.vncsolutions.com/

Like I said, I thought it would be easier or a plugin. After I do more reading and decide on something specific I will revisit the question I guess.

[Nabeel AModerator]

Hi there,

For social icons, please refer to this topic http://theme.co/x/member/forums/topic/renew-child-theme-adding-social-media-icons/#post-84093 this might help you as well.

You’ll need to enable the top bar via Appearance > Customize > Header > MISCELLANEOUS > Enable Topbar. If it’s already checked, just re-check it once. you’ll be able to display your content then.

Let us know how this goes!

[LedZappaParticipant]

Thanks, this worked well enough for now as you can see at http://visteka.com . I just changed the path to my images. The 25×25 image size restriction is unfortunate, but at least I have options now.

I can’t find a way to lower it from the top of the page though and I’d like to put more space between them as well. Now that the icons are larger they are too close to the top.

Also, I can’t subscribe to my own thread. It keeps reverting to unsubscribed. Not that you can help with that 🙂

.x-social-facebook:before {
content: url(http://icons.iconarchive.com/icons/yootheme/social-bookmark/24/social-facebook-box-white-icon.png);
}

.x-social-twitter:before {
content: url(http://icons.iconarchive.com/icons/fasticon/web-2/24/Twitter-icon.png);
}

[ChristianModerator]

Please add the code below in your Appearance > Customize > Custom > CSS.

.x-topbar .x-social-global {
margin-top: 5px;
}

About your subscription, I’ll forward this to our development team so they can check the problem.

Thanks.

[LedZappaParticipant]

Top margin worked as well. This will work for now. Thank you for all your help.

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Author]

Posts