I need a solution that meets following requirements:
use a diazo theme based on unstyled(!), Theme base (i.e. "Plone Default") with the URL diazotheme.domain.com
use "Sunburst Theme" (or any other Plone Theme) with the URL "sunburst.domain.com"
It seems that diazo not only uses the Base Theme for the diazo theme but also for the "Unthemed host names". Setting the Base Theme in diazo's "##theming-controlpanel" actually changes the Default skin of the Site.
I've posted a solution using diazo in combination with editskinswitcher: https://stackoverflow.com/a/23130398/1659599. I'd like to know whether this is possible without using editskinswitcher.
Take a look at the collective.behavior.localdiazo package.
You can see it in action in http://www.cfa.org.br/rba site, which has a different theme from http://www.cfa.org.br/ main site.
RBA is an instance of Microsite, a Dexterity-based content type defined in sc.microsite.
you'll definitely need a mechanism to activate different skins for the different parts of you site. editskinswitcher is one choice here.
you could also code your own traverser that applies the correct browserlayer and patches the portal_skins tool.
another approach is to allow skin selection in portal_skins and set the skin via a request variable.
the concept is outlined here: https://dev.plone.org/ticket/10311
Do you need to switch plone skin? Or would it be enough to change the diazo theme, using the same (more or less neutral) plone skin?
I use this approach to switch diazo rule set and index.html depending on the path. The two diazo themes uses different resources: images, styles, js, etc., and are very different.
My rules.xml - shortened:
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xi="http://www.w3.org/2001/XInclude">
<!-- The theme for my "app" -->
<rules if-path="/app_path /site/app_path">
<theme href="index_app.html"/>
<!-- rules for the specific path -->
</rules>
<!-- The default theme, used for standard Plone web pages -->
<theme href="index.html" css:if-content="#visual-portal-wrapper" />
<!-- Rules applying to a standard Plone web page -->
<rules css:if-content="#visual-portal-wrapper">
<!-- rules for the rest of the site -->
</rules>
</rules>
The same should be doable for domains using p.a.theming theme parameters: https://pypi.python.org/pypi/plone.app.theming#theme-parameters
and using "Conditions based on arbitrary parameters" from http://docs.diazo.org/en/latest/advanced.html
(replace the if-path with if="$host = 'domain'")
UNTESTED! :)
Related
I use Diazo to deploy the static html-file 'ticker.html' on a certain url. That page uses nothing at all from the content.
This is the rules.xml:
<rules xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<rules if-path="/Plone/ticker/ /ticker/">
<theme href="ticker.html" />
</rules>
<rules css:if-content="#visual-portal-wrapper" if-not-path="/Plone/ticker/ /ticker/">
<theme href="index.html" />
The rest of the theme...
</rules>
</rules>
It works fine and the html is correct but the return-code of http://localhost:8080/Plone/ticker is 404. Only if I create some dummy content in Plone at this location I get a 200. The returned is also slightly changed: When there is a dummy content Diazo adds a base-tag to the header:
<base href="http://localhost:8080/Plone/ticker/" />
How can I tell Diazo to completely ignore the content and return a 200 even when there is no dummy-content?
In case you are wondering: I use Diazo for this because plone.app.themeing allows to modify the static page through the web.
The plone.app.theming transformation is the last step in the delivery pipeline. The content has already been summoned from Plone so that it can be combined with the theme. So, it's not the appropriate place to do this.
Instead, do this with the rewrite rules of your reverse proxy. Have the proxy fetch your ticker whenever it receives a request for the target URL. You'll also save a lot of CPU cycles in the process, since you'll avoid the whole trip through Zope/Plone's machinery.
I had a similar usecase where i want to server some js-partials through Zope to AngularJS. They are text/html so they got transformed through plone.app.theming. After a deep look into plone.app.theming i overloaded the ThemeTranform adapter with a subclassed one in a new file transforms.py as shown below:
# -*- coding: utf-8 -*-
from plone.app.theming import transform
from your.theme.interfaces import IYourThemeLayer
from zope.component import adapter
from zope.interface import Interface
#adapter(Interface, IYourThemeLayer
class ThemeTransform(transform.ThemeTransform):
def parseTree(self, result):
# Prevent diazo from adding doctype and html head to every
# html file. Exclude all partial resources from theme transforms
if '/++resource++your.theme.js-partials/' in self.request.getURL():
return None
return super(ThemeTransform, self).parseTree(result)
... and register in zcml to the same name as the default ThemeTransform adapter using:
<configure
xmlns="http://namespaces.zope.org/zope"
xmlns:zcml="http://namespaces.zope.org/zcml"
i18n_domain="your.theme">
<!-- Override plone.app.theming adapter -->
<adapter
name="plone.app.theming.transform"
factory=".transform.ThemeTransform"
zcml:condition="installed plone.app.theming"
/>
</configure>
May be related to this issue: https://dev.plone.org/ticket/13139
I developed a GWT aplication which was initially meant only for Desktop PC browser. Now I decided to make it available also to smartphones and tablets. I created a different .css for each user-agent. Now my question is, how can I decide which of these files to load basing on the type of user-agent? Is this strategy a good one, or there is a better practice?
To swap implementation according to the user-agent, you can use deferred binding, which is a built-in GWT feature.
In you module.gwt.xml type something like:
<module>
...
<inherits name='com.google.gwt.sample.mobilewebapp.FormFactor'/>
...
<!-- Use ClientFactoryImpl by default -->
<replace-with class="com.google.gwt.sample.mobilewebapp.client.ClientFactoryImpl">
<when-type-is class="com.google.gwt.sample.mobilewebapp.client.ClientFactory"/>
</replace-with>
<!-- Use ClientFactoryImplMobile for mobile form factor. -->
<replace-with class="com.google.gwt.sample.mobilewebapp.client.ClientFactoryImplMobile">
<when-type-is class="com.google.gwt.sample.mobilewebapp.client.ClientFactory"/>
<when-property-is name="formfactor" value="mobile"/>
</replace-with>
<!-- Use ClientFactoryImplTablet for tablet form factor. -->
<replace-with class="com.google.gwt.sample.mobilewebapp.client.ClientFactoryImplTablet">
<when-type-is class="com.google.gwt.sample.mobilewebapp.client.ClientFactory"/>
<when-property-is name="formfactor" value="tablet"/>
</replace-with>
</module>
Then just call GWT.create(ClientFactory.class) to get the proper implementation at runtime. For CSS, use a subclass of CSSResource or ClientBundle. Source is here.
I am using mgwt for creating mobile gwt apps.
There is a themeing based on user agent: https://code.google.com/p/mgwt/source/browse/src/main/java/com/googlecode/mgwt/ui/client/theme/MGWTThemeBaseThemeStandardImpl.java
In your Bundle you can seperate different css. If you don't use CssResources you may just use the StyleInjector
I have two static html files, one is a design for a homepage, the other is a design for a regular page.
I have a rules to determine which one to use, like this:
<rules css:if-content="body.section-front-page">
<theme href="home.html" />
</rules>
<rules css:if-not-content="body.section-front-page"
css:if-content=".portaltype-document">
<theme href="index.html" />
</rules>
Though I am realizing now that these two pages have common elements, such as the header.
Is there a way to use the header from one page or something, that means if I make changes to the htmlt, it only needs to be done in one place? Another way of asking, can you mix together design files?
You would need to have just the one theme file to do that.
If you design the theme file properly and you do have common elements between the home page and the other site page templates this should be quite possible.
I guess the design is key here... the following site uses one theme file but has a very different home page using rules similar to your css:if-content="body.section-front-page" to determine not to show the left and right columns for example.
http://www.lotterywest.wa.gov.au/
This is not possible.
Diazo (version 1.0.4-py2.7) simply loads the theme file (see diazo.rules.expand_theme(element, theme_doc, absolute_prefix)). The loaded file must have a etree.parse()able format and AFIK there are no "rules" to embed or include further files or code.
I've been trying to find a workaround with no success until now. My alternative idea was to include the common code as a replace rule and then apply the other rules. E.g. have a given id in your theme-file and expanding it with a diazo rule. This works only if you do not need to expand your code (see my question https://stackoverflow.com/q/21703070/1659599).
If you only nedd to add html text without further replacements then you could add this by a rule.
I have a plone 4.2.1 site and I am using various diazo themes. I also use Piwik for web statistics. Unfortunately the javascript for web statistics is being utterly ignored when one of the diazo themes is installed.
I have tried to edit the rules.xml file as suggested in https://groups.google.com/forum/?fromgroups=#!topic/plone-users/VM4b51ergFA, but adding
<!-- Google Analytics JavaScript -->
<after theme-children="/html/body"
content="/html/body/div[#id='visual-portal-wrapper']/div/script" />
does not work for me.
Is there any other option which I can use to fix this issue?
Thanks,
Julian
The viewlet plone.analytics is rendered in the footer viewlet manager:
<browser:viewlet
name="plone.analytics"
manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
class=".view.AnalyticsViewlet"
permission="zope2.View"
/>
The snippet is rendered as it is, so you can identify your script tag in the way you want.
You shoud try
<script id="plone-analytics" ...>YOUR SCRIPT...</script>
And modify the rules.xml to put #plone-analytics in your footer
In Plone 4.2 at least the plone.analytics is not in the visual-portal-wrapper so the rule you try will not work.
I made my own welcome intro page using org.eclipse.ui.intro and I'm able to show my welcome extended with other contributors.
Now I'd like to decore my welcome with some css, and I have two question:
1) How can I apply predefined eclipse css (i.e Slate) to my page? I've already tried putting org.eclipse.ui.intro/INTRO_THEME = org.eclipse.ui.intro.universal.slate in plugin_customizazion.ini without success
2) there's a way to extend css to contributors without giving them the css file??? I mean there a way for contributors to use my own css if it is only inside my plugin (or eclipse plugin if i will be able to use "slate" style?)
Eclipse SDK Help
The only way to select a theme is via the preference org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
Theme-enabled intro implementation must make all the references to style and presentation resources using the $theme$ substitution variable. Absolute paths for images, pages, styles, etc. will be computed by resolving the substitution variable using the path of the currently active theme.
See Intro Content XML Format as well.
To answer the second question, if you define an intro theme which include your css file, other plugins will be able to use it for sure.
Cheers,
Max
Ok, now I've learned more about themes, but I think I have some problem with path.
I've defined my own theme, css and graphics, so I extend theme by configExtension. But when I load my application the welcome page doesn't load css neither images. I've also defined org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
I have a structure similar to slate template like this
my.plugin.name
|_resources
|_intro
|_graphics
|_html
in graphics there are all images definitions whlile in html there are css
then in intro I have my root.xhtml (referenced by intro.xml)
with this css reference
<link rel="stylesheet" href="$themes$/html/root-ie.css" type="text/css" charset="utf-8" />
finally I've defined configExtension with theme
<extension
point="org.eclipse.ui.intro.configExtension">
<theme
default="true"
id="my.plugin.name.themes.themename"
name="%theme.name.themenam"
path="/resources/intro"
scalable="true">
I think maybe the problem is with the path, I've also tried with path="resources/intro"
path="/resources/intro/" and path="resources/intro/" withous success
could someone post a simple but complete working sample please?