2.13 CUSTOM CSS/JS CODE
If you have some knowledge in css or jquery then you can add some custom scripts in this section.
When adding custom css code, we highly recommend to target the element to customize with the css grid name that you can set in the general tab.
This will prevent to apply the same style to all grid in the same page.
Examples :
Date/Category/terms colors:
<div>COPY</div> <code>/*** Date/Category/terms colors ***/ .mycss-grid-name .tg-item-date, .mycss-grid-name .tg-cats-holder, .mycss-grid-name .tg-item-date *, .mycss-grid-name .tg-cats-holder * { color: #e6ae48 !important; /*** change color here ***/ }
Quote/link title color on mouse hover:
<div>COPY</div> <code>/*** quote/link title color on mouse hover ***/ .mycss-grid-name .quote-format h2:hover a, .mycss-grid-name .link-format h2:hover a { color: #e6ae48 !important; opacity: 1; }
Quote/link background color on mouse hover:
<div>COPY</div> <code>/*** quote/link background color on mouse hover ***/ .mycss-grid-name .tg-item:hover .tg-item-content-holder.link-format, .mycss-grid-name .tg-item:hover .tg-item-content-holder.quote-format { background-color: rgba(22,22,22,0.9) !important; }
Quote/link heart liked color:
<div>COPY</div> <code>/*** quote/link heart liked color ***/ .mycss-grid-name .to-post-like.liked path { fill: #ffffff !important; stroke: #ffffff !important; }
Mediaelement Video/Audio player controls colors:
<div>COPY</div> <code>/*** mediaelement Video/Audio player controls colors ***/ .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-volume-slider .mejs-volume-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label, .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label, .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label.active { background-color: rgba(47,191,193,1) !important; color: #ffffff !important; }