Customize Product with CSS

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!

Note:

  • 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