-
Posts
-
Hi,
sorry if I am asking something that was answered before – but I couldn’t find a solution yet.
I am using the code from https://kriesi.at/support/topic/make-content-elements-appear-in-the-layerslider-wp/
and modified the custom.css also like in the description.
Everything works perfect but…I want to colorize one progress bar different (let’s say orange) – but I can’t get it done.
<div class=”layerslider-progressbar”>
<div class=”avia-progress-bar-container avia_animate_when_almost_visible avia-builder-el-0 avia-builder-el-no-sibling avia_start_animation”>
<div class=”avia-progress-bar theme-color-bar icon-bar-no”>
<div class=”progressbar-title-wrap”>
<div class=”progressbar-icon avia-font-entypo-fontello”>
<span class=”progressbar-char”>?</span>
</div>
<div class=”progressbar-title”>Compositing</div>
</div>
<div class=”progress avia_start_animation”>
<div class=”bar-outer”>
<div class=”bar” style=”width: 65%” data-progress=”100″>
</div>
</div>
</div>
</div>
</div>
</div>
</div>I checked how it is done in the blog editor (comparing the code) but that one is not inside of div’s
I’m sure there is an easy solution to this…Hi Michael!
Try assigning each bar a different class:
Then you can use a code like this in the Quick CSS:
#main .ls-l .layerslider-progressbar1 .bar { background: #0869a6; background-image: -webkit-linear-gradient(-45deg, #0869a6 25%, #2a8bc8 25%, #2a8bc8 50%, #0869a6 50%, #0869a6 75%, #2a8bc8 75%, #2a8bc8); background-image: -moz-linear-gradient(-45deg, #0869a6 25%, #2a8bc8 25%, #2a8bc8 50%, #0869a6 50%, #0869a6 75%, #2a8bc8 75%, #2a8bc8); background-image: linear-gradient(-45deg, #0869a6 25%, #2a8bc8 25%, #2a8bc8 50%, #0869a6 50%, #0869a6 75%, #2a8bc8 75%, #2a8bc8); }And repeat for each bar, change the hex values accordingly.
Cheers!
Josue
- You must be logged in to reply to this topic.