Salesforce is slowly giving us the ability to customise our instance to make it feel more like our own. The Lightning Experience is bringing in some real changes to allow us to customise the look, feel and experience either across the whole Org or on a per profile basis. In the upcoming Winter ’18 release, Salesforce are making some minor appearance changes including the ability to add a background image, as well as removing a lot of the white space for less scrolling. But for those that want to add a little more pizzaz to your environment, meet Ceterna Lab’s Theme Builder.
The Theme Builder allows you to completely customise the colours that are applied to Salesforce right down to the tiny details, below you can see an example I made earlier for a famous drinks brand. The colours you can customise include the header, buttons, tabs, tables and pretty much any text on the page. Currently this works the best with Lightning Experience, but will change some colours on classic.
Creating a theme is easy and uses two elements, you must first create your customised look by accessing the Theme Builder, then load it locally onto your computer using the Lightning Restyler Chrome extension. As you might have guessed by now, the Theme Builder loads locally onto your computer so you don’t need ask permission from your manager or Administrator to carry this out.
Step 1 – Create a theme
Go to the Ceterna Labs Theme Builder and start creating your theme. You can use the tabs on the left hand side to access different sections of the standard Lightning page and choose the elements you wish to customise. You can either use the colour wheel to pick your custom colours to load onto the theme, or for a bit of precision you can use the Hexadecimal values from your branding. As you start choosing different colours, you will see the display update.
Tip – If you don’t know the hex values, you can use a site like HTML Color Codes to load your logo in and find out the correct values.
Step 2 – Applying the theme
Once you’ve created a theme using the Theme Builder, now it’s time to apply. Head over to the Lightning Restyler Chrome extension and quickly install that into your browser. Once it’s installed, it’s as easy as clicking onto the extension, hitting add, and then pasting the code that you should have saved earlier.
Once added you can select the theme you wish to use, login to Salesforce and let the Lightning Restyler do the rest!
If you would like to read more about the Theme Builder/Lightning Restyler, head over to Ceterna Lab’s release post.