Forum
Crosstec Forums
Coding - Consultancy - Ideas
CSS Tips & Tricks
Apply UiKit classes to individual form elements

TOPIC:

Apply UiKit classes to individual form elements 2 years 5 months ago #249766

  • Topic Author
  • NickV
  • Offline
  • Junior Member
  • Junior Member
  • Registered
  • 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 2 years 5 months ago #249767

  • tihana.krivic's Avatar
  • tihana.krivic
  • Offline
  • Moderator
  • Moderator
  • Registered
  • Posts: 12079
  • Thanks: 780
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
Satisfied?

❤️ Consider a membership! ❤️
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 2 years 5 months ago #249776

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Platinum Member
  • Platinum Member
  • Registered
  • Posts: 890
  • Thanks: 151
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.
  • Page:
  • 1
Forum
Crosstec Forums
Coding - Consultancy - Ideas
CSS Tips & Tricks
Apply UiKit classes to individual form elements
Time to create page: 0.048 seconds

Support Chat

Join our Discord chat and enter the Crosstec channels for live-support, chat forums and interact directly with the community!

After joining, please enter the Crosstec Area and use the #crosstec-support or #crosstec-general channels.

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

Subscribe to news and updates!

Special Offer

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!

Live Support Chat Opened!

Join our Discord chat here and enter the Crosstec channels to receive live support and talk directly to the team!