WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Change Button Colors (11 posts)

  1. cari.h.cayton
    Member
    Posted 6 months ago #

    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! :-)

  2. rdellconsulting
    Member
    Posted 6 months ago #

    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);
    }
  3. cari.h.cayton
    Member
    Posted 6 months ago #

    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

  4. rdellconsulting
    Member
    Posted 6 months ago #

    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);
    }
  5. cari.h.cayton
    Member
    Posted 6 months ago #

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

  6. rdellconsulting
    Member
    Posted 6 months ago #

    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);
    }
  7. cari.h.cayton
    Member
    Posted 6 months ago #

    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?

  8. rdellconsulting
    Member
    Posted 6 months ago #

    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...

  9. cari.h.cayton
    Member
    Posted 6 months ago #

    lol still only half orange on my browser :-/

  10. rdellconsulting
    Member
    Posted 6 months ago #

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

    I'll get @acub to advise...

  11. acub
    Member
    Posted 6 months ago #

    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.)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.