How to add your own CSS to the site

← Back

Create a service section with the “Custom CSS” module and access for administrators only — its page has a CSS editor, and the styles are applied to all pages of the site.

  1. In the “Site structure” section, click “Add main item” and name the section, for example “My CSS”.
  2. In the “Module” field, use “Select” to find the “Custom CSS” card (code custom_css).
  3. “Access level” — “Administrators only”. Save.
  4. Open this section. On the first opening you'll see “The site CSS file has been created. It is loaded last on all pages of the site.”.
  5. Write your rules in the editor. Tab — indent, Shift+Tab — remove indent.
  6. Click “Save” or press Ctrl+S. The changes are visible on the pages after refreshing.

The file is loaded last on every page, so it overrides the engine's styles when selector specificity is equal. But settings from the block's style window (gear icon) are written directly into the block — only !important overrides them.

The file is stored among the site's files and is included in the backup and in the template.

If it didn't work

  • The styles hid or broke the page. Click “Without my CSS” in the editor — it will open without your styles. On any page of the site, the same effect comes from adding ?nocustomcss=1 to the address (works for the administrator only).
  • “File changed”. The file was changed in another tab or by another administrator. You can overwrite it with your text, or decline, copy your text and refresh the page.
  • “CSS file is too large”. The limit is 512 KB. Remove what you don't need; insert images as links rather than as code inside the CSS.
Did the article help?

See also

How to set a logo and faviconBoth images are uploaded in the settings of the “Logo” informer — via the “Logo” and “Fav icon” fields.How to style a block: border, background, padding, shadowHover over a block and click the gear icon — a styles window opens with the tabs “Border”, “Block”, “Text”, “Links”, “Animation”, “Positioning”.How to add a counter or third-party widget to all pagesThe “About site” tab in general settings, the “Widget HTML code” field — the code is inserted on every page of the site.What are informers in the menuThese are small widgets that sit in the menu alongside regular items: logo, cart, search, language switcher, chat and others.

In the help section, you will find answers to frequently asked questions and useful instructions for working with the Site Look website builder. Here you can learn how to manage sections, add objects, and configure the website. The materials will be useful for both beginners and experienced users. If you haven't found an answer, contact support.