Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 14, 2014 at 2:39 pm #264663
    Maik

    Hey at all,

    I want to ask, if it is possible to change the style of the progress bar.
    instead of having the animated stripes, i need a solid color.

    is this possible, and can it done by changing the css?

    much thanks in advance for the help :)

    May 14, 2014 at 3:57 pm #264729
    Flikk

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    you can turn off the animation with

    .avia-progress-bar div.progress .bar {
    animation: none;
}

    To change the color of them you need to add (enter the color you want for each one):

    .grey-bar .bar {
    background: #FFFFFF !important;
}
.blue-bar .bar {
    background: #FFFFFF !important;;
}
.green-bar .bar {
    background: #FFFFFF !important;;
}
.orange-bar .bar {
    background: #FFFFFF !important;;
}
.black-bar .bar {
    background: #FFFFFF !important;;
}
.red-bar .bar {
    background: #FFFFFF !important;;
}
.teal-bar .bar {
    background: #FFFFFF !important;;
}
.aqua-bar .bar {
    background: #FFFFFF !important;;
}
.purple-bar .bar {
    background: #FFFFFF !important;;
}
.pink-bar .bar {
    background: #FFFFFF !important;;
}
.silver-bar .bar {
    background:  #FFFFFF !important;;
}
    May 15, 2014 at 3:43 pm #265311
    Maik

    He there,

    thanks for this hint. But unfortunately it does not work :(
    The brogressbar still is animated.

    I just tried to set the code in Quick CCS change.
    but this was not effective.

    then i set up a special CSS Class as shown in the link and put the following code in the quick css field:
    #top .custom_class_progress .avia-progress-bar div.progress .bar {animation: none;}

    but still there is no solid color, but the animated stripes :(

    May 15, 2014 at 4:11 pm #265331
    Flikk

    Instead use:

    Remove animation:

    .avia-progress-bar div.progress .bar {
    animation: none !important;
}

    Remove the stripes:

    .bar {
background-image: none !important;
}

    You should still be able to change the color of the bars with the code of my first reply.

    May 18, 2014 at 11:18 pm #266494
    Josue

    Hey @framelessworld!

    Where in your website do you have the bars? i couldn’t find them in any of the pages.

    Best regards,
    Josue

    May 19, 2014 at 9:59 am #266680
    Maik

    @ Flikk: Thanks for this hint ;)
    it works well! fantastic!

    @ Josue: this is because i jhave not set the page to public.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change style of the progressbar’ is closed to new replies.