[halfiranianParticipant]

Hello,

Here’s my link: http://playxtest.wpengine.com/

Other web-design platforms make this super simple but I don’t know why I can’t figure out how to add links to social icons in x-theme. I inserted the social icons myself, they are not part of header/footer. I am working in cornerstone. If I have to add stuff like I’ve seen in other forum posts, PLEASE tell me where I am supposed to be inserting these codes.

Any help would be much appreciated.

[halfiranianParticipant]

Hello again!

So I figured this out but I would like to ask your help with making the link open in a new tab.

Here’s the code that I put into a text element:

<a href="https://www.facebook.com/TheSyriaCampaign/?fref=ts">[icon type="facebook-square" style="color: #ffffff"]</a> <a href="https://twitter.com/TheSyriaCmpgn?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">[icon type="twitter-square" style="color: #ffffff"]</a>

[RupokMember]

Hi there,

Thanks for updating. To open this to new tab, you just only need to add target="_blank" attribute. Like :

<a href="https://www.facebook.com/TheSyriaCampaign/?fref=ts" target="_blank">[icon type="facebook-square" style="color: #ffffff"]</a> <a href="https://twitter.com/TheSyriaCmpgn?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank">[icon type="twitter-square" style="color: #ffffff"]</a>

Hope this helps.

Cheers!

[halfiranianParticipant]

Thank you!

The client is now requesting to have social SHARE icons with a counter like on this page:
https://www.whitehelmets.org/

Can you please advise me on how to achieve that? They need to share the site, not link to their social.

[LelyModerator]

Hi There,

You’re welcome!
We have entry share shortcode to share the site. Although, what you want to achieve based on your example is possible using a plugin. The site above is using Facebook Social Plugin.

Hope this helps.

[halfiranianParticipant]

Thank you!

I used a plugin. Website is done but for some reason there is a weird band showing up at the very bottom of the website, looks like the top of an image and I can’t click on it or figure out where it’s coming from.

Can you please help me with this?

[RupokMember]

Hi there,

Thanks for updating. You have set the grey background as site background. However you can add this under Custom > CSS in the Customizer.

.site {
  margin-bottom: -31px;
}

Hope this helps.

Cheers!

[halfiranianParticipant]

Great! Thanks so much.

Regarding the social shares, I used a plugin called Shareaholic and I inserted the shortcode in a text element. Works well, but I cannot figure out how to resize the set of icons for mobile only.

[Rue NelModerator]

Hello There,

Thanks for updates! It sounds like you might be having an issue with a third party plugin, Shareaholic. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[halfiranianParticipant]

Sure no problem. I would prefer not to use plugins for this, but with the social share element in Cornerstone, I am stuck with only one type of icon look. For example I cannot have “tweet” next to the Twitter icon or “share” next to the Facebook icon, or the social share counter (like what I have now).

[ZeshanMember]

Hi there,

Thanks for updating the thread!

It’s not possible as of now to show text next to the X social sharing icons. However, I’ll consider it a featured request and will forward to our development team. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thank you!

[halfiranianParticipant]

Appreciate it.

I have a question regarding the “hide based on screen width” option. This option appears only when I select a row. Is it possible to hide a specific column?

So for example in my first section, My top row has two columns. I want to hide the left column only (containing social share icons) for mobile only.

[Paul RModerator]

Hi,

You can use these classes to hide an element in cornerstone.

Classes:

x-hide-xl – Extra Large | 1200px & Up
x-hide-lg – Large | 980px – 1199px
x-hide-md – Medium | 768px – 979px
x-hide-sm – Small | 481px – 767px
x-hide-xs – Extra Small | 480px & Smaller

So to hide your left column in mobile, you can add x-hide-sm in the class field of that column.

Hope that helps.

[halfiranianParticipant]

Great thank you.

I noticed that when I have the 2 columns in the first row, on mobile, the left column pushes the right column down. Any way to stop that and keep them both aligned horizontally?

[Rue NelModerator]

Hello Again,

We have designed the columns responsive which is why on desktop it is inline or it will be on left and right columns and on mobile it will display as stacked or on top on each other. To prevent that from happening, you will need to add a custom class to your section so that you can easily target it. For example, you insert a custom always-in-line class in your section setiings and you will the following custom css in the settings tab, Settings > Custom CSS

.always-in-line .x-column.x-1.2 {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.always-in-line .x-column.last, 
.always-in-line .x-column:last-of-type {
    margin-right: 0;
}

Hope this helps. Kindly let us know.

[Author]

Posts