TOPIC:

Apply UiKit classes to individual form elements 7 months 4 weeks ago #249766

  • Topic Author
  • NickV
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 24
  • Thanks: 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

Please Log in or Create an account to join the conversation.

Apply UiKit classes to individual form elements 7 months 4 weeks ago #249767

  • tihana.krivic's Avatar
  • tihana.krivic
  • Offline
  • Moderator
  • Moderator
  • Posts: 6086
  • Karma: 3
  • Thanks: 429
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
The following user(s) said Thank You: NickV

Please Log in or Create an account to join the conversation.

Apply UiKit classes to individual form elements 7 months 4 weeks ago #249776

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 650
  • Karma: 4
  • Thanks: 108
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
The following user(s) said Thank You: NickV

Please Log in or Create an account to join the conversation.

Last edit: Post by Eddy.vh.

Apply UiKit classes to individual form elements 3 months 1 week ago #255511

  • AngelaNerka
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • I am
  • Posts: 1
  • Thanks: 0
Thank you very much. Very useful in my case.

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.048 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!