CSS in Ultimate Forms for Ultimate Control
Phil Gold
Phil Gold
December 05, 2019 | Products

There’s no question that Ultimate Forms’ modern form designer provides a tremendous ability to configure forms right out of the box. And the addition of the “custom styles” controls adds a lot more fine-tuning capabilities than previous versions of the tool.

However, there are some things where the ONLY way you can change appearance or behavior is by actually changing the CSS itself. For instance, if you use tabs or accordion sections, you cannot modify their color, font, etc. using the standard toolset.

There are actually a few advantages to using CSS for styling:

  • Not all CSS attributes are available for modification using the custom styles settings
  • Changes to CSS elements are carried over to all tabs or sections, instead of being container specific as with custom styles settings
  • If you want to inactivate a modification, you can do so in CSS without deleting the code – just mark it as “memo” until you need it again, instead of deleting a style and having to recreate it

The trickiest part of modifying CSS, to me at any rate, is identifying exactly which element to modify. I’ve gotten a lot quicker at it with practice, though – so, my belief is that in time it will be much simpler and quicker than it is for me currently.

But, once you’ve got the right element, you can experiment with changes in the developer Styles panel; once you find the combination you want, you can copy the code from there and paste it into the form designer’s CSS window.

One thing to note – at this time, the UF CSS window will strip line breaks and indents from your code, so it will not have the standard CSS formatting conventions. Everything still works, it just looks a little different.

And that’s a small price to pay for the flexibility and control you get in return! Take a look at a “before and after” comparison of a form I’ve been working with:


You have to admit, that’s pretty impressive.

There’s a video online that provides an illustration of working with this feature that you may want to check out. And for those who are interested, here’s the exact code I used in my example above (in the truncated formatting, but including the rounded corners on the tabs):

.impactTabs .nav-tabs>li.active>a, .impactTabs .nav-tabs>li.active>a:focus, .impactTabs .nav-tabs>li.active>a:hover { background-color: #e4c189 !important;color: #fff !important; }

.impactTabs .nav-tabs>li>a { color: grey;  border-radius: 20px 20px 0px 0px;border-right-width: 1px !important;border-right-color: darkgrey !important; }

.impactTabs .nav-tabs { border-right-width: 1px !important;border-bottom-width: 0px;margin-bottom: 0px; }

.tab-content .cont { background-color: #e4c189 !important;padding: 10px 5px 0px;margin-top: 0px;}

In the right hands, this is tremendously powerful – it gives you complete control over the look and feel of your forms, letting you create a UI that is able to adhere to the most stringent design specs, and that makes the users’ job easier, too.

Loading...

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.

UltimateForms

Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com

Related Topics

What is right for you?

Online Trial

Not ready to install yet? Create a trial site in our environment
  • Full control of the site and its settings
  • Optionally pre-install one of our solution templates
  • Site provisioned instantly
  • Automatically removed after 30 days
  • Available to everyone!

Error!

There was an error processing your request.
Please contact us for further details.

Installation

Install in your own environment, on Microsoft 365 and on premises
  • Start working with real users and data
  • Install online or on premises
  • Register for 30 day trial
  • Seemlessly convert to paid license
  • Requires administrator permissions

Success!

Download link has been emailed to .
If you do not receive it within 5 minutes, please check your spam.
The link is valid for 72 hours.
If you are having problems, please contact us.

Error!

There was an error processing your request.
Please contact us for further details.
Technical details:

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.