Barra de Progreso - Support | Kriesi.at - Premium WordPress Themes

Con la barra de progreso de puede hacer algo como esto:?
Imagen

November 30, 2016 at 4:22 pm #718858

Hola!

That should be possible. Can you please post a link to your page where you have your progress bar element?

Best regards,
Yigit

P.S.: If you would like to receive replies in Spanish, please let us know so our Spanish speaking moderators can help. However, since we have more English speaking moderators, you would receive quicker replies if you post your questions in English :)

November 30, 2016 at 4:43 pm #718875

Hola Yigit,
Thanks for your time and san google translate.
The page is http://warnerspa.cl/administracion-de-instalaciones-no-industriales/
And what I need to do is + – this:

November 30, 2016 at 4:50 pm #718877

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.avia-progress-bar:nth-child(3), .avia-progress-bar:nth-child(4), .avia-progress-bar:nth-child(5), .avia-progress-bar:nth-child(6), .avia-progress-bar:nth-child(7), .avia-progress-bar:nth-child(8) {
    width: 90%;
    margin-left: 10%;
}

Best regards,
Yigit

November 30, 2016 at 5:11 pm #718889

It worked!! almost :)
The problem is that I misconfigure the pages where I occupy the progress bar,
http://www.warnerspa.cl/seguridad/ – http://www.warnerspa.cl/saneamiento-ambiental/
I know that changing the order and numbering of child (X) of the elements of the bar could fix the issue, but I think this could cause problems in the same way later

Is it possible to change this directly in the code to call the bar?
For example I know that the code for a pair of bars would be:

<div class="avia-progress-bar-container avia_animate_when_almost_visible avia-builder-el-3 el_after_av_textblock avia-builder-el-last av-striped-bar av-animated-bar avia_start_animation"> <div class="avia-progress-bar theme-color-bar icon-bar-yes"> <div class="progressbar-title-wrap"> <div class="progressbar-icon"> <span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"> </span> </div> <div class="progressbar-title">barra 1</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 class="avia-progress-bar theme-color-bar icon-bar-yes"> <div class="progressbar-title-wrap"> <div class="progressbar-icon"> <span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"> </span> </div> <div class="progressbar-title">barra 2</div> </div> <div class="progress avia_start_animation"> <div class="bar-outer"> <div class="bar" style="width: 95%" data-progress="100"> </div> </div> </div> </div> </div>

Could you modify directly here and not through the global css?

November 30, 2016 at 5:13 pm #718891

Hi,

Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your progress bar element and give it a custom CSS class (“your-custom-class” in my example) and then change the code to following one

.your-custom-class .avia-progress-bar:nth-child(3),.your-custom-class .avia-progress-bar:nth-child(4), .your-custom-class .avia-progress-bar:nth-child(5), .your-custom-class .avia-progress-bar:nth-child(6), .your-custom-class .avia-progress-bar:nth-child(7), .your-custom-class .avia-progress-bar:nth-child(8) {
    width: 90%;
    margin-left: 10%;
}

Best regards,
Yigit

November 30, 2016 at 9:13 pm #718983

I got lost
Enable custom css, insert class, but I do not know what part of the code I have to modify
Adjunct full progress bar code and block code ss

<div class="avia-progress-bar-container avia_animate_when_almost_visible  avia-builder-el-3  el_after_av_textblock  avia-builder-el-last  av-striped-bar av-animated-bar avia_start_animation">
	<div class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Mantención de Campamentos, Edificios y Oficinas</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span> 
			</div>
			&nbsp&nbsp&nbsp&nbsp&nbsp<div class="progressbar-title">Aseo de:
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>			</div>
			<div class="progressbar-title">Campamentos</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span> 
			</div>
			&nbsp&nbsp&nbsp&nbsp&nbsp<div class="progressbar-title">Oficinas
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Áreas Comunes
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span> 
			</div>
			&nbsp&nbsp&nbsp&nbsp&nbsp<div class="progressbar-title">Servicios Higenicos
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span> 
			</div>
			&nbsp&nbsp&nbsp&nbsp&nbsp<div class="progressbar-title">Casas de Cambio
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span> 
			</div>
			&nbsp&nbsp&nbsp&nbsp&nbsp<div class="progressbar-title">Otras dependencias
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Gestión de Mensajería
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Administración de Edificios de Oficinas
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Lavado de Prendas Industriales
			</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 class="avia-progress-bar theme-color-bar icon-bar-yes">
		<div class="progressbar-title-wrap">
			<div class="progressbar-icon">
				<span class="progressbar-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
				</span>
			</div>
			<div class="progressbar-title">Mantenimiento Preventivo y Correctivo de Instalaciones
			</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>

Do you help me with the code change?

This reply was modified 7 years, 4 months ago by rwarner77.

November 30, 2016 at 10:57 pm #719017

Hey!

Please add this code in Quick CSS field and add “your-custom-class” in Clase CSS :)
If that does not work, please create a temporary admin login and post it here privately :)

Regards,
Yigit

December 1, 2016 at 2:08 pm #719232

Thanks Yigit
I can thank you and I can come

December 1, 2016 at 2:51 pm #719252

Hi,

User credentials did not work for me.
“ERROR: Nombre de usuario no válido. ¿Olvidaste tu clave?”. Can you please check once again? :)

Best regards,
Yigit

December 1, 2016 at 2:55 pm #719257

my error, tries again

December 1, 2016 at 2:59 pm #719259

Hey!

I applied the changes, please review your website now :)

Best regards,
Yigit

December 1, 2016 at 3:19 pm #719269

Perfect, just what I needed
thank you very much

December 1, 2016 at 3:27 pm #719278