Stylebooks: CSS 101

Finding the right class

Brushes, Public Domain Image from

Since Liferay introduced Stylebooks, the Best Practice for your installation has changed, to no longer deploy your own theme, but rather use a stylebook and change it to adhere to your Corporate Identity.

Using someone else's CSS classes is quite a task - in fact, even my own CSS classes from more than 1 day ago are hard to remember: Where exactly is the hyphen? Was the prefix "background" or "bg"? How many different shades of the brand color are there? 5? 10? 8?

If you're using the built-in Classic or Dialect theme: These themes have your back. Both come with a sample widget that you can add to any page, and see a usage sample, with all the vocabulary you need when you write a fragment and want to use the theme's (or rather, the stylebook's) styles.

But a page is not what you typically have available when writing a fragment? Well, neither did I.

So I've implemented a handy popup, that displays in the fragment editor, when either of those themes are in use. And you might want to use it as well: Find it on github.

Here's how it looks like for the Dialect theme:


Note the project's README: You'll also need to deploy two .config files to your system, in order for this plugin to work.


Thank you to Evan Thibodeau for letting me know about those sample widgets (and for rejecting my first brute-force idea for implementing this palette)

Illustration: Licensed Public Domain, from Flickr (


Good job Olaf !

Personnally, I would prefer to have this feature on all pages... why not put it in the main admin menu ?

But only visible for the omniadmin for example.

Hi Eric,

Thank you - I'm not sure what you'd do with individual CSS samples on _all_ pages, but you have options:

#1, the popups show widgets, that are available to you out of the box, and you can drop them on any page, and keep it open.

#2, You can change the condition for showing the ControlMenuItem. It's simple, and it's here: