Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #26134

    I’ve looked through the support forum a dozen times but cannot find anything related to this subject.

    The “problem”:

    We want to use the Progress Bars element in the Layerslider on the homepage.

    An exact replica of a Progress Bar on another page.

    Is that at all possible?

    Thought of a shortcode something with all the info from the progress bar, but can’t seem to find out how you make the progress bar. There’s no code behind the bar, not that I’m aware of.

    Thanks in advance



    I’ve another question in the dying minutes :-)

    How do I remove a margin from a column on a single page?

    I know this much:

    In Firebug the page div tag is; .post-entry-9:

    <div class=”post-entry post-entry-type-page post-entry-9″>

    And the column name is; div .av_one_fourth:

    <div class=”flex_column av_one_fourth avia-builder-el-4 el_after_av_one_half “>

    I’ve tried just about everything to change the left-margin to 0% instead of 6%

    The last thing I really thought would work was this css:

    #post-entry-9 div .av_one_fourth {

    margin-left: 0% !important;



    Hi Valdimarsson,

    Edit: See Ismael’s post below.

    For the second issue it would help to see the page live so that the css doesn’t cause issues with other elements on the page.




    Hi Devin,

    Here’s the site:

    Too bad with the slideshow. Will try to through around with some images and see what’s cooking ;-)




    You can actually copy the actual html code of the progress bar then enclose it on a unique div. Something like this

    <div class="layerslider-progressbar"><div class="avia-progress-bar-container avia_animate_when_almost_visible avia-builder-el-0 (Purchase code hidden if logged out) 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">Skill or Task</div></div><div class="progress avia_start_animation"><div class="bar-outer"><div class="bar" style="width: 100%" data-progress="100"></div></div></div></div></div></div></div>

    Then add this on your custom.css or Quick CSS.

    .layerslider-progressbar {
    width: 600px;
    height: 50px;

    We specify the width of the layerslider-progressbar div because the progress bar needs to inherit the size the parent element.




    Oh my god, you’re a lifesaver.

    Saw the post 5 mins ago and I’ve already implemented it. That’s what I call support.

    Thanks mate.



    Glad it’s working now. ;)



Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Make Content Elements appear in the LayerSlider WP?’ is closed to new replies.