TOPIC:

Styling and placement of buttons 1 year 2 months ago #235841

  • Topic Author
  • baileynp
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 76
  • Thanks: 1
Hi

I'd like to style my BF buttons in the same style as used by my template.

Looking through the forums, I found a post which suggested using a JQuery function to remove and add classes. So, using my very limited knowledge of CSS, I could see what class my template buttons are, so I added this to my form init:

jQuery('#bfSubmitButton').removeClass('bfSubmitButton').addClass('sppb-btn sppb-btn-default sppb-btn-rounded sppb-btn-outline');

.. and hey presto! My submit button now looks like the attachment.

So, I added the same code for bfNextButton and bfPrevButton, but this didn't do anything. :(What am I missing here?

Also, is it possible to group the three buttons (prev, submit, next) in the centre of the form?

And finally, how do I add font awesome icons to the button texts?

If I say the Crosstec support team are the best in the world, will this prioritise my call? :P
Attachments:

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

Styling and placement of buttons 1 year 2 months ago #235845

  • MarioPuco's Avatar
  • MarioPuco
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 5958
  • Karma: 119
  • Thanks: 554
Hi,

The fact you did compliment us did not put you on the top of the priority list :)
Please try to add this to your Initialization script :
jQuery('button').addClass('sppb-btn sppb-btn-default sppb-btn-rounded sppb-btn-outline');

Regarding how to center the buttons please add this to your Before Form :
echo "
<style>
 .bfQuickMode .bfSubmitButton .bfPrevButton .bfNextButton 
{
     float: none !important;
     margin-left: 45% !important;
}
 </style>
";


Let me know if this worked.

Regards,
Mario

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

Styling and placement of buttons 1 year 2 months ago #235848

  • mihaela
  • Offline
  • Developer
  • Developer
  • Posts: 3128
  • Karma: 105
  • Thanks: 413
Hello,

Here is an explanation of why this is not working.

If you inspect the elements in your form, you will see that the submit button has the id "bfSubmitButton". That is you can fetch it using this:
jQuery('#bfSubmitButton')

On the other hand, previous and back buttons don't have the id defined. They only have type and class defined.

Therefore, please try to use the following code to fetch these fields by class instead of id and change their class:
jQuery('.bfNextButton').removeClass('bfNextButton').addClass('sppb-btn sppb-btn-default sppb-btn-rounded sppb-btn-outline');

Let me know whether it worked.

Regards,

Mihaela
The following user(s) said Thank You: MarioPuco

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

Styling and placement of buttons 1 year 2 months ago #235849

  • Topic Author
  • baileynp
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 76
  • Thanks: 1
Hi

The problem with the styling is fixed. Thanks. :)

However, the buttons still appear in the same positions. :(

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

Styling and placement of buttons 1 year 2 months ago #235851

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Gold Breezer
  • Gold Breezer
  • Posts: 357
  • Karma: 3
  • Thanks: 59
Hello.
This should work
echo "
<style>
 .bfQuickMode .bfSubmitButton,  bfQuickMode .bfPrevButton bfQuickMode .bfNextButton , bfQuickMode .sppb-btn
{
     float: none !important;
     margin-left: 45% !important;
}
 </style>
";

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

Styling and placement of buttons 1 year 2 months ago #235853

  • Topic Author
  • baileynp
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 76
  • Thanks: 1
Well, it moved he submit button to the left, but the next and prev buttons are still in the same position. :)

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

Moderators: ForumSupport
Time to create page: 0.110 seconds

Summer Sale!

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!