Best practice to edit css from theme installed as addon

Plone Support Add-on Development
14

... yes .... if I knew how:

Anyway: I did test this, works like this

  1. add Plone site.

  2. go to theming control panel, click on 'New theme'

  3. call it 'childtheme' or whatever.

  4. delete file 'index.html' (select it and click on the delete button'

  5. go to theming control panel and inspect barceloneta theme (or what ever theme you want to 'child theme'

  6. Clcik on manifest.cfg an copy all text below 'preview'

  7. go to your child theme's manifest.cfg and paste the text at the bottom, it should now look something like this:

    [theme]
    title = Childtheme
    description = My subclassed theme

    rules = rules.xml
    prefix = /++theme++parenttheme
    doctype =

    production-css = /++theme++parenttheme/some.css
    tinymce-content-css = /++theme++parenttheme/some.css

  8. save

  9. go to theming control panel, modify your theme and add a file my.css . Add the following to this file:

    body h1,
    body h2 {
    color: green;
    }

  10. Modify your child themes rules.xml to something like:

<?xml version="1.0" encoding="utf-8"?>
<rules xmlns="http://namespaces.plone.org/diazo"
       xmlns:css="http://namespaces.plone.org/diazo/css"
       xmlns:xhtml="http://www.w3.org/1999/xhtml"
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
       xmlns:xi="http://www.w3.org/2001/XInclude">
      <xi:include href="/++theme++parenttheme/rules.xml"/>
	        
  		<before css:theme-children="#mainnavigation-wrapper">     
        	<div>Lets add some html for the title</div>
		</before>
	<after theme-children="/html/head" >     
		   <link href="++theme++childtheme/my.css" rel="stylesheet"/>
	</after>
</rules>
  1. go to theming control panel. Disable and enable the childtheme

IMPORTANT NOTE: your parent theme should use:

  <theme href="++theme++parenttheme/index.html"/>

IF not, you will have to use your own index.html in the child theme

1 Like