Loading...

Customize Plone 5 default theme on the fly

Updated 2015-02-15: I finally update to work with the latest Plone 5 releases.

When I recently wrote about, how to reintroduce ploneCustom for Plone5 TTW (through the web) by yourself, I got some feedback that it was the wrong thing to do. And the correct way would always be to create your custom theme.

If you are ready to let the precious ploneCustom go, here's how to currently customize the default Barceloneta theme on the fly by creating a new custom theme.

Inherit a new theme from Barceloneta

So, let's customize a brand new Plone 5 site by creating a new theme, which inherits everything from Barceloneta theme, yet allows us to add additional rules and styles:

  1. Open Site Setup and Theming control panel.

  2. Create New theme, not yet activated, with title mytheme (or your own title, once you get the concept)

  3. In the opened theme editor, replace the contents of index.html with the following code, and Save the file after changes:

    <!doctype html>
    <html>
      <head>
        <title>Plone Theme</title>
      </head>
      <body>
        <section id="portal-toolbar">
        </section>
        <div class="outer-wrapper">
          <header id="content-header" role="banner">
            <div class="container">
              <header id="portal-top">
              </header>
              <div id="anonymous-actions">
              </div>
            </div>
          </header>
          <div id="mainnavigation-wrapper">
            <div id="mainnavigation">
            </div>
          </div>
          <div id="above-content-wrapper">
              <div id="above-content">
              </div>
          </div>
          <div class="container">
            <div class="row">
              <aside id="global_statusmessage"></aside>
            </div>
            <main id="main-container" class="row row-offcanvas row-offcanvas-right" role="main">
              <div id="column1-container">
              </div>
              <div id="content-container">
              </div>
              <div id="column2-container">
              </div>
            </main><!--/row-->
          </div><!--/container-->
        </div> <!--/outer-wrapper -->
        <footer id="portal-footer-wrapper" role="contentinfo">
          <div class="container" id="portal-footer"></div>
        </footer>
      </body>
    </html>
    
  4. Then replace the contents of rules.xml with the following code, and Save the file after changes:

    <?xml version="1.0" encoding="UTF-8"?>
    <rules
        xmlns="http://namespaces.plone.org/diazo"
        xmlns:css="http://namespaces.plone.org/diazo/css"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xi="http://www.w3.org/2001/XInclude">
    
      <!-- Import Barceloneta rules -->
      <xi:include href="++theme++barceloneta/rules.xml" />
    
      <rules css:if-content="#visual-portal-wrapper">
        <!-- Placeholder for your own additional rules -->
      </rules>
    
    </rules>
    
  5. Still in the theme editor, Add new file with name styles.less and edit and Save it with the following content:

    /* Import Barceloneta styles */
    @import "++theme++barceloneta/less/barceloneta.plone.less";
    
    /* Customize navbar color */
    @plone-sitenav-bg: pink;
    @plone-sitenav-link-hover-bg: darken(pink, 20%);
    
    /* Customize navbar text color */
    .plone-nav > li > a {
      color: @plone-text-color;
    }
    
    /* Customize search button */
    #searchGadget_form .searchButton {
      /* Re-use mixin from Barceloneta */
      .button-variant(@plone-text-color, pink, @plone-gray-lighter);
    }
    
    /* Inspect Barceloneta theme (and its less-folder) for more... */
    
  6. Finally, while you still have the styles.less open, you should be able to click Build CSS-button to build the currently oen LESS file into complete styles.css into your theme. (And you can use the same button to recompile your styles after any change or addition.)

    Note: Before Plone 5.0.2 you need to Add new file styles.css before building the CSS. On 5.0.2 just clicking the build is enough.

But before activating the new theme, there's one more manual step to do: Add production-css setting into your theme's manifest.cfg to point to the compiled CSS bundle:

[theme]
title = mytheme
description =
production-css = /++theme++mytheme/styles.css

Now you should be ready to return back to Theming control panel, activate the theme, and see the gorgeous pink navigation bar:

http://4.bp.blogspot.com/-PPj1JGOUNDY/VWJsTW6_76I/AAAAAAAAApw/K31MZDUf8-c/s1600/result.png