Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 13, 2013 at 2:56 pm #26134
    Valdimarsson

    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

    Valdimarsson

    July 13, 2013 at 9:03 pm #129413
    Valdimarsson

    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;

    }

    July 15, 2013 at 5:28 pm #129414
    Devin

    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.

    Regards,

    Devin

    July 15, 2013 at 9:51 pm #129415
    Valdimarsson

    Hi Devin,

    Here’s the site: http://ftmedia.dk

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

    Thanks.

    July 16, 2013 at 6:08 am #129416
    Ismael

    Hi,

    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 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">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.

    Regards,

    Ismael

    July 19, 2013 at 9:50 pm #129417
    Valdimarsson

    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.

    July 20, 2013 at 4:55 am #129418
    Ismael

    Hey,

    Glad it’s working now. ;)

    Cheers,

    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Make Content Elements appear in the LayerSlider WP?’ is closed to new replies.