Docs

[Shanahandy]

Hi! I have the newest version of X and Cornerstone and have been searching for answers that work (to no avail). I tried to add CSS in settings but that didn’t work either. Here is what I need help with pretty please:

1. I’d like to put links in the top bar on the left along with the social icons that appear.

2. I’d like to be able to change size, color of links & icons in topbar and also shapes/images of social icons.

3. How can I change the color of the footer? Is there a way to only just have a copyright line at the very bottom of site?

The url to the site (beginning stages) is http://www.florabellafarmgirl.com

Thanks SO much :)) Shana

[Jade]

HI Shana,

There is a coming soon page active on your site. Kindly provide us with the admin details so that we can check it further.

Thank you.

[Shanahandy]

This reply has been marked as private.

[Joao]

Hi There,

1 If you are referring to your social Icons add the following code to Appereance > Customizer > Custom > CSS

.x-topbar .x-social-global {
     float: left;
}

2- Please follow this thread:

https://community.theme.co/forums/topic/change-social-media-icons-for-style/

3- I dont see any footer there, you can add content to the footer by going to Appereance > Customizer > Footer

Let us know if you need further help

Joao

[Shanahandy]

Hi!

1. No, I meant I’d like to keep the social icons on the right but add links on the left. Not sure how to add links?

2. I know how to turn on the footer.. just not sure how to change it’s color?

3. What if I don’t want that footer… if I only want a simple copyright line at the very bottom of every page?

Thanks SO much!!

[Rad]

Hi there,

1. Ah, then what you need is just adding links to top bar content since social icons are already positioned to right. You can add something like this

<a href="http://example.com/1/>Example Link 1</a> | <a href="http://example.com/3/>Example Link 2</a> | <a href="http://example.com/3/>Example Link 3</a>

Then just change the URL and text according to your preference.

2. You can change its color by adding this custom CSS to your customizer’s custom CSS with your preferred color.

Footer’s links

.x-colophon a {
color: #333;
}
.x-colophon a:hover {
color: #000;
}

Footer’s social color

.x-colophon.bottom .x-social-global a {
color: #333;
}
.x-colophon.bottom .x-social-global a:hover {
color: #000;
}

3. What part of the footer do you wish to hide or remove? You may add this CSS too.

.x-colophon.bottom .x-nav, .x-colophon.bottom .x-social-global {
display: none;
}

Then simply add your footer content.

Hope this helps.

[Shanahandy]

Hi! #1 Okay I tried that but it still doesn’t make links… I”m not sure what I’m doing wrong? Thanks!

[Thai]

Hi There,

It should be fine now. There was a syntax error in the topbar content.

Regards!

[Shanahandy]

Thanks! Okay I’m still trying to figure out how to change the images (regular and hover) for the social icons at the top. I read through other threads but the situations seemed a bit different so I”m just not sure? Also how can I change the size of the links on the left and the social icons (the entire top bar)? Thank you SO much!!

[Jade]

Hi Shana,

I am not so sure what you mean by changing the image in the topbar on hover. Are you referring to the social icons?

As for the size, you can use this code:

.x-topbar .p-info a {
    font-size: 12px;
}

.x-topbar .x-social-global a i {
    font-size: 22px;
}

Hope this helps.

[Shanahandy]

Thanks I do mean the social icon images – how do I change those and also the ones on hover (social icons)? Thanks! Oh and about the above code… does that go in custom CSS in customizer?

[Rahul]

Hey There,

Please add it to Appereance > Customizer > Custom > CSS

[Shanahandy]

thanks and how do i change the social icon images (also the hover social icon images)? 🙂

[Joao]

Hi There,

Please follow this thread:

https://community.theme.co/forums/topic/custom-social-media-icons/

Hope that helps,

Joao

[Shanahandy]

Hi Joao, I’m so sorry but what is the CSS selector? Where do I go to change that css? thanks…

this is from that thread:

“You can change it by getting the CSS selector using inspect element -> http://theme.co/x/member/kb/css-class-index/

and change the “content” property”

I’m so confused ? 🙂

[Author]

Posts