Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • in reply to: How to change buttons CSS? #1063458

    Hi I would like to change my button css to the following but not sure how to select it once it’s save to my child theme:
    Is there a way I can have a cool button like this with enfold?
    /****
    * button
    *
    */
    .button, .button–primary, .button–secondary, .wrapped-input button, .wrapper-input button, .wrapped-input–inverse button, .wrapped-input–date button, .beer-list-item__wrapped-input button, .button–secondary-red, .button–alternative, .button–hero {
    font-family: “Neusa-Bold”, sans-serif;
    background: white;
    color: #000;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 0.01em;
    line-height: 1em;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease-in-out, border-color .2s ease-in-out; }
    .button:before, .button–primary:before, .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before, .button–secondary-red:before, .button–alternative:before, .button–hero:before, .button:after, .button–primary:after, .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after, .button–secondary-red:after, .button–alternative:after, .button–hero:after {
    transition: color .2s ease-in-out, border-color .2s ease-in-out; }
    .button:focus, .button–primary:focus, .button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary-red:focus, .button–alternative:focus, .button–hero:focus {
    outline: none; }
    .button:focus, .button–primary:focus, .button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary-red:focus, .button–alternative:focus, .button–hero:focus, .button:hover, .button–primary:hover, .button–secondary:hover, .wrapped-input button:hover, .wrapper-input button:hover, .wrapped-input–inverse button:hover, .wrapped-input–date button:hover, .beer-list-item__wrapped-input button:hover, .button–secondary-red:hover, .button–alternative:hover, .button–hero:hover {
    border-color: #1c1c1c;
    color: #1c1c1c; }
    .button:focus:before, .button–primary:focus:before, .button–secondary:focus:before, .wrapped-input button:focus:before, .wrapper-input button:focus:before, .wrapped-input–inverse button:focus:before, .wrapped-input–date button:focus:before, .beer-list-item__wrapped-input button:focus:before, .button–secondary-red:focus:before, .button–alternative:focus:before, .button–hero:focus:before, .button:hover:before, .button–primary:hover:before, .button–secondary:hover:before, .wrapped-input button:hover:before, .wrapper-input button:hover:before, .wrapped-input–inverse button:hover:before, .wrapped-input–date button:hover:before, .beer-list-item__wrapped-input button:hover:before, .button–secondary-red:hover:before, .button–alternative:hover:before, .button–hero:hover:before {
    border-right-color: #1c1c1c; }
    .button:focus:after, .button–primary:focus:after, .button–secondary:focus:after, .wrapped-input button:focus:after, .wrapper-input button:focus:after, .wrapped-input–inverse button:focus:after, .wrapped-input–date button:focus:after, .beer-list-item__wrapped-input button:focus:after, .button–secondary-red:focus:after, .button–alternative:focus:after, .button–hero:focus:after, .button:hover:after, .button–primary:hover:after, .button–secondary:hover:after, .wrapped-input button:hover:after, .wrapper-input button:hover:after, .wrapped-input–inverse button:hover:after, .wrapped-input–date button:hover:after, .beer-list-item__wrapped-input button:hover:after, .button–secondary-red:hover:after, .button–alternative:hover:after, .button–hero:hover:after {
    border-top-color: #1c1c1c; }
    .button–primary {
    border: solid 0.125em #000;
    position: relative;
    box-shadow: 0 0.5625em 0 -0.3125em;
    font-size: 2rem;
    padding: 0.46875em;
    overflow: visible; }
    .button–primary:after, .button–primary:before {
    top: calc(100% + 0.125em);
    position: absolute;
    display: block;
    content: “”;
    border-style: solid; }
    .button–primary:before {
    border-width: 0 0.3125em 0.25em 0;
    border-color: transparent #000 transparent transparent;
    left: -0.125em; }
    .button–primary:after {
    border-width: 0.25em 0.3125em 0 0;
    border-color: #000 transparent transparent transparent;
    right: -0.125em; }
    .button–primary:focus, .button–primary:hover {
    box-shadow: 0 0.5em 0 -0.3125em;
    -webkit-transform: translateY(0.0625em);
    transform: translateY(0.0625em); }
    .button–primary:focus:before, .button–primary:focus:after, .button–primary:hover:before, .button–primary:hover:after {
    bottom: -0.3125em; }
    .button–primary:focus:before, .button–primary:hover:before {
    border-width: 0 0.3125em 0.1875em 0; }
    .button–primary:focus:after, .button–primary:hover:after {
    border-width: 0.1875em 0.3125em 0 0; }
    .button–primary:active {
    box-shadow: 0 0.4375em 0 -0.3125em;
    -webkit-transform: translateY(0.125em);
    transform: translateY(0.125em); }
    .button–primary:active:before {
    border-width: 0 0.3125em 0.125em 0;
    bottom: -0.25em; }
    .button–primary:active:after {
    border-width: 0.125em 0.3125em 0 0;
    bottom: -0.25em; }
    .button–secondary, .wrapped-input button, .wrapper-input button, .wrapped-input–inverse button, .wrapped-input–date button, .beer-list-item__wrapped-input button {
    border: solid 0.1818181818em #000;
    position: relative;
    box-shadow: 0 0.6818181818em 0 -0.4090909091em;
    font-size: 1.375rem;
    padding: 0.4545454545em 0.6818181818em;
    margin-bottom: 0.625em; }
    .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after, .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before {
    top: calc(100% + 0.1818181818em);
    position: absolute;
    display: block;
    content: “”;
    border-style: solid; }
    .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before {
    border-width: 0 0.4545454545em 0.2727272727em 0;
    border-color: transparent #000 transparent transparent;
    left: -0.1818181818em; }
    .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after {
    border-width: 0.2727272727em 0.4545454545em 0 0;
    border-color: #000 transparent transparent transparent;
    right: -0.1818181818em; }
    .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before, .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after {
    bottom: -0.4545454545em; }
    .button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary:hover, .wrapped-input button:hover, .wrapper-input button:hover, .wrapped-input–inverse button:hover, .wrapped-input–date button:hover, .beer-list-item__wrapped-input button:hover {
    box-shadow: 0 0.6363636364em 0 -0.4545454545em;
    -webkit-transform: translateY(0.0909090909em);
    transform: translateY(0.0909090909em); }
    .button–secondary:focus:before, .wrapped-input button:focus:before, .wrapper-input button:focus:before, .wrapped-input–inverse button:focus:before, .wrapped-input–date button:focus:before, .beer-list-item__wrapped-input button:focus:before, .button–secondary:hover:before, .wrapped-input button:hover:before, .wrapper-input button:hover:before, .wrapped-input–inverse button:hover:before, .wrapped-input–date button:hover:before, .beer-list-item__wrapped-input button:hover:before {
    border-width: 0 0.4545454545em 0.1818181818em 0;
    bottom: -0.3636363636em; }
    .button–secondary:focus:after, .wrapped-input button:focus:after, .wrapper-input button:focus:after, .wrapped-input–inverse button:focus:after, .wrapped-input–date button:focus:after, .beer-list-item__wrapped-input button:focus:after, .button–secondary:hover:after, .wrapped-input button:hover:after, .wrapper-input button:hover:after, .wrapped-input–inverse button:hover:after, .wrapped-input–date button:hover:after, .beer-list-item__wrapped-input button:hover:after {
    border-width: 0.1818181818em 0.4545454545em 0 0;
    bottom: -0.3636363636em; }
    .button–secondary:active, .wrapped-input button:active, .wrapper-input button:active, .wrapped-input–inverse button:active, .wrapped-input–date button:active, .beer-list-item__wrapped-input button:active {
    box-shadow: 0 0.5454545455em 0 -0.4545454545em;
    -webkit-transform: translateY(0.1818181818em);
    transform: translateY(0.1818181818em); }
    .button–secondary:active:before, .wrapped-input button:active:before, .wrapper-input button:active:before, .wrapped-input–inverse button:active:before, .wrapped-input–date button:active:before, .beer-list-item__wrapped-input button:active:before {
    border-width: 0 0.4545454545em 0.0909090909em 0;
    bottom: -0.2727272727em; }
    .button–secondary:active:after, .wrapped-input button:active:after, .wrapper-input button:active:after, .wrapped-input–inverse button:active:after, .wrapped-input–date button:active:after, .beer-list-item__wrapped-input button:active:after {
    border-width: 0.0909090909em 0.4545454545em 0 0;
    bottom: -0.2727272727em; }
    .button–secondary-red {
    border: solid 0.1818181818em #e40421;
    position: relative;
    box-shadow: 0 0.6818181818em 0 -0.4090909091em;
    font-size: 1.375rem;
    padding: 0.4545454545em 0.6818181818em;
    margin-bottom: 0.625em;
    color: #e40421;
    transition: none; }
    .button–secondary-red:after, .button–secondary-red:before {
    top: calc(100% + 0.1818181818em);
    position: absolute;
    display: block;
    content: “”;
    border-style: solid; }
    .button–secondary-red:before {
    border-width: 0 0.4545454545em 0.2727272727em 0;
    border-color: transparent #e40421 transparent transparent;
    left: -0.1818181818em; }
    .button–secondary-red:after {
    border-width: 0.2727272727em 0.4545454545em 0 0;
    border-color: #e40421 transparent transparent transparent;
    right: -0.1818181818em; }
    .button–secondary-red:before, .button–secondary-red:after {
    bottom: -0.4545454545em; }
    .button–secondary-red:focus, .button–secondary-red:hover {
    box-shadow: 0 0.6363636364em 0 -0.4545454545em;
    -webkit-transform: translateY(0.0909090909em);
    transform: translateY(0.0909090909em); }
    .button–secondary-red:focus:before, .button–secondary-red:hover:before {
    border-width: 0 0.4545454545em 0.1818181818em 0;
    bottom: -0.3636363636em; }
    .button–secondary-red:focus:after, .button–secondary-red:hover:after {
    border-width: 0.1818181818em 0.4545454545em 0 0;
    bottom: -0.3636363636em; }
    .button–secondary-red:active {
    box-shadow: 0 0.5454545455em 0 -0.4545454545em;
    -webkit-transform: translateY(0.1818181818em);
    transform: translateY(0.1818181818em); }
    .button–secondary-red:active:before {
    border-width: 0 0.4545454545em 0.0909090909em 0;
    bottom: -0.2727272727em; }
    .button–secondary-red:active:after {
    border-width: 0.0909090909em 0.4545454545em 0 0;
    bottom: -0.2727272727em; }
    .button–secondary-red:before, .button–secondary-red:after {
    transition: none; }
    .button–secondary-red:focus, .button–secondary-red:hover {
    border-color: #fb0726;
    color: #fb0726; }
    .button–secondary-red:focus:before, .button–secondary-red:hover:before {
    border-right-color: #fb0726; }
    .button–secondary-red:focus:after, .button–secondary-red:hover:after {
    border-top-color: #fb0726; }
    .button–alternative {
    border: solid 0.1818181818em #000;
    position: relative;
    background: #e40421;
    box-shadow: #000 0 0.6818181818em 0 -0.4090909091em;
    color: #fff;
    font-size: 1.375rem;
    padding: 0.4545454545em 0.6818181818em; }
    .button–alternative:after, .button–alternative:before {
    top: calc(100% + 0.1818181818em);
    position: absolute;
    display: block;
    content: “”;
    border-style: solid; }
    .button–alternative:before {
    border-width: 0 0.4545454545em 0.2727272727em 0;
    border-color: transparent #000 transparent transparent;
    left: -0.1818181818em; }
    .button–alternative:after {
    border-width: 0.2727272727em 0.4545454545em 0 0;
    border-color: #000 transparent transparent transparent;
    right: -0.1818181818em; }
    .button–alternative:before, .button–alternative:after {
    bottom: -0.4545454545em; }
    .button–alternative:focus, .button–alternative:hover {
    box-shadow: #000 0 0.6363636364em 0 -0.4545454545em;
    color: #fff;
    -webkit-transform: translateY(0.0909090909em);
    transform: translateY(0.0909090909em); }
    .button–alternative:focus:before, .button–alternative:hover:before {
    border-width: 0 0.4545454545em 0.1818181818em 0;
    bottom: -0.3636363636em; }
    .button–alternative:focus:after, .button–alternative:hover:after {
    border-width: 0.1818181818em 0.4545454545em 0 0;
    bottom: -0.3636363636em; }
    .button–alternative:active {
    box-shadow: #000 0 0.5454545455em 0 -0.4545454545em;
    -webkit-transform: translateY(0.1818181818em);
    transform: translateY(0.1818181818em); }
    .button–alternative:active:before {
    border-width: 0 0.4545454545em 0.0909090909em 0;
    bottom: -0.2727272727em; }
    .button–alternative:active:after {
    border-width: 0.0909090909em 0.4545454545em 0 0;
    bottom: -0.2727272727em; }
    .button–hero {
    border: solid 0.1818181818em #000;
    position: relative;
    background: #e40421;
    box-shadow: 0 0.8181818182em 0 -0.4545454545em;
    line-height: 0.7272727273em;
    font-size: 1.375rem; }
    .button–hero:after, .button–hero:before {
    top: calc(100% + 0.1818181818em);
    position: absolute;
    display: block;
    content: “”;
    border-style: solid; }
    .button–hero:before {
    border-width: 0 0.4545454545em 0.3636363636em 0;
    border-color: transparent #000 transparent transparent;
    left: -0.1818181818em; }
    .button–hero:after {
    border-width: 0.3636363636em 0.4545454545em 0 0;
    border-color: #000 transparent transparent transparent;
    right: -0.1818181818em; }
    .button–hero:after {
    display: table;
    clear: both;
    content: “”; }
    .button–hero:before, .button–hero:after {
    bottom: -0.5909090909em; }
    .button–hero:focus, .button–hero:hover {
    box-shadow: #000 0 0.6363636364em 0 -0.4545454545em;
    color: #fff;
    -webkit-transform: translateY(0.0909090909em);
    transform: translateY(0.0909090909em); }
    .button–hero:focus:before, .button–hero:hover:before {
    border-width: 0 0.4545454545em 0.1818181818em 0;
    bottom: -0.3636363636em; }
    .button–hero:focus:after, .button–hero:hover:after {
    border-width: 0.1818181818em 0.4545454545em 0 0;
    bottom: -0.3636363636em; }
    .button–hero:active {
    box-shadow: 0 0.5454545455em 0 -0.4545454545em;
    -webkit-transform: translateY(0.1818181818em);
    transform: translateY(0.1818181818em); }
    .button–hero:active:before {
    border-width: 0 0.4545454545em 0.0909090909em 0;
    bottom: -0.2727272727em; }
    .button–hero:active:after {
    border-width: 0.0909090909em 0.4545454545em 0 0;
    bottom: -0.2727272727em; }
    .button–hero .pre-cta {
    background: #fff;
    border-right: solid 0.1818181818em #000;
    float: left;
    padding: 0.6363636364em 0.9090909091em 0.6363636364em 0.6818181818em; }
    .button–hero .pre-cta-title,
    .button–hero .pre-cta-desc {
    display: block; }
    .button–hero .pre-cta-title {
    margin-bottom: 0.4090909091em; }
    .button–hero .pre-cta-desc {
    font-size: 1rem; }
    .button–hero .cta {
    color: #fff;
    float: right;
    padding: 0.8181818182em 1.3636363636em 0.8181818182em 0.9090909091em; }
    .button–hero .icon {
    float: left;
    margin-right: 0.6818181818em; }
    .button–hero .text {
    float: left;
    line-height: 1.3636363636em; }

    I am having a similar problem. My enfold is updated to v3.8. My front page form keeps randomly reseting itself to the default settings which means a different email address and form colours. This makes it very difficult to use on the homepage and it goes to the wrong email when it resets. Please help. I have tried to follow this thread to find out the resolution but this doesn’t help.

    Thanks.

    I have the same issue. I have gone through the other posts that are similar. My theme is updated, I did a hard refresh and cleared my cache and still have the same issue. See our test site here:

    This site is scheduled to go live Monday. Yikes! What happened????

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