Getting Started: Plone Theming - Part II

Logo and CSS/Less variables 
There are some simple changes we can make, and very quickly make in the Control Panel.

Replacing the default logo with your own

  1. Create/acquire your logo:
    You will want tto make this a png or gif file,
    It will need to be scaled to the size that you want, say about 100px by 100px
  2. Go to the Site Setup control panel > Site ;
  3. Click "Browse..." under the Site Logo section;
  4. Browse, select and open your logo;
  5. Click save at the bottom; and
  6. voilá!

Customise CSS/Less variables

You can learn more about these later on. here we will show you how to make a few simple changes and you can explore further at your convinence.

  1. Its probably easiest if you open a new browser tab/window on your site;
    Refresh this page to see the changes as you make them; 
  2. Go to the Site Setup control panel > Resource Registries ;
    You will see a number of tabs:
    Resource Registry Tabs
  3. On the Registry tab, check Development Mode;
  4. In the plone Bundle click Develop CSS;
  5. Click Save;
    Develop CSS
  6. Go to the Less Variables Tab
  7. Change some variables:
    Say change: plone-left-toolbar-expanded fro 120px to 180px
    TODO: What are all these variables? Are there more you can change?
  8. Click Save;
  9. Refresh your site page:
    120px180px
  10. Fin!
  11. well almost ... you should turn off (uncheck) Developer Mode and Click Save, when you are finished!

 

Part: 1 2 3 4 5