CSS Hacks for use in Avada

[WebbSpots]

#3518

Sometimes Avada needs a little help.

[WebbSpots]

#3519

New to me today!
Title with rotating text set to bounce doesn’t center and linebreak on mobile.
This does the trick.
add to css in title element: rotating-title-mobile
@media only screen and (max-width:800px){
.rotating-title-mobile .fusion-animated-text, .rotating-title-mobile span.line1{
white-space:normal !important;
}}

• This reply was modified 7 months ago by WebbSpots.

[WebbSpots]

#3520

Lets help Avada with Woo custom checkout align the checkout order review fields and define the radio buttons. Lets also give the radio button a theme matched color.

In the page css:

.fusion-woo-checkout-order-review-tb ul li label:before, .fusion-woo-checkout-payment-tb ul li label:before {
border: 1px solid #000;
}
.fusion-woo-checkout-order-review-tb ul li input:checked+label:after, .fusion-woo-checkout-payment-tb ul li input:checked+label:after {
background: blue;
}

.fusion-woo-checkout-shipping-tb .checkbox span:before, .fusion-woo-checkout-tabs-tb.woo-tabs-titles-disabled .checkbox span:before {

border: 1px solid;
border-color: #000000;
}
.checkout .shop_table tfoot th {

width: 50%;
text-align: left;

}
.checkout .shop_table tfoot td label {
display: block;
}

• This reply was modified 7 months ago by WebbSpots.

[WebbSpots]

#3521

We use Woo with Avada. Sometimes needs a nudge to get the look we like. Woo menu cart is one example where the theme colors need some help!

In Avada Custom CSS we add a hover color to match our theme to that element:

.fusion-menu-cart .awb-menu__sub-ul_main a:hover {
background-color: #000000;
}

.awb-menu .fusion-menu-cart-checkout:hover {
background-color: #000000;
}

• This reply was modified 7 months ago by WebbSpots.

[WebbSpots]

#3532

We use Avada Postcards for showing products, posts and portfolios. There is an included filter function.
The basic filters are a row of text. To dress it up a bit our friend, Stephen Walker, adds a bit of css:

.filtered-cards {
padding:1.8rem 2rem;
}
.filtered-cards .fusion-filters{
margin-bottom:2rem;
}
.fusion-filter {
margin-inline:0;
}
.fusion-filter a{
padding:4px 12px;
color:black!important;
font-size:1rem!important;
font-weight:400!important;
background-color:transpareent;
border:1px solid lightgray;
border-radius:0;
}
.fusion-filter a:hover{
background-color:transparent;
color:black;
}
.fusion-filter.fusion-active a{
border:1px solid lightgray!important;
background-color:rgba(0,0,0,.1);
color:rgb(131, 64, 102)!important;
line-height:inherit;
}
.fusion-filter.fusion-active a:hover{
background-color:transparent;
color:var(–awb-color7)!important;
}

[WebbSpots]

#3647

Form Styling css from a Facebook Avada Users Group member Shrzm Rml (formerly Lizza Alli).
Avada Forms checkboxes are really not checkboxes at all! To use a checkmark in the box some additional styling is needed, adjust to your preference for color and sizing:

In addition you can fancy it up with an actual checkmark: Shrzm Rml
shared this css that I have modified a bit:
/*Use custom styles.
1. Add a classname to checkbox field element e.g “my-checkbox”
2. use below styles..*/
.my-checkbox .fusion-form-checkbox label{
padding-left:25px!important;
}
.my-checkbox .fusion-form-checkbox label:before {
height:15px!important;
min-width:15px!important;
}
.my-checkbox .fusion-form-checkbox input:checked+label:after{
left: 5px!important;
top: 2px!important;
width: 5px!important;
height: 15px!important;
background:initial!important;
border: solid #ff0000!important;
border-width: 0 3px 3px 0!important;
transform: rotate(45deg)!important;
}

• This reply was modified 6 months, 2 weeks ago by WebbSpots.
• This reply was modified 1 week, 6 days ago by WebbSpots.
• This reply was modified 1 week, 6 days ago by WebbSpots.

[WebbSpots]

#3827

Add this to a container or column to blur the background.

.my-blur {
backdrop-filter:blur(25px)
}

[WebbSpots]

#4302

Another css tip for Avada Forms to change the checkbox border color if you don’t intend all the forms inputs to have a dark border:
/*checkbox border*/
.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label:before {
border: 1px solid #000000;
}
.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label:hover::before {
border-color: red !important;
}
/* Checked state */
.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label::before {
border-color: green !important;
}

[Author]

Posts