x

How do I change the social icon color? How do I change footer button style?

Two questions regarding my footer:

Everything on my website is black and white, but the footer.

1) Social icon color: They are grey for some reason, and I want them to be black. How?

2) The button: I would like the inverse, where it is just outlined in black instead of the whole thing being black. When I click "Button" under form options for my newsletter form, there is no option to change the look of the button. 

image

15,004 Views
Message 1 of 25
Report
1 Best Answer

Best Answer

Try using this in Settings > SEO > Header Code:

<style>
.wsite-social .wsite-social-item {
color: #000000 !important;
}

.wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner {
background:#fff !important;
color:#000 !important;
}

.wsite-button .wsite-button-inner:hover, .wsite-editor .wsite-button .wsite-button-inner:hover {
background:#000 !important;
color:#fff !important;
}
</style>

View Best Answer >

14,950 Views
Message 9 of 25
Report
24 REPLIES 24
Square

Are you familiar with HTML and CSS, @bear? You can probably change both of those through CSS customizations. To customize your theme, go to the Theme tab and click on Edit HTML / CSS.

14,083 Views
Message 2 of 25
Report

I know what they are, but have no experience with them. Can someone walk me through it?

14,076 Views
Message 3 of 25
Report

Anyone?

14,069 Views
Message 4 of 25
Report
Square

Is your site live, @bear? It'll help our Community members to see the live site, I think.

14,063 Views
Message 5 of 25
Report

Smiley Happy

14,056 Views
Message 6 of 25
Report

Can anyone help?

14,044 Views
Message 7 of 25
Report

Can someone help please?

14,038 Views
Message 8 of 25
Report

Best Answer

Try using this in Settings > SEO > Header Code:

<style>
.wsite-social .wsite-social-item {
color: #000000 !important;
}

.wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner {
background:#fff !important;
color:#000 !important;
}

.wsite-button .wsite-button-inner:hover, .wsite-editor .wsite-button .wsite-button-inner:hover {
background:#000 !important;
color:#fff !important;
}
</style>
14,951 Views
Message 9 of 25
Report

Do I copy and paste this, or change the code to look like that
14,015 Views
Message 10 of 25
Report
Square

I'm pretty sure you can copy and paste that code into the Header Code field like @BJ mentioned.

14,111 Views
Message 11 of 25
Report

It worked!

14,103 Views
Message 12 of 25
Report

Thanks!!!

14,101 Views
Message 13 of 25
Report
Square

Glad to see someone had a solution for you!

14,093 Views
Message 14 of 25
Report

13,957 Views
Message 15 of 25
Report

Hi there! Appreciated this code, as it helped me too! I'm also trying to change the size of the social icons in my footer. Any advice? Site: www.BodmerFamilyFootcare.com

Thank you!!

14,022 Views
Message 16 of 25
Report
Square

Those look like regular image elements, @freebirdpaperie. If you have the original images still you could probably change the color of them with an image editing program.

14,019 Views
Message 17 of 25
Report

I ended up creating my own icons in Adobe Illustrator so I could entirely customize their color and size. Smiley Happy
14,016 Views
Message 18 of 25
Report
Square

Ahh - definitely a solid solution. Smiley Happy

14,015 Views
Message 19 of 25
Report

@Adam

Question:  Why do my social icons not show in my subcatagory pages?  I have updatd the color to what it should be, it only highlights on hoover in the editor, but on the live site it's not even a clickable image, not even when you hoover over the area. 

12,900 Views
Message 22 of 25
Report
Square

Hi @HeartcraftPaper Can you please post a link to your site so we can take a look? Thanks so much!

6,699 Views
Message 22 of 25
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.