Button colours

  • Author
    Posts
  • #161357

    samanthawan
    Member

    Hi there,
    Please advise how to get the button colours to change?
    I’ve adjusted in the block colour settings for a couple of buttons but in the live page they are all black & white.
    ie. Top link – National Breast Cancer Foundation Fundraiser — pink in edit & demo but white when live.

    Screenshot here

    Live page https://samanthawan.com.au/links/

    Thanks,
    Sam

    The blog I need help with is samanthawan.com.au.

    #161384

    ricardpriet
    Theme Author

    Hello Sam,
    Yes, it’s true. For some reason, the button are not taking the color you are selecting.

    Add this CSS to ensure the selected color is applyed:

    :root .has-pale-pink-background-color {
        background-color: #f78da7 !important;
    }
    :root .has-vivid-red-background-color {
        background-color: #cf2e2e !important;
    }
    :root .has-luminous-vivid-orange-background-color {
        background-color: #ff6900 !important;
    }
    :root .has-luminous-vivid-amber-background-color {
        background-color: #fcb900 !important;
    }
    :root .has-light-green-cyan-background-color {
        background-color: #7bdcb5 !important;
    }
    :root .has-vivid-green-cyan-background-color {
        background-color: #00d084 !important;
    }
    :root .has-pale-cyan-blue-background-color {
        background-color: #8ed1fc !important;
    }
    :root .has-vivid-cyan-blue-background-color {
        background-color: #0693e3 !important;
    }
    :root .has-vivid-purple-background-color {
        background-color: #9b51e0 !important;
    }
    :root .has-white-background-color {
        background-color: #fff !important;
    }
    :root .has-very-light-gray-background-color {
        background-color: #eee !important;
    }
    :root .has-cyan-bluish-gray-background-color {
        background-color: #abb8c3 !important;
    }
    :root .has-very-dark-gray-background-color {
        background-color: #313131 !important;
    }
    :root .has-black-background-color {
        background-color: #000 !important;
    }
    :root .has-pale-pink-color {
        color: #f78da7 !important;
    }
    :root .has-vivid-red-color {
        color: #cf2e2e !important;
    }
    :root .has-luminous-vivid-orange-color {
        color: #ff6900 !important;
    }
    :root .has-luminous-vivid-amber-color {
        color: #fcb900 !important;
    }
    :root .has-light-green-cyan-color {
        color: #7bdcb5 !important;
    }
    :root .has-vivid-green-cyan-color {
        color: #00d084 !important;
    }
    :root .has-pale-cyan-blue-color {
        color: #8ed1fc !important;
    }
    :root .has-vivid-cyan-blue-color {
        color: #0693e3 !important;
    }
    :root .has-vivid-purple-color {
        color: #9b51e0 !important;
    }
    :root .has-white-color {
        color: #fff !important;
    }
    :root .has-very-light-gray-color {
        color: #eee !important;
    }
    :root .has-cyan-bluish-gray-color {
        color: #abb8c3 !important;
    }
    :root .has-very-dark-gray-color {
        color: #313131 !important;
    }
    :root .has-black-color {
        color: #000 !important;
    }
    :root .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
        background: linear-gradient(135deg, #0693e3, #9b51e0) !important;
    }
    :root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
        background: linear-gradient(135deg, #00d084, #0693e3) !important;
    }
    :root .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
        background: linear-gradient(135deg, #7adcb4, #00d082) !important;
    }
    :root .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
        background: linear-gradient(135deg, #fcb900, #ff6900) !important;
    }
    :root .has-luminous-vivid-orange-to-vivid-red-gradient-background {
        background: linear-gradient(135deg, #ff6900, #cf2e2e) !important;
    }
    :root .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
        background: linear-gradient(135deg, #eee, #a9b8c3) !important;
    }
    :root .has-cool-to-warm-spectrum-gradient-background {
        background: linear-gradient(135deg, #4aeadc, #9778d1 20%, #cf2aba 40%, #ee2c82 60%, #fb6962 80%, #fef84c) !important;
    }
    :root .has-blush-light-purple-gradient-background {
        background: linear-gradient(135deg, #ffceec, #9896f0) !important;
    }
    :root .has-blush-bordeaux-gradient-background {
        background: linear-gradient(135deg, #fecda5, #fe2d2d 50%, #6b003e) !important;
    }
    :root .has-purple-crush-gradient-background {
        background: linear-gradient(135deg, #34e2e4, #4721fb 50%, #ab1dfe) !important;
    }
    :root .has-luminous-dusk-gradient-background {
        background: linear-gradient(135deg, #ffcb70, #c751c0 50%, #4158d0) !important;
    }
    :root .has-hazy-dawn-gradient-background {
        background: linear-gradient(135deg, #faaca8, #dad0ec) !important;
    }
    :root .has-pale-ocean-gradient-background {
        background: linear-gradient(135deg, #fff5cb, #b6e3d4 50%, #33a7b5) !important;
    }
    :root .has-electric-grass-gradient-background {
        background: linear-gradient(135deg, #caf880, #71ce7e) !important;
    }
    :root .has-subdued-olive-gradient-background {
        background: linear-gradient(135deg, #fafae1, #67a671) !important;
    }
    :root .has-atomic-cream-gradient-background {
        background: linear-gradient(135deg, #fdd79a, #004a59) !important;
    }
    :root .has-nightshade-gradient-background {
        background: linear-gradient(135deg, #330968, #31cdcf) !important;
    }
    :root .has-midnight-gradient-background {
        background: linear-gradient(135deg, #020381, #2874fc) !important;
    }

    Here you are how to add it: https://wordpress.com/support/custom-design/editing-css/

    Thank you again!
    Best,
    Ricardo

The topic ‘Button colours’ is closed to new replies.