Applying a custom CSS 'palate' to an interface

Platform Suggestions & Feedback
#1

We had a really useful session with Paul Edmonds looking at we can do with the current custom CSS functionality in the create platform. We have been musing on this since and wondered if there was any thought being given to adding the ability for organisations to create a custom palate that can then be applied to their interfaces. The idea being that instead of having to specify the custom css for each and every element, widget, and page you would create your palate, load it into the host then every page you built would have all of the predefined fonts, colours and branding available by default. An extension to the current theming function effectively.

#2

Hi Richard,

I am not an expert on the theming side but…
In BS > Interface > Theming, we have the 6-colour palette. “Primary Color” etc. Is this what you mean but just with more colours?

(I think it is possible to have an “Early Style Sheet” containing SCSS that sets any number of bootstrap variables which I suspect can be used to conveniently setup a broader palette. But admittedly this is advanced and probably not the approach you are looking for).

Paul

#3

Sort of. Being able to set your corporate theme up for all ‘elements’ of a page. At the moment the theming is set at quite a high level and for quite basic visuals. For example, out website buttons have graduated colours applied to them and we would like to replicate this in our builds. Whilst we are able to do this with custom CSS, it has to be applied to each button individually and can’t be added to the theme.

#4

Hi Richard

I’m Interaction Designer at Croydon Council and I have worked on a method for theming our application pages.

Here’s a simplified summary of our approach.

  1. We created a theme in:

Build Studio > Interface > Theming > Your Theme Name

We apply some base colour and font settings here as fallbacks but most of them are overridden by CSS in the next steps.

  1. Within the theme we use the ‘Early Stylesheet’ field to import assets:
  • We use the @import rule to import brand font(s) from our servers
  • We use the @import rule to import a google font
  • We use the @import rule to import font awesome font from our servers, for some custom icons
  • We have a compiled Bootstrap 4 theme CSS file that is used on our main website and design system, we use the @import rule to import this CSS file

The above imports override some (but not all) of the default Liberty Create styling.

After the above imports are loaded (front end), the Liberty Create CSS is loaded, so we have to follow the next step to override those styles.

  1. In the ‘Late Stylesheet’ we have our own custom CSS that is specific to Liberty create.

The CSS included in here overrides Liberty Create default styling that is applied after #2.

Note you cannot use @import in the ‘Late Stylesheet’ because the import loads before #2 and fails to override Liberty create styles.

  1. I created a style guide page containing the most commonly used components and use this to test and develop the custom CSS applied in #3

Things to look out for:

• You must set up your app firewall settings to whitelist any domains that you are importing assets from
• As you introduce new components and patterns you will need to continue to develop your custom CSS used in #3
• Some components in Liberty Create are rendered in iframes, for these you must set them to use ‘unframed’ otherwise CSS has no effect on them

Hope that helps

1 Like
#5

Hi Dave,

THank you for this. I have forwarded it onto our CSS expert to have a go at setting up. If we get stuck I’ll ask him to get in touch with you, if that’s ok?

regards,

Richard

#6

Hi Richard, yes of course that’s fine happy to share if it helps you out