Custom CSS

Rewards Fuel now allows you to customize CSS related to your contest.  This is a short document on how we allow you do to it as well as some best practices.

Classes & Ids
We use dynamic naming for our on page elements, we do this to ensure unique element ids on layouts with repetitive items e.g. prizes or entry methods.  Since IDs can change and often do we suggest not using them for your CSS.  Instead we suggest using only classes.  

LESS & Nesting
We use LESS to allow for dynamic colors in our CSS.  We also use LESS to ensure encapsulation of styles.  This does not mean that you have to use LESS, its just an option that is available to you; however because we use LESS all CSS that you apply to a given element is validated and applied to the specific element that you are adding the CSS to for example we wrap all classes in their given element's ID

#element_123{
     .custom_class{
          color:red;
      }
}

will end up compiling to:

#element_123 .custom_class{ color:red;}

More about nesting
You do not need to know the element id in the example above.  We take care of that part for you, you simply need to add the .custom_class{}.

CSS Validation
We validate all css that you attempt to add.  It MUST be validated in order to be added.  Adding custom CSS is a feature we suggest only for advanced users to take advantage of.