WordPress.org

Support

Support » Themes and Templates » Change Button Colors

Change Button Colors

  • Hi – is it possible to change the drop down menu color and the feature Read More button colors?

    I love your orange and blue skins and would love to combine them a bit. Currently I have it set to blue and thought bringing in a pop of orange on the read more buttons and the drop down menu button (when window is shrunk) would be perfect.

    Thanks! 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • rdellconsulting
    Participant

    @rdellconsulting

    1) See http://www.themesandco.com/snippet/change-logo-social-icons-tagline-navbar-header/ Navbar/Menu Section #21-25

    2) Change the color of the Featured Pages Buttons:

    /* Change Featured Pages Button color */
    .btn.btn-primary.fp-button {
    background-color: #FF0000;
    background-image: linear-gradient(to bottom, #FF0000, #0000FF);
    }

    hm, neither seems to be working. I was hoping the box with the three lines in it (menu icon) would change to orange and the Read more buttons would change to orange.

    i did your number 2 instructions and used #f26b41 with no luck

    rdellconsulting
    Participant

    @rdellconsulting

    3-bar button:

    /* Change 3-bar Button color */
    .navbar .btn-navbar {
        background-color: #f26b41;
        background-image: linear-gradient(to bottom, #f26b41, #f26b41);
    }

    Read More:

    /* Change Featured Pages Button color */
    .btn.btn-primary.fp-button {
    background-color: #f26b41;
    background-image: linear-gradient(to bottom, #f26b41, #f26b41);
    }

    Thanks! check it out now http://www.ispeakdogtraining.com – it only does it halfway hehe

    rdellconsulting
    Participant

    @rdellconsulting

    You’re such a perfectionist, woof 😉

    /* Change 3-bar Button color  */
    .navbar .btn-navbar,
    .navbar .btn-navbar:hover,
    .navbar .btn-navbar:focus,
    .navbar .btn-navbar:active,
    .navbar .btn-navbar.active,
    .navbar .btn-navbar.disabled,
    .navbar .btn-navbar[disabled] {
        background-color: #f26b41;
        background-image: linear-gradient(to bottom, #f26b41, #f26b41);
    }

    perfectionist is a nice way to put it 🙂 Looks PERFECT on my phone, but the Read More buttons on my computer are blue and fill halfway with orange upon rollover. I’m using Safari, perhaps that’s the issue?

    rdellconsulting
    Participant

    @rdellconsulting

    It needs the same treatment as the 3-bar:

    /* Change Featured Pages Button color */
    .btn.btn-primary.fp-button,
    .btn.btn-primary.fp-button:hover,
    .btn.btn-primary.fp-button:focus,
    .btn.btn-primary.fp-button:active,
    .btn.btn-primary.fp-button.active,
    .btn.btn-primary.fp-button.disabled,
    .btn.btn-primary.fp-button [disabled] {
    background-color: #f26b41;
    background-image: linear-gradient(to bottom, #f26b41, #f26b41);
    }

    Fingers & paws crossed…

    lol still only half orange on my browser :-/

    rdellconsulting
    Participant

    @rdellconsulting

    Comes to something when it works in IE and not Safari!

    I’ll get @acub to advise…

    First, remove all code related to buttons from your custom CSS. Than, add this to it:

    .btn.btn-primary.fp-button {
      color: white;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      background-color: #ee7c2a;
      background-image: -moz-linear-gradient(top, #f78c40, #e16309);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f78c40), to(#e16309));
      background-image: -webkit-linear-gradient(top, #f78c40, #e16309);
      background-image: -o-linear-gradient(top, #f78c40, #e16309);
      background-image: linear-gradient(to bottom, #f78c40, #e16309);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff78c40' , endColorstr='#ffe16309' , GradientType=0);
      border-color: #e16309 #e16309 #984306;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      *background-color: #e16309;
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn.btn-primary.fp-button:hover,
    .btn.btn-primary.fp-button:focus,
    .btn.btn-primary.fp-button:active,
    .btn.btn-primary.fp-button.active,
    .btn.btn-primary.fp-button.disabled,
    .btn.btn-primary.fp-button[disabled] {
      color: white;
      background-color: #e16309;
      *background-color: #c95808;
    }
    .btn.btn-primary.fp-button:active,
    .btn.btn-primary.fp-button.active {
      background-color: #b04d07 \9;
    }
    .btn.btn-primary.fp-button:hover,
    .btn.btn-primary.fp-button:focus,
    .btn.btn-primary.fp-button:active,
    .btn.btn-primary.fp-button.active,
    .btn.btn-primary.fp-button.disabled,
    .btn.btn-primary.fp-button[disabled] {
      color: white;
      background-color: #e16309;
      *background-color: #c95808;
    }
    .btn.btn-primary.fp-button:active,
    .btn.btn-primary.fp-button.active {
      background-color: #b04d07 \9;
    }

    Should do the trick.

    Note: this only changes the buttons under featured pages on first page, not any other buttons throughout the website. (At least that’s what I understood you want.)

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change Button Colors’ is closed to new replies.