Change button colour

[amateurhour]

Hi community,

I would like to change the colour of my buttons. They are currently a teal blue, but when I go into my coding (teal variables section), "button", "hoverButton" and "activeButton" are all grey colours. So I'm not sure why they are showing up teal. Can anyone help? 

@background: #ffffff;

@footer: #f9f9f9;

@font: #8e8e8e;

@emphasized: #484848;

@aHover: #8dc7d3;

@navHover: #484848;

@navBackgroundHover: #f6f6f6;

@subnavHover: #484848;

@subnavBackgroundHover: #e8e8e8;

@landingLink: #8dc7d3;

@line: #d0d0d0;

@button: #484848;

@hoverButton: #616161;

@activeButton: #303030;

@highlight: #5199a8;

@hoverHighlight: #5cb0c2;

@activeHighlight: #44818e;

[KreatMarjan]

Hi

Please post the link of your site. None of that colors is ''Teal'' which uses #008080.

Thanks,

bye .

[MJCS]

Hi @amateurhour,

try adding this CSS to your Settings>SEO>Header Code:

<style>
.wsite-button, .wsite-button .wsite-button-inner, .wsite-editor .wsite-button, .wsite-editor .wsite-button .wsite-button-inner {
color: white;
background-color: red !important;
}
</style>

You've got various types of buttons across your site. I think I've got them all covered with the rules above so if you add that it should be universal across the site which is what I understand you're trying to achieve. I've made them red so they'll stand out, obviously you can change them to whatever color you want.

Let me know how you go.

Cheers, Mark

[amateurhour]

Hi Mark, 

Thanks - that worked a treat. I have one other issue I'm hoping you could help me with.

Within my theme's Design Options there is the ability to change link colours (under Theme > Change Fonts > General > Links), which I have done and set to black. But this has only worked for some links, others are staying a teal colour. I will add a few photos as examples. It seems so far to be during checkout (item name, add a coupon code, continue shopping), and when you try to checkout with nothing in the cart ("Continue Shopping" text) and on the "Read More" links on my blog (labelled "journal"). This teal colour also shows up as a box outline around item options when looking at a product page (eg size quantity, see first photo as example). I would like this black too. 

Thanks for any help you can give. 

[MJCS]

Hi @amateurhour,

this should cover everything you've mentioned above:

.wsite-com-product-option select:focus {
    border-color: red !important;
}

.js-add-coupon-btn a {
	color: red !important;
}

.wsite-checkout-actions__link {
	color: red !important;
}

.wsite-checkout-cart-details__title a {
	color: red !important;
}

.blog-read-more a {
    color: red !important;
}

Once again pop it inbetween the <style> </style> tags of your Settings>SEO>Header Code.

Best of luck.

Cheers, Mark

[amateurhour]

Hi Mark,

Thanks for your help. That has only partially worked. With regards to the teal border it worked for the product options but not for the quantity of items box. It worked for most of the checkout process but not the "add a coupon" text. 

And now I have found more spots on the site, such as the "Edit" links during the secure checkout after the personal details have been entered. 

Is there a more permenant way of fixing the issue and ensuring it applies to ALL links rather than going through one by one and hopping I spot them all? As I can't proceed through my checkout and make a purchase without paying weebly a commission, i haven't been able to test the whole consumer journey of my site, and I imagine there are further teal links in the next steps. 

What are my options?

Thanks for your help.

[Agustin1]

Hello,

I'm trying to change the color and texture of the buttons; however, it also changes the menu icons. This is the code I enter in Theme, Edit HTML/CSS, main.less

.wsite-button .wsite-button-inner,

.wsite-editor .wsite-button .wsite-button-inner {

  height: auto;

  padding: 8px 12px;

  background: #fbb730;

  color: #000000;

  border: 2px solid #fbb730;

  .wsite-button:hover .wsite-button-inner {

  background: #bbbbbb;

  color: #333333;

  border: 2px solid #bbbbbb;

}

Can you help? Thanks

[Adam7]

The CSS you pasted is broken and missing a closing "}". It should look more like this:

.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner {
  height: auto;
  padding: 8px 12px;
  background: #fbb730;
  color: #000000;
  border: 2px solid #fbb730;
}
  .wsite-button:hover .wsite-button-inner {
  background: #bbbbbb;
  color: #333333;
  border: 2px solid #bbbbbb;
}

[gsander]

I was trying to accomplish the same thing. My buttons were grey. When I made the change as suggested, it made the background of my text the new color but the overall button stayed grey. How can i change the whole button? 

[Adam7]

Can you post a link to the page of your site where you added this, @gsander?

[gsander]

This is the code I added in SEO Header:

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

This is the result:

mindteckacademyus.weebly.com

[Adam7]

Try moving the code to Settings > SEO > Footer Code and re-publishing. I think there's some later code that is overriding part of it, and that should put it further down in the waterfall of CSS rules.

[gsander]

That worked, thanks...

[gsander]

Woops, it almost worked. It worked on all buttons but the one on my contact form. That one still just has the text background changed but not the whole button. I tried inserting that same code in both the header and footer sections of that page, also tried inserting said code in the form right befor the button. No change.

https://mindteckacademyus.weebly.com/more-info.html

[MTpockets2]

Hi @gsander,

Looks like you have some code under Theme > Edit HTML / CSS thats causing the background to be white because you have !important tag on it. 

That needs to be deleted first. 

[stayleanwithire]

this is great! thank you so much!!!! any chance you also know how to make the size of the button bigger?

[MB13]

Hi your answer is amazing!!

How could I also change the font color and the border or the button?