I want to use plonetheme.booster and change some css in it.
I installed it as an addon. The zip version is not the preferred option for me, because it does not have the slider function, due to limitations. So no TTW edit
What is the best approach? If I change the css inside the egg and the product receives an update, I understand I would loose my modifications.
Should I copy this egg from buildout-cache to src folder and delcare it as a developer egg? I tried this, but buildout returned an error. It seems to be missing a parent folder with setup.py. I don't know if I need to use mrbob to create a theme then copy all the content from booster to it (seems dumb to me).. I found no doc on how to download an egg directly from github to my src folder, thus allowing me to develop over an existing addon.
Last question, can I create another product to have my customizations and use it side by side with the theme addon? I mean, have two theme addons applied at the same time? In this case I would like to override some of booster addons...
Can you use the theming control panel to copy the theme and then modify the copy?
It's true that the add-on looks at the contents of the slider-images folder but you can use the ZIP installation and modify the css manually to add whichever images you want to have appear in the slider (was just looking at that this weekend).
I tried that. But there are some issues with the zip installation. Differently from the addon, the image for the slider is a background image and is not responsive (I even added an issue in github). I thought it would not be easy to use the slider, otherwise the creators of the theme would not mention this limitations. But I will take a look at your approach.
I just cloned the product to my src directory and installed it as an development egg. I am making my modifications in main.css. It would be better to do it in a separate file, so I can update and don't have to go through all the diff thing. But I still do not know how to register these new css, but it should not be difficult.
I dont know a lot about Plone 5 internals, I know it may sound dumb what I say, but from a user perspective, there should still exist a TTW to add ccs in top of all my addon installed theme. I know this development is constantly changing, and lot of new features are being added, but I thought it would be usefull to leave my feedback anyway.
For CSS modifications, I would use the "cascading" feature of CSS, i.e. that you can "override" selected CSS definitions by appropriate placing of the overrides (inside the import and/or processing order).
This allows you to keep your changes separate from everything else. Of course, there may still be problems with updates - e.g. when the html/class scheme changes significantly; however, the danger is greatly reduced.
I believe I have read something about customizing CSS (and other theme related resources) in the Plone 5 documentation (on "plone.org"). It was a long time ago and I have not done it personally. But, maybe, you take a look at the documentation. At the time, I had the impression that it is a good documentation.
Best practice is to use the built-in theme editor if you do not want to develop your own theme - as @tkimnguyen already pointed out.
I have another solution, though: collective.localstyles - this gives you a ploneCustom.css alike back.
For a client with lots of lineage based subsites I needed a way to add subsite-local theme modifications without creating a new theme for each of them. It was mostly tweaking colors. I have created an add-on for that purpose.
It allows you to upload a localstyles.css or localstyles_css file to the server (localstyles.css has sometimes some issues with permission settings on virtual hosted subsites). It is then applied in the current folder and all subfolders from there on down the hierachy.
I wouldn't consider this best practice, but it works for this use case quite nicely.
@tkimnguyen, very nice! But, I understand this autocrop is not an out of box theme functionality. or am I wrong? At least I did not see this behaviour neither in the zip, neither in the egg version. If not, did they use another product to have this functionally?
dieter Dieter, I have read the documentation, but it doesn't answer fully my question. My problem is where to write the code to overwrite the properties I need, installing a theme as an addon egg (not zip).
I was looking for something like child themes in wordpress. So, what I did is adding the product egg to my src/ folder, but I don't know if this is the best practice for production.
For something like a "child theme", I would create my own "theme" which depends (both with respect to the code as well as to "GenericSetup") on a parent theme (this will make available the resources from the parent scheme) and then provide the additions.
As far as I understood the documentation above, a theme is constructed from bundlles containing resources (javascript and/or CSS) and diazo rules. It is quite easy to add (in one's own theme) additional bundles (what likely is sufficient for you). In principle, bundles can also be extended; but apparently, this seems easy only for the so called "legacy bundle".
As mentioned before, it is a long time that I have read the documentation and I have not practised. I might have misunderstood things.
It should be possible to make a child theme with this approach:
Make a new theme (you can do it TTW or as an 'add-on'
Edit the rule file to something like this:
<?xml version="1.0" encoding="utf-8"?>
<xi:include href="++base++theme/rules.xml"/>
<!-- title -->
<before css:theme-children="#mainnavigation-wrapper">
<div>Lets add some html for the title</div>
</before>
</rules>
<after theme-children="/html/head" >
<link href="++theme++thistheme/some.css" rel="stylesheet"/>
</after>
This is built into the theme. Maybe 'autocrop' is the wrong term; it's the media queries that look at screen size and decide what CSS to apply for a given screen size. That is what is resizing the image sensibly for each type of screen.
