Following the Plone 5 Theming tutorial results in an unthemed Plone

I followed the tutorial here:

https://training.plone.org/5/theming/theme-package.html#

But when I install the newly created theme, it results in an unthemed Plone. Even the Plone Control Panel is unthemed. Any suggestions?

(Plone 5.0.7 on Ubuntu 16.04.2 LTS)

For theme-related issues, here's a quick-and-dirty checklist, in progressive order, ie. later steps require successful completion of previous steps:

  1. does the theme install in Plone without errors?
  2. does it show up in theming (part of) control panel?
  3. does is show up as the currently selected theme in the theming control panel?
  4. do the visual changes show up on the site?

Am I correct in assuming you have successfully checked steps 1-3 but at step 4 you see no visual changes at the site?

If that's the case, there's something wrong in the internals of your theme (typically the diazo rules). If you want help with that, people would have to see your theme-related files (especially the diazo rules, probably the html templates as well).

Hi Petri,

Regarding your questions:

  1. Yes, no errors
  2. Yes, it does appear as an Add-on Product and after installing it appears in the Theming control panel
  3. Yes, after installing the theme it shows up as the active theme
  4. The visual changes after activating the theme are an unthemed Plone site and unthemed control panel

So yes I do see visual changes, as the site becomes unthemed,.

It is my understanding that following the tutorial (or creating any theme using mr.bob / bobtemplates selecting Theme as the Plone add-on to be genereted) should result in a new theme that is basically a copy of the Barceloneta theme. I did not make any changes yet to the diazo rules or anything else.

I also tried creating a new theme in an existing site, by including the required mr.bob stuff in buildout.cfg and creating the new theme from the src directory (../bin/mrbob -O my.theme bobtemplates:plone_addon) etc.... giving me the same results. Here is a screenshot:

Maybe this will help you

first thing to check is probably if the index.html (or whatever you define in rules.xml) is loading (add some html to it, like

 <div>XXXXXXX</div>

to check (remember to clear the cache, or disable enable the theme)

Then, check CSS urls, maybe check if "++theme++sometheme/sothing.css" should be "/++theme++something.css" (or the other way around.

The first thing I check is whether there are any errors in your browser console.

It might help too if you could share the theme files you're working with.

index.html is loading, which is also demonstrated by the screenshot I posted. The default index.html created by mr.bob / bobtemplates includes:

Custom Plone theme based on Baceloneta

which is properly rendered.

CSS url is showing the CCS file

No errors in the console

The theme files are nothing but what is generated by following the tuturial step-by-step. I did not change a single thing.

It would be helpful if somebody could follow the tutorial too and see if it results in a good working Bareceloneta based theme, or if they encounter the same issue as I.

I just noticed that the Barceloneta theme becomes visible after "grunt watch" and touching a file in barceloneta/less..... this leaves me a bit confused as why it did not show up in the first place....

1 Like

Have you noticed this note :wink: :

Don’t forget to run grunt compile in your package root, after you changed the LESS files or use grunt watch to do this automatically after every change!

I ran into an issue when running buildout, which I was able to resolve by specifying the version for flake8.

I got confused by this step, Download and prepare a static theme:

Let’s start with an untouched static theme, such as this bootstrap theme: http://startbootstrap.com/template-overviews/business-casual/. Just download it and extract it into the theme folder. Replace the index.html with the one in the downloaded theme:

When I extract it into the theme folder, my structure is different, where there is a folder within the theme folder, startbootstrap-business-casual-gh-pages. Am I supposed to move only a few files from startbootstrap-business-casual-gh-pages into theme?

Sounds like something they added to support GitHub pages.

Don't know if you've seen it, but our GSoC 2016 student @vicodin created this: https://github.com/collective/plonetheme.business_casual (more are listed at https://plone.org/download)

OK, I'll try that.

Nonetheless, the instructions I quoted could use some clarification. Should I file an issue in the Training repo?

That would be perfect! Thx!

Done, and done. I uploaded the theme through the Theming control panel, and I now have something to play with.

As far as @Eric's issue, I could not reproduce it after running through the setup.

1 Like