We would like to change the portfolio filter inline display's colour, and also underline thickness. Right now it uses our Extra Color 1, but we'd like to change it to the Body's and Headers' grey. We would also like to change the underline to a thin 1px line.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="extra-color-1-underline"].full-width-section a.active, body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="extra-color-1-underline"].full-width-section a:hover {
color: #333 !important;
}
.portfolio-filters-inline[data-color-scheme*="-underline"] a:after, .portfolio-filters-inline[data-color-scheme*="-underline"] a:hover:after, .portfolio-filters-inline[data-color-scheme*="-underline"] a.active:after, .portfolio-filters[data-color-scheme*="-underline"] a:hover:after {
background-color: #333 !important;
}
.portfolio-filters-inline[data-color-scheme*="-underline"] a:after, .portfolio-filters[data-color-scheme*="-underline"] > ul li a:after {
height: 1px !important;
}
Hello,
We would like to change the portfolio filter inline display's colour, and also underline thickness. Right now it uses our Extra Color 1, but we'd like to change it to the Body's and Headers' grey. We would also like to change the underline to a thin 1px line.
Thank you kindly for your help!
Jason
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="extra-color-1-underline"].full-width-section a.active, body .wpb_row .span_12 .portfolio-filters-inline[data-color-scheme="extra-color-1-underline"].full-width-section a:hover { color: #333 !important; } .portfolio-filters-inline[data-color-scheme*="-underline"] a:after, .portfolio-filters-inline[data-color-scheme*="-underline"] a:hover:after, .portfolio-filters-inline[data-color-scheme*="-underline"] a.active:after, .portfolio-filters[data-color-scheme*="-underline"] a:hover:after { background-color: #333 !important; } .portfolio-filters-inline[data-color-scheme*="-underline"] a:after, .portfolio-filters[data-color-scheme*="-underline"] > ul li a:after { height: 1px !important; }Thanks
ThemeNectar Support Team
Thank you Tahir!
I removed the second line, so that the underlining animation stays in the Extra Color, and only the text remains in grey.
Thanks for your help!