Skip to main content

How do I remove the gradient from all buttons in my nation?

That is, we want to make the buttons matte, no gradient.

I tried to change theme.css by customizing fancy-buttons (below) but I can't seem to get rid of the gradient.

.submit-button, .submit_link a {
@include fancy-button-structure(14px, 3px, 1px);
@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));
&:hover { text-decoration: none; color: white; } }

.submit-button-huge, .submit_link_huge a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }

Am I going about this the wrong way?

Official response from

Hey Em,

The easiest way to do it is to just create a new css class and apply that to your buttons.

If you'd like to modify the existing .scss, you can do that as well. Mainly, you'll want to remove the 'background-image', which is what is laying in the gradient. Remember that whenever you are customizing existing theme elements, you are replacing the styles (or overwriting them) in order to change them, in your "Current" theme.scss sheet. 

adding:
background-image: none;

To the button classes should work, but keep in mind that it will need to go on both the normal and hover classes associated with each button type.

So:

.submit-button-huge, .submit_link_huge a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));
width: 100%;
background-image: none;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }

If you also want to change the button color, you can remove:

@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));

and replace it with a simple:

color: $theme_color_1;

 

You can read more about theme customization here

Share this post

Showing 3 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.