Styling and placement of buttons

  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • 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: 5958
  • Karma: 119
  • Thank you received: 554

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: 3128
  • Karma: 105
  • Thank you received: 413

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
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • 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
  • Eddy.vh
  • Eddy.vh's Avatar
  • Away
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 327
  • Karma: 2
  • Thank you received: 51

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
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • 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: ForumSupport
Time to create page: 0.122 seconds

We Are Doing Our Part

Massive discounts on all of our extension subscription plans to help you and your business in these times.

Get Your Subscription Here

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!

News and Updates

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

All Extensions Subscription

We are doing our part and support your business with extremely low prices -- For example 6-Months-Subscription for only $9 USD. For as long as necessary.

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!