Customizing Logo And CSS Of Default Theme

In this section you will:

  • Use the Site control panel to add a custom logo
  • Customize the look of a Plone site by adjusting Less Variables
  • Add a custom toolbar logo

Topics covered:

  • The Site control panel
  • The Resource Registries Control Panel
  • Resource Registries > Development Mode

Customize CSS/Less Variables

  1. Go back to the Control Panel.
  2. Go to the Resource Registries control panel.
  3. On the first tab: enable Development Mode.
  4. In the “plone” bundle below, click on develop CSS.

Your panel should now look like this:

Picture of enable dev-mode

Now we can play with some Less variables:

  1. Go to the Less Variables tab.
  2. Find the variable plone-left-toolbar-expanded and set it to 400px.
Picture of changing less variables
  1. Hit the Save button in the upper right and reload the page.
  2. Go back to the Registry tab and hit the Build button for the plone bundle.
  3. Click on the toolbar logo to expand the toolbar: voilá!

You can play around with some other variables, if you want.

Warning

“Development Mode” is really expensive for the browser. Depending on the browser and on the system, you might encounter extreme slowness while rendering the page.

You could see an unthemed page for a while. Remember to switch it off as soon as you finished tweaking.