[ProjektyleParticipant]

Hi X Team,

I am wondering if there are round x social icons available in your theme arsenal?
I found the following forum post to make the square icons round:
https://community.theme.co/forums/topic/how-to-make-social-icons-round/

But since this only addresses the shape and color of the background the actual square shape of the icons is still visible within the background colored round area.

Instead of the “x-icon-facebook-square” is there a round version?
Or do you have another suggestion?

Thank you for your response in advance!

[DarshanaModerator]

Hi there,

Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[ProjektyleParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please add following code under child theme’s style.css file :

.x-icon-facebook-square:before {
    content: "\f09a";
}
.x-icon-twitter-square:before {
    content: "\f099";
}
.x-icon-pinterest-square:before {
    content: "\f231";
}
.x-topbar .x-social-global a {
    margin-left: 8px;
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    line-height: 54px;
    font-size: 17px;
    display: inline-block;
    text-align: center;
    color: #fff; 
    background-color: red;
    border-radius: 100em;
}
.x-social-global a:hover.facebook {
    background-color: #3b5998;
}
.x-social-global a:hover.twitter {
    background-color: #3b5998;
}
.x-social-global a:hover.instargam {
    background-color: #3b5998;
}
.x-social-global a:hover.pintrest {
    background-color: #3b5998;
}

Hope it helps.

[ProjektyleParticipant]

Yes, thanks so much!!

On a different subject:
While I am here I wanted to bring up a concern I’ve been meaning to write in about.
On the same website I am using the [dropcap] shortcode on every post for the first letter in each article.
Unfortunately this causes for that marked up letter to disappear completely in the archives pages. It seems like an issue that should be fixed overall for the X Theme. Maybe you have a way for me to fix it on the website right away?

Thanks again!

[RupokMember]

Hi there,

Would you point us where you are using the dropcap?

Cheers!

[ProjektyleParticipant]

On every post.
Here is one: http://hamptonsbeachouse.com/features/fixing-it-edwina-von-gal/

[Rue NelModerator]

Hello There,

Please update the given css code and use this instead:

.x-icon-facebook-square:before {
    content: "\f09a";
}
.x-icon-twitter-square:before {
    content: "\f099";
}
.x-icon-pinterest-square:before {
    content: "\f231";
}

.x-social-global a {
    margin-left: 8px;
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    line-height: 54px;
    font-size: 17px;
    display: inline-block;
    text-align: center;
    color: #fff; 
    background-color: red;
    border-radius: 100em;
}
.x-social-global a:hover.facebook {
    background-color: #3b5998;
}
.x-social-global a:hover.twitter {
    background-color: #3b5998;
}
.x-social-global a:hover.instargam {
    background-color: #3b5998;
}
.x-social-global a:hover.pintrest {
    background-color: #3b5998;
}

Hope this helps.

[ProjektyleParticipant]

Hi, sorry, not sure what the above was regarding. I was just asking about the dropcap shortcode and a marked up letter with such missing in the archives pages.
Here again.
The dropcaps are added to each post, for instance:
http://hamptonsbeachouse.com/features/fixing-it-edwina-von-gal/

Then those letters diappear on archives pages.
This seems to be an issue that should be fixed throughout the x theme. I was wondering if you have an immediate fix for it.

[JadeModerator]

Hi there,

I have checked the pages of your site but I can’t seem to find the specific pages that are having the issue that you are describing.

Would you mind providing us with the direct link to the page so that we could check it?

Thank you.

[ProjektyleParticipant]

I did above, twice, not sure what’s going on.
http://hamptonsbeachouse.com/features/fixing-it-edwina-von-gal/

[RadModerator]

Hi there,

It’s because archive pages will only display excerpts. And excerpts are just plain text, WordPress will remove any HTML code, shortcode, or any content that doesn’t count as plain text.

You can also add excerpt manually, you can go to Screen Options on the very top of the post you’re editing. Then enable excerpt, scroll down until you find excerpt section where you can add text manually.

Thanks!

[ProjektyleParticipant]

Thank you so much!!! Makes sense.

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts