Custom Panel CSS

The design of the Panel is as reduced as possible to focus on the content of you and your clients. If you want to spice it up a little or adjust it to your own branding, you can do that by adding your own CSS rules in a custom stylesheet file.

Any external stylesheet can be linked in your config file

// absolute links
c::set('panel.stylesheet', 'http://example.com/assets/css/panel.css');

// relative links
c::set('panel.stylesheet', 'assets/css/panel.css');

For security reasons it is not possible to include a custom javascript file.

2.3.0 +

Classes

There are some CSS classes that might be of special interest for you. First, all page edit forms have a class based on their blueprint attached: .form-blueprint-BLUEPRINTNAME. Second, all form fields feature a class with the pattern .field-name-FIELDNAME. Please note that this is the field name from the blueprint, not the field type.