Plone 5 theming
1,785 views
48 slides
Oct 15, 2015
Slide 1 of 48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
About This Presentation
This presentation was given at the Bucharest Plone Conference on 15/10/2015.
Slide Content
Víctor Fernández de Alba
@sneridagh
Plone 5
Theming
@sneridagh
Plone 5
Theming
•Plone Foundation Member
•plone.app.multilingual
•“Barceloneta" default Plone 5 theme
•Team leader of the new plone.org site project
Víctor Fernández de Alba
@sneridagh
•plone.app.multilingual
•“Barceloneta" default Plone 5 theme
•Team leader of the new plone.org site project
Víctor Fernández de Alba
@sneridagh
Oriol Martí
@OriolMartiColom
Albert Casado Celma
@albertcasado
@OriolMartiColom
Albert Casado Celma
@albertcasado
Deductible
LESS
structure
and file naming
LESS
structure
and file naming
variables.plone.less
Bootstrap 3 - based
•Based, not dependent in any way
•prepended plone-* whenever possible as
long it does not breaks legacy CSS
•Original BS resources included on Plone
•Based, not dependent in any way
•prepended plone-* whenever possible as
long it does not breaks legacy CSS
•Original BS resources included on Plone
Plone legacy classes and IDs
•.portlet .portletNews
•.formHelp, .formControls
•.context, .standalone, .destructive
•.documentFirstHeading
•#portal-column-content
•#edit-bar
•.portlet .portletNews
•.formHelp, .formControls
•.context, .standalone, .destructive
•.documentFirstHeading
•#portal-column-content
•#edit-bar
Changes
plone.mainnavigation
viewlet
viewlet
Fontello icons
New default way of manage collection of icons
Used in Plone bundle and Barceloneta
(http://fontello.com/)
New default way of manage collection of icons
Used in Plone bundle and Barceloneta
(http://fontello.com/)
How to use Fontello?
Products.CMFPlone > static > fonts
Just load config.json in fontello.com
and start hacking/adding your own fonts
Save it and add it to your own theme
Products.CMFPlone > static > fonts
Just load config.json in fontello.com
and start hacking/adding your own fonts
Save it and add it to your own theme
Plone Toolbar
•plone.app.layout
•plone.app.contentmenu
•Small changes since last year
•Site control panel setting for change
the orientation
•plone.app.layout
•plone.app.contentmenu
•Small changes since last year
•Site control panel setting for change
the orientation
Plone Toolbar (II)
<replace css:theme=“#portal-toolbar"
css:content-children=“#edit-bar"
css:if-not-content=“.ajax_load"
css:if-content=".userrole-authenticated"/>
•Do not forget to make space for the toolbar just after
the <body> tag with this rule:
<replace css:theme=“#portal-toolbar"
css:content-children=“#edit-bar"
css:if-not-content=“.ajax_load"
css:if-content=".userrole-authenticated"/>
•Do not forget to make space for the toolbar just after
the <body> tag with this rule:
Control Panel
•Use a Fontello (or CSS font-face based solution)
•Add a CSS class with the “normalized” name of
your new control panel item like:
.icon-controlpanel-FilterSettings:before
{ content: '\e844'; }
•Use a Fontello (or CSS font-face based solution)
•Add a CSS class with the “normalized” name of
your new control panel item like:
.icon-controlpanel-FilterSettings:before
{ content: '\e844'; }
Easy backend
customization
•Reusing Barceloneta resources
•Use the new Barceloneta backend.xml Diazo rules and
related CSS
•in the future, use the Plone Intranet theme switcher
customization
•Reusing Barceloneta resources
•Use the new Barceloneta backend.xml Diazo rules and
related CSS
•in the future, use the Plone Intranet theme switcher
Resource Registries
Resource Registries
Resource
Bundle
Overrides
Variables
Pattern options
Resource
Bundle
Overrides
Variables
Pattern options
Resource
•RR basic unit
•A collection of LESS files and JS
•Actually, is more like a web component for Plone
•RR basic unit
•A collection of LESS files and JS
•Actually, is more like a web component for Plone
Resource
Bundle
•A collection of RR resources
•Finally, they compile to a single CSS and JS
resources in production mode
•Development mode for LESS and JS on the fly
•They can be compiled TTW statically too (ZODB)
•A collection of RR resources
•Finally, they compile to a single CSS and JS
resources in production mode
•Development mode for LESS and JS on the fly
•They can be compiled TTW statically too (ZODB)
Bundle
Overrides
•Easy customization of ++plone++ resources
•Why to stop here? More on that later…
•Easy customization of ++plone++ resources
•Why to stop here? More on that later…
Plone Variables
•TTW plone.less variable customization
•TTW plone.less variable customization
Automatic variables
•Available for every RR resource
•Used in compilation
•TTW they resolve to URLs
•in console they resolve to FS path
@import url("@{mockup-patterns-select2}");
•Available for every RR resource
•Used in compilation
•TTW they resolve to URLs
•in console they resolve to FS path
@import url("@{mockup-patterns-select2}");
No more
<div metal:fill-slot=“javascript_head_slot” />
<div metal:fill-slot=“style_slot” />
and welcome to
add_bundle_on_request(self.request, 'thememapper')
add_resource_on_request(self.request,
'jquery.recurrenceinput')
<div metal:fill-slot=“javascript_head_slot” />
<div metal:fill-slot=“style_slot” />
and welcome to
add_bundle_on_request(self.request, 'thememapper')
add_resource_on_request(self.request,
'jquery.recurrenceinput')
Console script helpers
./bin/plone-compile-resources --site-id=myplonesite --
bundle=mybundle
./bin/plone-generate-gruntfile --site-id=myplonesite --
bundle=mybundle
./bin/plone-compile-resources --site-id=myplonesite --
bundle=mybundle
./bin/plone-generate-gruntfile --site-id=myplonesite --
bundle=mybundle
Diazo
Diazo
•Pure Diazo theme definition
•Diazo bundles
•New manifest parameters
•Pure Diazo theme definition
•Diazo bundles
•New manifest parameters
Pure Diazo
•Remember its original definition
•Easy for a designer to jump in
•Distributed through zip (import/export)
•Remember its original definition
•Easy for a designer to jump in
•Distributed through zip (import/export)
Diazo bundles
•They preserve the “pureness” of a Diazo theme
•New manifest attributes
•They preserve the “pureness” of a Diazo theme
•New manifest attributes
Best Practices
Reuse Barceloneta as far as
you want
Optional Barceloneta profile
to register Barceloneta resources
<dependency>
profile-plonetheme.barceloneta: registerless
</dependency>
(metadata.xml)
you want
Optional Barceloneta profile
to register Barceloneta resources
<dependency>
profile-plonetheme.barceloneta: registerless
</dependency>
(metadata.xml)
Reuse Barceloneta as far as
you want (II)
@import "@{barceloneta-fonts}";
Use it in your own less files
by using the barceloneta-* variables
you want (II)
@import "@{barceloneta-fonts}";
Use it in your own less files
by using the barceloneta-* variables
Dont get obsessed with
•Use the CSS framework you like the most, you are
not tied to Bootstrap
•The number of requests your site is doing: HTTP2.0
is almost here
•Use the CSS framework you like the most, you are
not tied to Bootstrap
•The number of requests your site is doing: HTTP2.0
is almost here
Don’t be tempted
by the dark side
Skins layers are not allowed
Use plone.resource instead
For overriding use z3c.jbot
by the dark side
Skins layers are not allowed
Use plone.resource instead
For overriding use z3c.jbot
CSS frameworks
.context:extend(.btn-primary) { }
Use the “extend” feature
Adapt the grid via Diazo
Or via a custom transform (like Mosaic does)
.context:extend(.btn-primary) { }
Use the “extend” feature
Adapt the grid via Diazo
Or via a custom transform (like Mosaic does)
Do not create the theme
from scratch
•Use the bobtemplates.plone templates
•Use the default Plone’s HTML before Diazo it, now the
Plone markup is modern, updated and accessible
•Understand Plone structure and distribution of
elements and reuse it
•Copy/Reuse Barceloneta LESS and adapt it
from scratch
•Use the bobtemplates.plone templates
•Use the default Plone’s HTML before Diazo it, now the
Plone markup is modern, updated and accessible
•Understand Plone structure and distribution of
elements and reuse it
•Copy/Reuse Barceloneta LESS and adapt it
TinyMCE
•Custom generated stylesheets
•New Diazo Tiny content specific CSS
•Tiny content templates now in core!
•Custom generated stylesheets
•New Diazo Tiny content specific CSS
•Tiny content templates now in core!
Nginx passthrough
(for static plone.resources
++something++)
location ~ .*?/\+\+components\+\+root/(.*) {
alias /path/to/my/package /$1;
}
You can even combine it with collective.recipe.omelette for
total convenience ;)
(for static plone.resources
++something++)
location ~ .*?/\+\+components\+\+root/(.*) {
alias /path/to/my/package /$1;
}
You can even combine it with collective.recipe.omelette for
total convenience ;)
Useful tools
•Chrome reloader Eric Bréhault’s button
•?diazo.off=1
•?diazo.debug=1
•@@test_rendering
•Chrome reloader Eric Bréhault’s button
•?diazo.off=1
•?diazo.debug=1
•@@test_rendering
Not only
Plone is back
Plone is back
TTW is back!
(for good! and with vengeance too!)
Change Logo
Toolbar logo (really?)
plone.app.theming has more power than ever before
(for good! and with vengeance too!)
Change Logo
Toolbar logo (really?)
plone.app.theming has more power than ever before
Plone customizations TTW
•They rock, like never before
•TTW is an opportunity to attract new people
•Plone must have a zero effort story for easy and quick
customization
•Now it’s even possible to do complex things TTW
•Let’s make a theming and customization learning curve
really low steep
•Objective: attract non technical people to try Plone
•They rock, like never before
•TTW is an opportunity to attract new people
•Plone must have a zero effort story for easy and quick
customization
•Now it’s even possible to do complex things TTW
•Let’s make a theming and customization learning curve
really low steep
•Objective: attract non technical people to try Plone
DEMO!!!
collective.jbot
•It covers gaps in the current Plone
customization scenario stories
•Should work on Plone 5 soon (anyone?)
•Should discuss the inclusion in the core
•Overcome some security issues
•It covers gaps in the current Plone
customization scenario stories
•Should work on Plone 5 soon (anyone?)
•Should discuss the inclusion in the core
•Overcome some security issues
Thoughts for the future
•What will happen when skins will be
gone?
•It would be nice to have a way to override
++mynamespace++ like RR already does
for ++plone++ resources (Overrides tab)
•pat-filemanager
•Mosaic already does something similar
with ++layout++ resources
•What will happen when skins will be
gone?
•It would be nice to have a way to override
++mynamespace++ like RR already does
for ++plone++ resources (Overrides tab)
•pat-filemanager
•Mosaic already does something similar
with ++layout++ resources
Thanks
Víctor Fernández de Alba
@sneridagh
Víctor Fernández de Alba
@sneridagh
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,785
- Slides 48
- Favorites 2
- Age 3708 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
36 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
39 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
35 views
14
Fertility awareness methods for women in the society
Isaiah47
32 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
31 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
32 views