Progress Bar Line Height and Font color on dark background - Support

Tagged: Progress Bar

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

Author

Posts

September 26, 2018 at 7:31 pm #1014947

neverstar

Participant

I have searched the forums and can’t find the following.

I have a progress bar on a dark background and the font for each item is dark, can’t change it, tried multiple quick css

Also, how do i change the line height of the progress bars?

Cheers
A

September 27, 2018 at 2:54 am #1015065

neverstar

Participant

.progressbar-title {
position: relative;
bottom: 0;
left: 0;
padding: 0;
background: none;
color: #ffffff;
line-height: 1.7em;
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
}

That solves the first one. Still can’t figure out space between each skill/bar.

Also, one last question. trying to figure out quick css to globally slow down the fade-in animation for a more dramatic effect.

Thanks everyone. I couldn’t have gotten the site to where it is without these forums.

This reply was modified 5 years, 6 months ago by neverstar.

September 27, 2018 at 11:00 am #1015217

Dude

Participant

Hi,

You can use following code to change the line height of the skill headline:


#top .progressbar-title{
line-height: 40px;
}

2) You can find the animations in enfold/config-templatebuilder/avia-shortcodes/progressbar/progressbar.css (I added a link to the private content field).

You simply need to copy the animation code to the quick css field – i.e:


.avia_transform #top .avia-progress-bar div.progress.avia_start_animation .bar-outer{
-webkit-animation: avia_expand 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
animation:         avia_expand 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
width:100%;
}

Then add #wrap_all to it (to overwrite the default style) and replace 1.5 with another value, i.e. 2.4:


.avia_transform #top #wrap_all .avia-progress-bar div.progress.avia_start_animation .bar-outer{
-webkit-animation: avia_expand 2.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
animation:         avia_expand 2.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
width:100%;
}

Best regards,
Peter

September 27, 2018 at 6:18 pm #1015427

neverstar

Participant

Thanks for the reply!

1. This doesn’t change the gap between the progress bars themselves (I want the bars much tighter together vertically, is there a way to do that?

2. I’m speaking about the fade in animation used on sections, images, content etc, not the progress bar animation.

Thanks!

September 27, 2018 at 6:57 pm #1015452

neverstar

Participant

Quick other Question (because there are no threads for it) Why don’t animations or scroll backgrounds work on ipad?

September 28, 2018 at 11:57 am #1015712

Dude

Participant

Hi,

1) This doesn’t change the gap between the progress bars themselves (I want the bars much tighter together vertically, is there a way to do that?

You can remove the margin on the top of the bar with following code:


#top .av-small-bar .avia-progress-bar {
    margin-top: 0;
}

2) The animation code can be found in shortcode.css (I added a link to your shortcodes.css in the private content field). Basically you can copy following code to your quick css field or child theme style.css and adjust the “s” values:


.avia_transform #wrap_all .avia_start_delayed_animation.fade-in {
-webkit-animation: avia-fadein 1.5s 1 ease-out; /* Safari 4+ */
animation:         avia-fadein 1.5s 1 ease-out; /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.pop-up {
-webkit-animation: avia_image_appear 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
animation:         avia_image_appear 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.top-to-bottom {
-webkit-animation: avia-ttb 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
animation:         avia-ttb 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.bottom-to-top {
-webkit-animation: avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
animation:         avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.left-to-right {
-webkit-animation: avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
animation:         avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.right-to-left {
-webkit-animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
animation:         avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.av-rotateIn {
  -webkit-animation: avia-rotateIn 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  animation: avia-rotateIn 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.av-rotateInUpLeft {
  -webkit-animation: avia-rotateInUpLeft 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  animation: avia-rotateInUpLeft 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  opacity: 1;
}

.avia_transform #wrap_all .avia_start_delayed_animation.av-rotateInUpRight {
  -webkit-animation: avia-rotateInUpRight 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  animation: avia-rotateInUpRight 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  opacity: 1;
}

Why don’t animations or scroll backgrounds work on ipad?
It depends on the browser. As far as I know Safari Ios does not support all animations/keyframes yet or requires special css “hacks”.

Best regards,
Peter

October 15, 2018 at 7:07 pm #1021723

neverstar

Participant

Thanks so much for this!

October 16, 2018 at 5:39 am #1021966