Change style of all buttons

  • Resolved povertywarrior

    (@povertywarrior)


    10 years, 11 months ago

    Hi,

    Is there a way to change the style of ALL the buttons in customizr at once? i.e. search buttons, ‘read more’ buttons, ‘call to action’ buttons, ‘submit’ buttons.

    I would like to change it to a flat style…i.e square shape (nil radius) with no gradient (solid colour).

    Is this possible?

    Any help would be greatly appreciated!

    my (unfinished website) is https://www.locumphysios.com, I have hidden most buttons and the slider because of this issue.

    Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Read this:
    https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

    Then you will see, for example, that your “Search button” is styled something like that:

    input[type="submit"] {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #363636;
background-image: -moz-linear-gradient(top, #444444, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
background-image: -webkit-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(top, #444444, #222222);
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 black;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

    You have just to create a rule in your child theme style.css or your custom css which overrides properties you want to get rid of.Something like that should work:

    input[type="submit"] {
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
background-image: none;
background-repeat: no-repeat;
filter: none;
}

    Thread Starter povertywarrior

    (@povertywarrior)

    d4z_c0nf = LEGEND!!!

    Thankyou, I copied the code, used firebug to sort the other buttons out…took a bit of fiddeling, but that’s the best way to learn. Thanks for the great lesson. I’ve seen you pop up heaps of times on other threads and you’ve always had the answers. Great work mate. Good karma is coming your way!

    Cheers

    Thread Starter povertywarrior

    (@povertywarrior)

    Resolved ??

    Thank you @povertywarrior .
    ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change style of all buttons’ is closed to new replies.