Changes is style.css not taking effect on webpage

  • I am trying to change the style of my search button via the stylesheet style.css but the changes in the stylesheet does not take affect on the webpage.

    Ive been trying to change the color by applying this to the style.css in my child theme:

    .aws-container .aws-search-form .aws-form-btn {
    background: #fc0;!important
    border: 1px solid #d8d8d8;
    }
    .aws-container .aws-search-form .aws-form-btn:hover {
    background: #fc0;
    }
    .aws-container .aws-search-form .aws-form-btn:active {
    background: #fc0;
    }

    https://imgur.com/a/A37LDKZDoes anyone have any idea of how to fix this?

    • This topic was modified 5 years, 10 months ago by erlendrksmia.
    • This topic was modified 5 years, 10 months ago by erlendrksmia.

    The page I need help with: [log in to see the link]

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

  • Hi erlendrksmia,
    Could you please place !important after the css.
    I have checked it is working.

    Thread Starter erlendrksmia

    (@erlendrksmia)

    Like this?

    .aws-container .aws-search-form .aws-form-btn {
    background: #fc0;!important
    border: 1px solid #d8d8d8;important
    }
    .aws-container .aws-search-form .aws-form-btn:hover {
    background: #fc0;important
    }
    .aws-container .aws-search-form .aws-form-btn:active {
    background: #fc0;important
    }

    It doesnt work for me when I upload it in the style.css, but it works if I change it in the Chrome developer tool, of course.

    Thanks

    Then, Please check the plugins CSS if there. Or I have to try from Dashboard.

    Thanks & Regards

    Thread Starter erlendrksmia

    (@erlendrksmia)

    Thanks a lot for the tip, it worked out when I changed it directly in the plugin css!

    /* Form buttons */
    .aws-container .aws-search-form .aws-form-btn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    background: #fc01;
    border: 1px solid #d8d8d8;
    /*border-left: none;*/
    margin: 0 0 0 -1px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;

    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: background-color 100ms ease-in-out;
    -moz-transition: background-color 100ms ease-in-out;
    -o-transition: background-color 100ms ease-in-out;
    transition: background-color 100ms ease-in-out;
    }
    .aws-container .aws-search-form .aws-form-btn:hover {
    background: #feecb6;
    }
    .aws-container .aws-search-form .aws-form-btn:active {
    background: #fc01;
    }

    • This reply was modified 5 years, 10 months ago by erlendrksmia.

    Thanks erlendrksmia as you are helped. Remember me if you need more help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changes is style.css not taking effect on webpage’ is closed to new replies.

Tags