Hello Team,
I suggest the Government to Purchase Diazo Theme to customize the web site. So, Kindly help me out how to purchase Diazo theme? and also help me in customizing the website in Diazo theme.
How to migrate Plone 4.2 version to Plone 5.0 version?
Warm regards,
Praveen Kodi
Either you
a) find an off the shelf free theme for plone. There aren't a lot.
b) buy a theme from somewhere like themeforest and pay a plone integrator to customise it
c) pay a designer to create a custom html/css designa and pay a plone integrator to customise it
d) same as above but learn diazo yourself via the documentation or perhaps join the training in october or hide a company to train you.
Upgrading is a much longer question. But it involves knowing the plugins the site is using, any customisations to code, content types and themes that need to be ported. It's a very custom site, lots of that often has to be redone in a new way.
Some brainstorming:
Would it be somehow possible to use diazo to 'replace' or 'add' classes.
So: let say you buy or find a theme, and this theme has for example
h1.bigheader { some: css}
It there was a control panel where one could set something like:
h1.documentFirstHeader => h1.bigheader, the customization might be quite easy (??)
No there is no control panel, but you can do that with Diazo (XSL):
I use this to add some classes for a custom grid, to support mosaic grid classes.
<replace css:content=".mosaic-width-full">
<xsl:copy>
<xsl:copy-of select="@*" />
<xsl:attribute name="class"><xsl:value-of select="./@class" /> 12u</xsl:attribute>
<xsl:apply-templates />
</xsl:copy>
</replace>
So with this you can build your self some snippets which you can use to transform your markup to what ever you want. It's possible to remove, add or replace attributes like class or id.
for the full snippet see here: https://gist.github.com/MrTango/c9d26e1f576b0ba1f5fa45069c60c5c7
@espenmn There is a control panel. It's the theme editor.
There is not a lot of point simplifying diazo further. For a little more learning you get a lot more flexibility.
I believe the syntax is simpler than what @MrTango specifies.
`
"attributes
If you want to replace attributes instead of tags, you can use the attributes attribute to provide a space-separated list of attributes that should be replaced on the matched theme node(s). For example, with attributes="class" the class attribute on the matched theme node(s) will be replaced by the class attribute of the matched content node(s)."
So should be something like <replace attributes="class" css:theme="h1.bigheader" css:content="h1.documentFirstHeader" />
Great!
Would it be possible to somehow 'loop this with diazo'.
Then: one could set the replacements classes (ids) somewhere:
something like
replace = [['h1.documentFirstHeader', 'h1.bigheader'], ['.someclass', '.someotherclass'], ['etc', 'etc'], ...... ]
This would make things much easier, I assume.
I don't like this because the whole theming situation is already pretty terrible in my opinion and adding yet another layer of settings is just over-engineering the whole thing. How about Plone just uses default Bootstrap to begin with, there's an idea...
...and really, the in-line theme editor is just so... What. I mean I get that we're wanting to make the whole thing more accessible to designers and frontend developers but it just makes no sense in the first place since the amount of people trying to theme Plone as designers is from what I can see, pretty negligible. I guess that's why you can find loads of Django themes and well, basically none for Plone. And the custom themes that are there for Plone aren't up to snuff when you consider what's already out there.
Not to rant, but I definitely would like to see some simplification of the theming system, Diazo and Barceloneta are all great and well, but they become incredibly tenuous to handle when you start REALLY trying to develop a custom UI or application styling.
For example I'd love to implement https://getuikit.com/ into a Plone application, but where would you even start before having to fix stuff before creating things. It should be the other way around.
As I see it you can either use Barceloneta and re-theme the site/application or if you want to create a custom theme and decide to disable Barceloneta then you're thrown in the wild to have to re-style pretty much the entire interface and since Barceloneta only uses derivatives of Bootstrap, but not Bootstrap class names or styling, and since most of the Plone templates don't use defaults for classes but custom ids here and there, you basically end up with a broken interface.
+1 - sensible defaults and all that. Those who get hung up on themeing would be better starting from there, those who want to use other systems are probably better placed to change it.
Hi Jesse,
This editor is only there to do things TTW, quick and dirty in my opinion. And therefor it's perfectly fine. For more advanced theming I always use the filesystem approach with all the tools I need and like (grunt, less/compass compiler, browsersync, ...; see the new theming training docs for example: https://training.plone.org/5/theming/theme-package.html)
You can use Barceloneta for backend and your theme for frontend only, see https://training.plone.org/5/theming/theme-package-2.html#unthemed-backend.
I see this as a problem as well and will discuss it at the conference in Barcelona next week.
My themes are almost always Bootstrap based, and usually I do something like this:
<!-- Add Bootstrap stylesheet. -->
<before css:theme-children="html head">
<link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/libraries/bootstrap3/css/bootstrap.min.css?v={$theme_version}" type="text/css" />
</before>
<!-- Add theme base CSS. -->
<after css:theme-children="html head">
<link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme.css?v={$theme_version}" type="text/css" />
</after>
<!-- Add selected theme color option from spirit.plone.theming. -->
<after css:theme-children="html head" css:if-content="#PLONE_THEMING_COLOR_OPTION">
<link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme-{$color}.css?v={$theme_version}" type="text/css" />
</after>
<!-- Add default theme color in case we have no option. -->
<after css:theme-children="html head" css:if-not-content="#PLONE_THEMING_COLOR_OPTION">
<link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme-blue.css?v={$theme_version}" type="text/css" />
</after>
<after css:theme-children="html body">
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write(unescape('%3Cscript src="++theme++mytheme/assets/libraries/bootstrap3/js/bootstrap.min.js"%3E%3C/script%3E'))}</script>
<!-- Add custom JavaScript. -->
<script src="{$portal_url}/++theme++mytheme/static/main.js?v={$theme_version}"></script>
</after>
I add the Bootstrap CSS and JS, if not already there, using diazo.
I also use the Plone Theming Extension I wrote some time ago to make it easier for integrators/end users to customize their theme (I think the advanced theming options are too complicated and can break your theme when used wrong).
I know you can use Barceloneta for the backend only, but then all you're doing is alleviating the issue, not solving it. You still end up with a nightmare structure to theme for the frontend. The theming for the backend should be very explicitly separated from the frontend, functionality should still remain and flexibility should still be there without having to circumvent a multitude of configurations and settings.
Using Diazo is for me, a nightmare. You lose the flexibility of creating view templates while introducing yet another configuration and syntax to handle.
I'm not the first to admit as a developer, not a designer that when I create things I tend to over-complicate and engineer stuff because from my view, it's cool. I see this with Plone, you can see it was created by a bunch of developers and programmers, it shows. But it also hurts it and makes it less accessible because there's always an extra setting, an extra configuration and so on...
I mean just see how many threads there are on this forum for "How to use my JS lib" (me included), "Where to get Plone themes", "Why is there no styling" and so on... Nobody coming into Plone has any idea what's going on, I may as well go open a spell-book and start learning new enchantments on how to make a giant chocolate dinosaur, it makes about as much sense and is equally as mystifying as when you delve into Plone in general.
So your solution and contribution to change/fix this is...?
Frontend / theming people might want to keep track of some of the initiatives to go headless with Plone:
These should be more in tune of the modern baseline expectations of the problem scope.
It would be nice for frontend / theming people if an English description was added to those projects.
(for example, the readme file could start with explaining what 'IT DOES' instead of how to install etc.
I've learned to stop ranting about things. So now I'll try to provide a possible solution and contribute to this. In my opintion three major points nerve me when adding custom themes or trying to improve e.g. the experience on mobile devices.
Plone's Default Theme
TTW vs. File System
Compatibility
I know I have to create a PLIP to contribute. My questions are:
I'm in Barcelona next week and happy to discuss on this. Is there a discussion already planned for this?
Not sure about that, if I understand you right.
I think for example
<a class='button blue'
is better than
<a class='bluebutton'
With the first one, you can style all buttons with the same and then just (for example)
.blue { color: blue;}
.
I was talking about documentDescription and description...
I want to address some issues and maybe new features as well, and I think the conference is the perfect place to do that. I think we will find some time to discuss this in a group and maybe sprint on that as well.
I'm definitely in for putting some spare time into this, I'd really like to see some improvements in this area. Interested to see where this goes...
Hi, I am not a themer or programmer - I've a site admin and integrator - so this depth of discussion on theming isn't for me.
However, I have what I hope is a simple question and I'm asking for some general guidance on the area of themes.
If i go to a site such as themeforest.com and chose an "HTML" theme that conforms to pure html5 and CSS, how possible is it to have that (by someone who knows Plone) brought into Plone 5? I realize this is a general question, but I'm sure there are others interested.
if it is possible is it a good approach? or should I start with the standard plone 5 theme and do some mods? I had some really bad experience with a plone 5 theme I bought from a reputable vendor but had constant problems (their theme depended on other P5 products, which changd and broke the theme.)