This is a library of CSS code snippets for applying gradients to various MyListing elements. These code snippets add gradient design options not available from the MyListing theme.
Note: For instructions and best practices, please refer to the How to Apply Code Snippets to Your MyListing Website guide.
MyListing Scroll To Top
This applies a dark background, a white arrow icon, and a gradient border.
a.back-to-top {
border: 2.5px solid transparent;
background: url(https://path-to-your-svg-file/filename.svg) padding-box fixed, linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
color: #fff;
}
a.back-to-top:hover {
border: 4px solid transparent;
background: url(https://path-to-your-svg-file/filename.svg) padding-box fixed, linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}MyListing Icons
What I’m doing here is applying a gradient to the icons, using a slightly lower opacity. Then, on hover, I’m providing the icons’ full opacity, giving them a brighter look.
The example here comes from using Elementor’s Nav Menu widget to call up a menu I created in WordPress. Within the WordPress menu, I placed icons, using MyListing’s Shortcode feature to create the icons.
/* STYLES THE BACKGROUND OF EACH NAV MENU ITEM */
selector a.elementor-item:hover {
background: #ffffff10;
margin-bottom: 10px;
}
/* STYLES THE FONT AWESOME ICONS WHEN THE MENU ITEMS ARE HOVERED */
selector a.elementor-item:hover .fa {
opacity: 1;
}
/* STYLES THE MATERIAL ICONS WHEN THE MENU ITEMS ARE HOVERED */
selector a.elementor-item:hover .mi {
opacity: 1;
}
/* STYLES THE COLOR OF ALL ICONS BEFORE HOVER */
selector .fa, .mi {
background: -webkit-linear-gradient(45deg,#34a496,#1d4ed8 90%);;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 10px;
opacity: .5;
}