Styling and placement of buttons

  • baileynp
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 35
  • Thank you received: 1

baileynp created the topic: Styling and placement of buttons

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
#235841
Attachments:
  • Posts: 5789
  • Karma: 118
  • Thank you received: 532

MarioPuco replied the topic: Styling and placement of buttons

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

Satisfied with our Support ?
PayPal Tip
===============================================
Need to renew Pro Support?
Buy Here!
===============================================
Satisfied?
Consider a membership!
===============================================
Like us on Facebook
===============================================
#235845
  • Posts: 2428
  • Karma: 85
  • Thank you received: 330

mihaela replied the topic: Styling and placement of buttons

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
#235848
The following user(s) said Thank You: MarioPuco
  • baileynp
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 35
  • Thank you received: 1

baileynp replied the topic: Styling and placement of buttons

Hi

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

However, the buttons still appear in the same positions. :(
#235849
  • Posts: 174
  • Karma: 1
  • Thank you received: 18

Eddy.vh replied the topic: Styling and placement of buttons

Hello.
This should work
echo "
<style>
 .bfQuickMode .bfSubmitButton,  bfQuickMode .bfPrevButton bfQuickMode .bfNextButton , bfQuickMode .sppb-btn
{
     float: none !important;
     margin-left: 45% !important;
}
 </style>
";
#235851
  • baileynp
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 35
  • Thank you received: 1

baileynp replied the topic: Styling and placement of buttons

Well, it moved he submit button to the left, but the next and prev buttons are still in the same position. :)
#235853
Moderators: ForumSupporttomeperica
Time to create page: 0.173 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

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

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

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 to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here