Contents

Custom CSS Styling

Use Custom CSS for the few styling details that are not covered by Lay Theme settings.

Before writing CSS, check the built-in controls first. Buttons are handled by the Button Manager. Page-specific site title, menu, burger and menu bar colors are handled in Page Settings.

Global CSS

Go to Lay Options → Custom CSS & HTML when your CSS should affect the whole website.

Custom CSS and HTML fields in Lay Options
  • Custom CSS affects the website globally.
  • Custom CSS for Desktop Version is only loaded for desktop layouts.
  • Custom CSS for Mobile Version is only loaded for mobile layouts.
  • Custom HTML at top / bottom can be used for snippets that need to be inserted into the page head or body.

Page specific CSS

If the CSS should only belong to the current page, project, news post or product, use the CSS dropdown in the Gridder header.

CSS button in the Gridder toolbar

Edit CSS is used for all devices. Edit Desktop CSS and Edit Phone CSS let you write layout-specific CSS for the current layout only.

Use built-in settings first

If one page needs different colors for the site title, menu, menu mouseover state, menu bar or burger icon, open Page Settings in the Gridder header. Page Settings can also hide the site title, menu or footer for one page.

If you need styled text links or buttons, use Buttons and Textformats. If the phone layout needs to differ from desktop, use Custom Phone Layouts.

When Custom CSS is useful

Custom CSS is still useful for very specific styling that does not have a setting yet, third-party embeds, custom classes, or small project-specific details.

To write Custom CSS comfortably, it helps to know HTML, CSS and your browser's inspector. Good starting points are MDN Learn HTML, MDN Learn CSS, web.dev Learn HTML, web.dev Learn CSS and freeCodeCamp Responsive Web Design.