Problem with Barceloneta theme

Plone Support Customizing Plone
1

Hi!

I followed the many advices that the easiest way to learn theming in Plone 5 is to copy the Barceloneta theme and start customizing from there.
Now I have a theme that pleases me, but when I upgraded to Plone 5.0.3 I could not get the new improvements of the Barceloneta theme, for instance, the lead image properly centered in the modal pop-up, to be replicated in my theme.

In the old days of 'portal_skins', I used to have a "ploneCustom.css" that just overrides the few css I want to change, so when upgrading the Plone version, the "new" css is always applied.

How can I do the same with Plone 5, i.e., use Barceloneta as a 'base' theme, just change a few lines of css, and still have all the "fresh" css when upgrading?

Thanks.

2

that is an interesting question!

but actually it should be easy:

depend (somehow [1]) on plonetheme.barceloneta/plonetheme/barceloneta/theme/less/barceloneta.plone.local.less, and you get the latest changes. you might want to look into this file and maybe depend on barceloneta.plone.less instead.
You can also xinclude plonetheme.barceloneta/plonetheme/barceloneta/theme/rules.xml or backend.xml.
You cannot depend on the index.html template, as far as I know.

[1] You can depend on these files via hardcoded fullpath from a plonetheme.barceloneta checkout. It might work with depending on a github "CDN" url like done in barceloneta.plone.local.less file, if less can handle this. Or maybe environment variables. Or using traversal paths like ++theme++barceloneta/.......

1 Like
3

you can refer to mockup and its bowerpath using lessvariables defined in the registry in CMFPlone:

      <element key="bowerPath">\"{site_url}/++plone++static/components/\"</element>
      <element key="mockupPath">\"{site_url}/++resource++mockup/\"</element>
      <element key="mockuplessPath">\"{site_url}/++resource++mockupless/\"</element>'

like so in your custom less

@import "@{bowerPath}/bootstrap/less/variables.less";
@import "@{bowerPath}/bootstrap/less/mixins.less";
@import "@{bowerPath}/bootstrap/less/labels.less";

but there is no variable for barcelonetta. we may want to add one?

4

@thet, @jensens

I appreciate your replies, but can you please explain your thoughts in more detail, so that someone who is not proficient with these new concepts like Less, Diazo, etc, be able to fully understand?

The directives in manifest.cfg
development-css =
production-css =
does not help?

When you talk about bowerPath and mockupPath is only as a exemple, right?

5

Did you follow the Theming Training and does it answer your questions about your initial problem?
http://training.plone.org/5/theming/index.html

6

I did not, but, you see, this is something that we used to be able to do since Plone 1.0....
do I need to say more??

7

It's just CSS, html.

easiest way to just provide overrides is to:

  1. add css file named "custom.css"
  2. add <link rel="stylesheet" href="custom.css"> to your index.html file in the head section
  3. make sure the to use before rules in your rules.xml file so you can ensure custom.css is always added after all the other css.

change:

<after css:theme-children="head" css:content="head link" />
<after css:theme-children="head" css:content="head style" />

to:

<before css:theme-children="head" css:content="head link" />
<before css:theme-children="head" css:content="head style" />
8

<before css:theme-children="head" css:content="head link, head style" /> should also work

9

Hi, thanks, but I'm not quite sure what you mean, should I add the file and change the index.html and rules.xml in my theme or in Barceloneta?
Because if it is in Barceloneta, all my changes will be lost when there's a new Plone version, right?