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:
Open Site Setup and Theming control panel.
Create New theme, not yet activated, with title mytheme(or your own title, once you get the concept)
In the opened theme editor, replace the contents of index.htmlwith the following code, and Save the file after changes:
<!doctype html>
<html>
<head>
<title>Plone Theme</title>
</head>
<body>
<sectionid="portal-toolbar">
</section>
<divclass="outer-wrapper">
<headerid="content-header"role="banner">
<divclass="container">
<headerid="portal-top">
</header>
<divid="anonymous-actions">
</div>
</div>
</header>
<divid="mainnavigation-wrapper">
<divid="mainnavigation">
</div>
</div>
<divid="above-content-wrapper">
<divid="above-content">
</div>
</div>
<divclass="container">
<divclass="row">
<asideid="global_statusmessage"></aside>
</div>
<mainid="main-container"class="row row-offcanvas row-offcanvas-right"role="main">
<divid="column1-container">
</div>
<divid="content-container">
</div>
<divid="column2-container">
</div>
</main><!--/row-->
</div><!--/container-->
</div><!--/outer-wrapper -->
<footerid="portal-footer-wrapper"role="contentinfo">
<divclass="container"id="portal-footer"></div>
</footer>
</body>
</html>Then replace the contents of rules.xmlwith 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:includehref="++theme++barceloneta/rules.xml"/>
<rulescss:if-content="#visual-portal-wrapper">
<!-- Placeholder for your own additional rules -->
</rules>
</rules>Still in the theme editor, Add new file with name styles.lessand 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... */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 filestyles.cssbefore 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:
Clik here to view.
