Forum Replies Created
-
AuthorPosts
-
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; }October 19, 2016 at 5:34 pm in reply to: Contact form content element resets title and captcha on update #701443I 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.
April 16, 2016 at 9:56 pm in reply to: urgent: site not loading / no videos / invisible content ?? #615583I 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????
-
AuthorPosts