Buttons, buttons, buttons!

  • If there is one thing I hate more than trying to figure out button styles in wordpress since 2010 even with a child theme its…. there is nothing! Twenty sixteen is no different if not worse! Other than this so far, its been great.

    As stated above I’m using a child theme. Please help me get control of the button colors. What do I need in my child theme style sheet to tell these buttons what I want them to do? I have tried everything and it only wants to inherit. Background color, text color, hover, etc.

    Thanks!

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

  • Which button? We have form buttons, radio buttons, link buttons, etc.; it’s even possible to have custom buttons with their own classes.

    It’s best if you create a page on your site with all the buttons that you want to customize and link us there. We can provide better help if we can see what you want to change.

    If there is one thing I hate more than trying to figure out button styles in wordpress since 2010 even with a child theme its…. there is nothing! Twenty sixteen is no different if not worse!

    Also, WordPress or not, styling are just CSS. It’s the same everywhere, no matter what theme or software you use. Same deal. 2000 different themes? The rules of CSS still doesn’t change.

    K H

    (@katinkaspirituality)

    I had the same problem. I solved it in part with the following CSS:

    .widget_calendar tbody a,
    .customize-support button,
    .customize-support button[disabled]:focus,
    .customize-support input[type=”button”],
    .customize-support input[type=”button”][disabled]:focus,
    .customize-support input[type=”reset”],
    .customize-support input[type=”reset”][disabled]:focus,
    .customize-support input[type=”submit”],
    .customize-support input[type=”submit”][disabled]:focus,
    .customize-support .menu-toggle.toggled-on,
    .customize-support .menu-toggle.toggled-on:focus,
    .customize-support .pagination:before,
    .customize-support .pagination:after,
    .customize-support .pagination .prev,
    .customize-support .pagination .next,
    .customize-support .page-links a
    {
    background-color: #6d3b48; color:#efddc9 };
    }
    .customize-support button:hover,
    .customize-support button:focus,
    .customize-support input[type=”button”]:hover,
    .customize-support input[type=”button”]:focus,
    .customize-support input[type=”reset”]:hover,
    .customize-support input[type=”reset”]:focus,
    .customize-support input[type=”submit”]:hover,
    .customize-support input[type=”submit”]:focus,
    .customize-support .page-links a:hover,
    .customize-support .page-links a:focus,
    .customize-support .pagination .nav-links .prev:hover,
    .customize-support .pagination .nav-links .prev:focus,
    .customize-support .pagination .nav-links .next:hover,
    .customize-support .pagination .nav-links .next:focus,
    .customize-support button[disabled]:hover,
    .customize-support input[type=”button”][disabled]:hover,
    .customize-support input[type=”reset”][disabled]:hover,
    .customize-support input[type=”submit”][disabled]:hover,
    .customize-support .menu-toggle.toggled-on:hover,
    .customize-support .widget_calendar tbody a:hover,
    .customize-support .widget_calendar tbody a:focus,
    .customize-support .page-links a:hover,
    .customize-support .page-links a:focus
    {
    background: #2a3691; color:#efddc9;
    }

    That fixes the main buttons, at least for me. It’s probably more code than is necessary, but it works.

    K H

    (@katinkaspirituality)

    What I haven’t figured out is the selector for the hover over the ‘previous’ and ‘next’ arrows on the main blog-page. See at the bottom of https://www.allconsidering.com/ for instance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Buttons, buttons, buttons!’ is closed to new replies.