-
Posts
-
Hi there,
I’ve updated Enfold to version 4.2. Since then, the animated progress bars don’t show the animation any more. Even in the admin part.
If I add another bar and set the color from “Theme Farbe” to any other color, then the animation is shown.
If I add another bar and set the color to “Theme Farbe”, then the animation is not shown.
I’m using the demo template (https://kriesi.at/themes/enfold-app/) as the basis for my website, even with the same colors.
Any ideas, on how to fix this?
Thanks for your help.Jan
Hey Jan,
They show up fine on my end, attached a screenshot in private content field.
Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh
Regards,
YigitHi Yigit,
they used to look like this with the striped bars:
https://kriesi.at/themes/enfold-app/I’ve just change the first bar to another color. Then the stripes display again.
Jan
Hi Jan,
It seems like only difference is your Progress Bar element displays single color while demo site displays striped version. You can simply edit the element and change it – https://i.imgur.com/KNNuQ45.png
If that is not what you meant, please elaborate on the issue you are having and post WP admin logins here privately so we can look into it :)
Best regards,
YigitHi Yigit,
I’m aware of the setting.
The difference between the demo an my page ist this:My page:
.main_color .av-striped-bar .theme-color-bar .bar
noneThe demo page:
.main_color .av-striped-bar .theme-color-bar .bar
linear-gradient(-45deg, rgb(70, 120, 174) 25%, rgb(104, 154, 207) 25%, rgb(104, 154, 207) 50%, rgb(70, 120, 174) 50%, rgb(70, 120, 174) 75%, rgb(104, 154, 207) 75%, rgb(104, 154, 207))Both taken from enfold.css.
I’ll set up a login for you, so you can have a look.
Jan
That is the CSS from the demo page:
.main_color .av-striped-bar .theme-color-bar .bar{background: #4678ae;background-image:-webkit-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-image: -moz-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-image: linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-size: 10px 10px;}And that is the CSS from my page:
.main_color .av-striped-bar .theme-color-bar .bar{background: #4678ae;}Both taken from enfold.css.
Jan
@Yigit: Did you have a look yet?
Hi JS-at-Envato,
Looks fine on my end too.
Can you please attach a screenshot of what it looks like on your end?
Best regards,
VictoriaHi Victoria,
it looks just like on your screenshot.For testing, I have change the “Balkenfarbe” from “Theme Farbe” to “Blau” for the first progress bar. As a result, the first bar shows the animation.
I’ve remained the second, third and fourth bar just like it was with the “Balkenfarbe” == “Theme Farbe”. And these bars don’t show the animation any more.If you check the css on my page for second, third and fourth bar, it differs from the css which is in the demo page (https://kriesi.at/themes/enfold-app/). Although it is the same colour setting.
Somehow the enfold.css is not correctly generated any more after the update to 4.2. Before, all progress bars looked exactly like in the demo page.
Jan
To be more precise:
The general animation is working, but the stripes are not displayed, although they are all set as “striped” for the Progress Bar Coloring!
If I change the color to something else than “Theme color” then the stripes are shown.
The stripes are not shown, when the color is set to “Theme color”.
This was perfectly working before the Update to Enfold 4.2.Sorry for the confusion!
Jan
If you check the ccs on my page and compare it to the css on the demo page then you’ll see that this part is missing:
background-image:-webkit-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-image: -moz-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-image: linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf);background-size: 10px 10px;And this is the part which creates the stripes.
Jan
Hi Jan,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.main_color .av-striped-bar .theme-color-bar .bar { background: #4678ae; background-image: -webkit-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf); background-image: -moz-linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf); background-image: linear-gradient(-45deg, #4678ae 25%, #689acf 25%, #689acf 50%, #4678ae 50%, #4678ae 75%, #689acf 75%, #689acf); background-size: 10px 10px; }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
this fixed the display error. But do you have an idea, why it was not working any more in the default?
I did not have to include some custom css with Enfold prior 4.2.Jan
Hi Jan,
I know, the code was generated by the theme. It does not do that in this case. Not sure why, could be due to the plugin conflict or your installation configuration, or the theme error.
Glad we got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.