Bienvenido, Invitado
Recordarme

TEMA:

Apply UiKit classes to individual form elements 1 año 2 días antes #249766

  • Autor del tema
  • NickV
  • Fuera de línea
  • Junior Breezer
  • Junior Breezer
  • Mensajes: 24
  • Gracias recibidas: 0
Hi...

I want to style a form completely using YooTheme Pro's UiKit classes.
Can I simply add the appropriate uk classes to each element?
Seems to work fine if I add the class using code inspector... just don't know how to add in the form!
getuikit.com/docs/form

I'm using Joomla 3.9.22.
Thanks

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Apply UiKit classes to individual form elements 1 año 2 días antes #249767

  • Avatar de tihana.krivic
  • tihana.krivic
  • Fuera de línea
  • Moderator
  • Moderator
  • Mensajes: 7376
  • Karma: 3
  • Gracias recibidas: 527
Hi,

you can add css for each element in your form->Advanced->More options->Form pieces->Before form->check custom:
echo '
<style>
//your css here
</style>
';

Let me know if you need more help

Regards,
Tihana
El siguiente usuario dijo gracias: NickV

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Apply UiKit classes to individual form elements 1 año 2 días antes #249776

  • Avatar de Eddy.vh
  • Eddy.vh
  • Fuera de línea
  • Ultimate Breezer
  • Ultimate Breezer
  • Mensajes: 664
  • Karma: 4
  • Gracias recibidas: 112
Hello,

You can add your custom class to your fields using javascript.

In your form, advanced options → more options → scripts :
Tick custom → click Create code structure and, between the braces, enter e.g.

PS: This text is translated with DeepL, it is possible that the correct terms are different from the translation!
ff_getElementByName('yourFieldName1').classList.add('your-class1');
ff_getElementByName('yourFieldName2').classList.add('your-class2');

like this :
function ff_FormName_init()
{
ff_getElementByName('email').classList.add('bf-email');
} // ff_FormName_init

Replace yourFieldNameX with your field names (not titles) and your-classX with your desired class.

Then, if needed, you can use the method described by Tihana to create your css but I guess it's already in your template.

Kind regards,
Eddy
El siguiente usuario dijo gracias: NickV

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Última Edición: Post by Eddy.vh.

Apply UiKit classes to individual form elements 7 meses 1 semana antes #255511

  • AngelaNerka
  • Fuera de línea
  • Fresh Breezer
  • Fresh Breezer
  • I am
  • Mensajes: 1
  • Gracias recibidas: 0
Thank you very much. Very useful in my case.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • Página:
  • 1
Tiempo de carga de la página: 0.053 segundos