Customize Product with CSS

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Search 3B Knowledge Base

You are here:
< Back

Why add CSS?

CSS is what makes one web page look good or bad. It allows you to change everything visual and has the most impact on User Interface. Good CSS can increase user adoption! This is why we believe that our clients should also be able to add their own CSS to suit their taste.

How does it work?

Every Visualforce Page that originates from the 3B Forms product has native CSS and JS included in order to provide a good UI and UX. However, something that few people know is that you can actually add your own CSS and JS by using Salesforce’s Custom Metadata Types. Once you define a Metadata Record, 3B Forms will attempt to inject the CSS File into every page that originates from the package.

What is needed?

Knowledge of CSS and 3B Forms, of course. Oh, and a Static Resource.

Follow these steps to add your very own CSS Files to 3B Forms:

  • Create a *.css file locally on your machine. Put your favourite code inside.
  • Create a new Salesforce Static Resource
    • Navigate to Setup
    • In the Quick Find box, type “Static Resources”
    • Create a new Static Resource and give it a memorable name. Make sure to select Cache Control: Public!
    • Save the static resource.
  • Head over to Custom Metadata Types  to tell 3B Forms which resource you want to use
    • Navigate to Setup
    • In the Quick Find box, type “Custom Metadata Types”
    • You should see one record called Product Customization

  • Click on Manage Records to create new entry.
    • Give the record a Name & Label (really doesn’t matter how you name it!)
    • In the field “CSS Static Resource Name” put the name of the static resource you created earlier
    • Make sure that the field “Active” is checked
    • Save the record

That’s it! Now, 3B Forms will include your CSS File on every page that originates from the app!


  • If you do not want 3B Forms to inject specific CSS Files, just un-check the field “Active”
  • You can have multiple CSS files inserted at the same time

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

3B Initiative

Jonathan B – 5 Stars

Get this and simplify your processes Thank you for your review, Jonathan, a happy little acacia tree is planted in your name! The exact coordinates

3B Initiative

Andy K – 5 Stars

Makes forms easy Thank you for your review, Andy, a happy little acacia tree is planted in your name! The exact coordinates of the tree

3B Initiative

Matthew W – 5 Stars

Best Free Forms Product on the AppExchange Thank you for your review, Matthew, a happy little acacia tree is planted in your name! The exact

Innovate, improve, empower. We believe engaged and happy customers make great partners, and see continuous feedback and collaboration as key levers in our shared drive for success. You need a small customisation to fit that nonconforming process step you have? We are more than happy to offer it free of charge. You have a recommendation for improvement/feature implementation? We are happy to listen, and will issue you with a special certificate to credit you for an idea that goes into the product.

As (we hope) you probably guessed yourself already – we want to be the single most flexible and customer-friendly forms solution on the market.