Animated progress bar not working after update to Enfold 4.2 - Support

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

Author

Posts
January 2, 2018 at 6:49 pm #892557

JS-at-Envato
Participant

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

January 2, 2018 at 6:52 pm #892558

Yigit
Keymaster

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,
Yigit

January 2, 2018 at 6:54 pm #892559
JS-at-Envato
Participant
Hi 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
- This reply was modified 6 years, 4 months ago by JS-at-Envato.
January 2, 2018 at 6:59 pm #892561

Yigit
Keymaster

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,
Yigit

January 2, 2018 at 7:05 pm #892563

JS-at-Envato
Participant

Hi 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
none

The 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

January 2, 2018 at 7:08 pm #892565

JS-at-Envato
Participant

Login data added.

January 2, 2018 at 7:15 pm #892568

JS-at-Envato
Participant

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

January 3, 2018 at 3:58 pm #892872

JS-at-Envato
Participant

@Yigit: Did you have a look yet?

January 5, 2018 at 6:15 pm #893774

Victoria
Inactive Moderator

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,
Victoria

January 5, 2018 at 6:27 pm #893784

JS-at-Envato
Participant

Hi 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

January 5, 2018 at 6:31 pm #893787

JS-at-Envato
Participant

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

January 5, 2018 at 6:33 pm #893789

JS-at-Envato
Participant

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

January 6, 2018 at 11:21 pm #894252
Victoria
Inactive Moderator
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,
Victoria
January 7, 2018 at 2:59 pm #894341

JS-at-Envato
Participant

Hi 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

January 7, 2018 at 4:59 pm #894389

Victoria
Inactive Moderator

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
Author

Posts

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

You must be logged in to reply to this topic.