(CSS)¶
Description
Creating and registering CSS files for Plone and Plone add-on products.
Contents
はじめに¶
This page has Plone specific CSS instructions.
In Plone, most of CSS files are managed by portal_css tool in Zope Management Interface. Page templates can still import CSS files directly, but portal_css does CSS file compression and merging automatically if used.
Registering a new CSS file¶
You can register stylesheets to be included in Plone’s various CSS bundles using GenericSetup XML.
Example profiles/default/stylesheets.xml
<?xml version="1.0"?>
<!-- This file holds the setup configuration for the portal_css tool. -->
<object name="portal_css">
<!-- Stylesheets that will be registered with the portal_css tool are defined
here. You can also specify values for existing resources if you need to
modify some of their properties.
Stylesheet elements accept these parameters:
- 'id' (required): it must respect the name of the css or DTML file
(case sensitive). '.dtml' suffixes must be ignored.
- 'expression' (optional - default: ''): a tal condition.
- 'media' (optional - default: ''): possible values: 'screen', 'print',
'projection', 'handheld'...
- 'rel' (optional - default: 'stylesheet')
- 'rendering' (optional - default: 'import'): 'import', 'link' or
'inline'.
- 'enabled' (optional - default: True): boolean
- 'cookable' (optional - default: True): boolean (aka 'merging allowed')
See registerStylesheet() arguments in
ResourceRegistries/tools/CSSRegistry.py for the latest list of all
available keys and default values.
-->
<stylesheet
id="++resource++yourproduct.something/yourstylesheet.css"
media="" rel="stylesheet" rendering="import"
cacheable="True" compression="safe" cookable="True"
enabled="1" expression="" insert-after="ploneKss.css"/>
</object>
Expressions¶
Expression portal_css attribute defines when your CSS file is included on HTML page. For more information see expressions documentation.
Inserting CSS as last into anonomyous bundles¶
Plone compresses and merges CSS files to bundles.
For Plone 3.x optimal place to put CSS file available to all users is after ploneKss.css as in the example above.
CSS files for logged in members only¶
Add the following expression to your CSS file:
not: portal/portal_membership/isAnonymousUser
If you want to load the CSS in the bundle with Plone’s default member.css, use insert-after=”member.css”. In this case, however, the file will be one of the first CSS files to be loaded and cannot override values from other files unless CSS directive !import is used.
Generating CSS classes programmatically in templates¶
# Try to put string generation code your view/viewlet if you have one
# If you do not have view (main_template) you can create a view and call it as in the following example.
View class generating CSS class spans:
from Products.Five.browser import BrowserView
from Products.CMFCore.utils import getToolByName
class CSSHelperView(BrowserView):
""" Used by main_template <body> to set CSS classes """
def __init__(self, context, request):
self.context = context
self.requet = request
def logged_in_class(self):
""" Get CSS class telling whether the user is logged in or not
This allows us to fine-tune layout when edit frame et. al.
are on the screen.
"""
mt = getToolByName(self.context, 'portal_membership')
if mt.isAnonymousUser(): # the user has not logged in
return "member-anonymous"
else:
return "member-logged-in"
Registering the view in ZCML:
<browser:view
for="*"
name="css_class_helper"
class=".views.CSSHelperView"
permission="zope.Public"
allowed_attributes="logged_in_class"
/>
Calling the view in main_template.pt:
<body tal:define="css_class_helper nocall:here/@@css_class_helper" tal:attributes="class string:${here/getSectionFromURL} template-${template/id} ${css_class_helper/logged_in_class};
dir python:test(isRTL, 'rtl', 'ltr')">
Defining CSS styles reaction to the presence of the class:
#region-content { padding: 0 0 0 0px !important;}
.member-logged-in #region-content { padding: 0 0 0 4px !important;}
CSS reset
-----------
If you are building a custom theme and you want to do cross-browser CSS reset,
the following snippet is recommended::
/* @group CSS Reset */
/* Remove implicit browser styles to have a neutral starting point:
- No elements should have implicit margin/padding
- No underline by default on links (we add it explicitly in the body text)
- When we want markers on lists, we will be explicit about it, and they render inline by default
- Browsers are inconsistent about hX/pre/code, reset
- Linked images should not have borders
*/
* { margin: 0; padding: 0; }
* :link,:visited { text-decoration:none }
* ul,ol { list-style:none; }
* li { display: inline; }
* h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
* a img,:link img,:visited img { border:none }
a { outline: none; }
table { border-spacing: 0; }
img { vertical-align: middle; }
