Skip to main content

The default theme for Plone 4.

Project description

Sunburst, a theme for Plone 4

Sunburst is a modern, minimalist, grid-based theme for Plone 4.

Goals

  • Keep the theme color-neutral (black, white, grays), so it meshes with any company logo and doesn’t feel like it requires color adjustment for doing the 10-minute-show-it-to-the-boss exercise.

  • The theme does not use any tables for layout, and is based on the Deco grid approach which is currently in use on plone.org. It works perfectly in all browsers, including IE6.

  • The grid works in both fixed-width and flexible-width modes, there’s a commented-out section in the top of the CSS file you can enable if you want fixed-width layout.

  • No substantial markup changes outside of the table removal - class and ID names are kept.

  • The theme uses some CSS3 features, but degrades gracefully.

  • The theme does not use any DTML.

  • When viewed on a device with less than 640px width, the portlets neatly tuck under the main content area. This means that the site works well with CSS-enabled devices like tablets and phones that may have limited resolution.

How to depend on Sunburst for your custom theme

Since Sunburst 1.4, Plone-UI generic styles are seperated from public.css, where only Sunburst-design specific styles were left. This reduces the need to override style definitions to match your custom theme.

Here is a way to only include specific stylesheets in your custom theme. This example is based on Products.ResourceRegistries with the “bundles” concept, which is available from version 2.1a1.

In the cssregistry.xml profile, configure bundles for your styles:

<?xml version="1.0"?>
<object name="portal_css">

  <!-- These are the Sunburst-styles which we want to include in our custom
       theme. They are configured to be in the "default" bundle.
       Note: by default, all styles land in the "default" bundle. So this
       configuration isn't strictly necessary. -->
  <stylesheet bundle="default" id="authoring.css"/>
  <stylesheet bundle="default" id="base.css"/>
  <stylesheet bundle="default" id="controlpanel.css"/>
  <stylesheet bundle="default" id="forms.css"/>
  <stylesheet bundle="default" id="IEFixes.css"/>
  <stylesheet bundle="default" id="member.css"/>
  <stylesheet bundle="default" id="reset.css"/>
  <stylesheet bundle="default" id="RTL.css"/>

  <!-- These are Sunburst-design specific styles, which we do not want to
       include in our theme. They are configured to be in the "sunburst"
       bundle. -->
  <stylesheet bundle="sunburst" id="columns.css"/>
  <stylesheet bundle="sunburst" id="deprecated.css"/>
  <stylesheet bundle="sunburst" id="invisibles.css"/>
  <stylesheet bundle="sunburst" id="kupuplone.css"/>
  <stylesheet bundle="sunburst" id="mobile.css"/>
  <stylesheet bundle="sunburst" id="navtree.css"/>
  <stylesheet bundle="sunburst" id="portlets.css"/>
  <stylesheet bundle="sunburst" id="print.css"/>
  <stylesheet bundle="sunburst" id="public.css"/>

  <!-- This is your custom style -->
  <stylesheet bundle="mycustombundle" id="mystyles.css" insert-after="*"
      cacheable="True" compression="safe" cookable="True" enabled="True"
      expression="" media="screen" rel="stylesheet" rendering="link"/>

</object>

In registry.xml, configure the resource-bundles you want to include in your custom theme. The “sunburst” bundle isn’t inlcuded.

<?xml version="1.0"?>
<registry>
  <record
      name="Products.ResourceRegistries.interfaces.settings.IResourceRegistriesSettings.resourceBundlesForThemes"
      interface="Products.ResourceRegistries.interfaces.settings.IResourceRegistriesSettings"
      field="resourceBundlesForThemes">
    <value purge="false">
      <element key="mycustom_skin">
        <element>jquery</element>
        <element>default</element>
        <element>mycustombundle</element>
      </element>
    </value>
  </record>
</registry>

Of course, the mycustom_skin needs to be registered in skins.xml too.

Detailed documentation

Set up and log in

>>> from plone.testing import z2
>>> browser = z2.Browser(layer['app'])
>>> browser.handleErrors = False
>>> portal = layer['portal']
>>> portal_url = portal.absolute_url()
>>> portal.error_log._ignored_exceptions = ()
>>> from plone.app.testing import SITE_OWNER_NAME
>>> z2.login(layer['app']['acl_users'], SITE_OWNER_NAME)
Example portlet
>>> from zope.component import getUtility
>>> from plone.portlets.interfaces import IPortletType
>>> portlet = getUtility(IPortletType, name='portlets.Search')

Sunburst view

Sunburst ships with a special main view similar to ploneview. It contains helping methods relevant to the Sunburst theme only so it doesn’t make sense to put these into global ploneview.

First let’s check that the view exists

>>> from plonetheme.sunburst.browser.sunburstview import SunburstView
>>> view = SunburstView(portal, layer['request'])

getColumnsClass()

The getColumnsClass() method of SunburstView class returns CSS class based on existence of the columns. This class is applied to <div id=”portal-column-content”>.

No columns

Originally on a fresh site we don’t have portlets on the top level (login portlet has been disabled in Plone 4) and thus we should not have any columns.

>>> browser.open('http://nohost/plone/front-page')
>>> 'id="portal-column-one"' not in browser.contents
True
>>> 'id="portal-column-two"' not in browser.contents
True

In this case content column should take the whole width of the site

>>> '<div id="portal-column-content" class="cell width-full position-0"' in browser.contents
True
Left column only

First we need to add a portlet that would definitely be visible. So let’s add the search portlet via it’s addview.

>>> mapping = portal.restrictedTraverse('++contextportlets++plone.leftcolumn')
>>> addview = mapping.restrictedTraverse('+/' + portlet.addview)
>>> result = addview.createAndAdd({})
>>> bool(result)  # None or empty string
False
>>> import transaction
>>> transaction.commit()
>>> browser.reload()

In this case we should have the left column.

>>> 'id="portal-column-one"' in browser.contents
True
>>> 'id="portal-column-two"' not in browser.contents
True

And the class on id=”portal-column-content” is changed

>>> '<div id="portal-column-content" class="cell width-3:4 position-1:4"' in browser.contents
True

Now we switch from English to an RTL language. Hebrew for example.

>>> from Products.CMFCore.utils import getToolByName
>>> tool = getToolByName(portal, "portal_languages")
>>> tool.getDefaultLanguage()
'en'
>>> tool.setDefaultLanguage('he')
>>> transaction.commit()

Changes aren’t pick up immediately. We need to reload

>>> 'dir="rtl"' in browser.contents
False
>>> browser.reload()
>>> 'dir="rtl"' in browser.contents
True

And the class on id=”portal-column-content” should be changed as well

>>> '<div id="portal-column-content" class="cell width-3:4 position-0"' in browser.contents
True
Both columns

Now lets add a Search portlet to the right column also to have both columns populated and visible.

>>> mapping = portal.restrictedTraverse('++contextportlets++plone.rightcolumn')
>>> addview = mapping.restrictedTraverse('+/' + portlet.addview)
>>> result = addview.createAndAdd({})
>>> bool(result)  # None or empty string
False
>>> transaction.commit()
>>> browser.reload()

In this case we should have both columns visible.

>>> 'id="portal-column-one"' in browser.contents
True
>>> 'id="portal-column-two"' in browser.contents
True

And the class on id=”portal-column-content” is changed

>>> '<div id="portal-column-content" class="cell width-1:2 position-1:4"' in browser.contents
True
Right column only

Now let’s get rid of the left column in order to have only the right column visible.

>>> mapping = portal.restrictedTraverse('++contextportlets++plone.leftcolumn')
>>> del mapping['search']
>>> transaction.commit()
>>> browser.reload()
>>> 'id="portal-column-one"' in browser.contents
False
>>> 'id="portal-column-two"' in browser.contents
True

And now we check id=”portal-column-content”. Since we are still in ‘he’ language…

>>> tool.getDefaultLanguage()
'he'

… content column should start not from the left, but rather from position-1:4 (1:4 on the left is taken by the right column in RTL)

>>> '<div id="portal-column-content" class="cell width-3:4 position-1:4"' in browser.contents
True

Now we switch language back to ‘en’ and our content should start at position-0 when there is no left column

>>> tool.setDefaultLanguage('en')
>>> transaction.commit()

Changes aren’t pick up immediately. We need to reload

>>> 'dir="ltr"' in browser.contents
False
>>> browser.reload()
>>> 'dir="ltr"' in browser.contents
True

And the class on id=”portal-column-content” should be changed as well

>>> '<div id="portal-column-content" class="cell width-3:4 position-0"' in browser.contents
True

Changelog

1.5.1 (2014-07-10)

  • Add some missing WYSIWIG/editor styles to the Static Text Portlet. [rpatterson]

  • Move content list style classes (ul, ol, li) from base.css to public.css. They were always problematic in themes, based on Sunburst which excluded public.css. [thet]

1.5.0 (2014-03-02)

  • PLIP #13705: Remove <base> tag. [frapell]

  • Move logo.png to Products.CMFPlone [esteele]

  • Ported tests from PloneTestCase to plone.app.testing [tomgross]

1.4.5 (2013-08-14)

  • Fix tests to pass on Plone 4.4 (which currently has a Calendar portlet on the right by default) and keep them running on 4.3 too. [maurits]

  • Make portal messages display correctly (colors). https://dev.plone.org/ticket/13658 [gbastien]

1.4.4 (2013-06-13)

  • fix green line showing under current select for green bar items in Firefox, Checked in Firefox, Chrome and IE8. [gbastien, vangheem]

1.4.3 (2013-05-30)

  • Revert dashboard permission change from 1.4.2. The dashboard works best when editable - linking to an uneditable dashboard should not be default. [danjacka]

1.4.2 (2013-05-23)

  • Remove font-weight bold for monthdays and font-weight normal for table header in portlet calendar. Set div.portletCalendar with to auto instead of unnecessary 100% + margin. [thet]

  • Users only require dashboard view - not edit - permission to get a ‘Dashboard’ link in the actions menu. [danjacka]

1.4.1 (2013-03-05)

  • fix navigation items having more height than bar in chrome [vangheem]

  • fix green line showing under current select for green bar items in chrome [vangheem]

  • change line height of listing table class to only apply to folder contents listing where it’s affected instead of it applying to styles globally. fixes #13420 [vangheem]

  • More cleanup. Move following remaining portlet styles out of public.css: - Dashboard styles to member.css, - Portlet management styles to controlpanel.css, - Other portlet styles to portlet.css. [thet]

1.4 (2013-01-17)

  • Move documentation from .txt to .rst files for ReST syntax highlighting. [thet]

  • Move workflow color definition for state “published” to public.css. The “published” color definition is propably something to be excluded with public.css in custom designs to avoid coloring of all normally visible links. [thet]

  • Seperate css rules based on @group hints to dedicated, already existing files and leave only Sunburst design-specific styles in public.css. This way, your own theme can depend on Sunburst but exclude the public.css file, which leads to way less style overrides while still having a Plone-like user interface (edit-bars, tables, forms, etc). Fixes pull-requests #1 and #2. Upgrade step included (upgrade_step_2_3). [thet, TH-code]

1.3.1 (2013-01-01)

  • Apply .portalMessage styling to reST admonitions https://github.com/plone/plonetheme.sunburst/pull/4 [rpatterson]

  • style reset on th for table.plain and IE9, fixes #11589 [maartenkling]

  • more specific Sunburst CSS on content-core dd, fixes #11840 [maartenkling]

1.3.0 (2012-10-16)

  • Style #ajax-spinner rather than inserting #kss-spinner in main_template. [davisagli]

  • Style fixes for new style of portlet manager buttons. [vangheem]

1.2.7 (2012-08-11)

  • fixes: Display menu falls under footer (see Events page) (IE7) [maartenkling]

  • fixes: Live search appears under content action menu (IE7) [maartenkling]

  • style ol/li in statictext portlet having omit border true [maartenkling]

  • Fixes: in overlays, and especially in reference browser, label in an anchor link has a cursor pointer. Improves navigation experience in reference browser widget. [thomasdesvenain]

  • Fixes: compare previous link margin with history records is smaller. [thomasdesvenain]

  • Fixes and improvements on history popup with diff. [thomasdesvenain]

  • Move new CSS class generation into new function called getColumnClasses to let the old and deprecated one return column content CSS class only. This is important to keep all previously customized main_templates working. [saily]

1.2.6 (2012-06-29)

  • Use sunburst_view to generate portal-column-one and portal-column-two classes as it is already done for portal-column-content. Fixes: https://dev.plone.org/ticket/12995 [saily]

1.2.5 (2012-05-25)

  • For event view template, changed headerless table to headings and divs for better accessibility. See bug #13181 [hmharter]

  • define class .breadcrumbSeparator, which is referred to in plone.app.layout and plone.app.search, but wasn’t in Sunburst. Set a color on it, because the separator character was changed (see https://dev.plone.org/ticket/12904) The color chosen is WCAG2.0 compliant in contrast. [polyester]

  • Set “display: block; font-weight:normal” on .formHelp in forms.css.dtml to assure that field help displays well even if it is formatted as a span inside the label for accessibility. [smcmahon]

  • Change form tab style selectors from ‘#content’ to ‘#content-core’ so form tabs work in both content and overlays. [davidjb]

  • Fix vertical alignment of listing table cells when content type icons are enabled. [esteele]

1.2.4 (2012-05-07)

  • Add selector for AT required field icon [tom_gross]

  • Use CSS :content selector to inject required icon instead of image [tom_gross]

1.2.3 (2012-04-15)

  • Move .row and .cell styles from footer.pt to Sunburst main_template. Fixes https://dev.plone.org/ticket/12156 [agnogueira]

  • fix ‘device-width;” for key “width” not recognized in chrome’ in javascript console [eleddy]

  • Fix view windw error in chrome [plone konferenz coding dojo]

1.2.2 (2012-02-07)

  • Fix the styling of the standalone @@historyview view used when overlays are turned off. [rossp]

1.2.1 (2011-08-25)

  • Put #search-results-bar on a lower CSS layer to not overlap the livesearch [spliter]

1.2 - 2011-07-19

1.1.5 - 2011-07-04

  • Fixed IE8 issue where a ghost top-margin would appear above the headline in the folder summary listing. [malthe]

  • Add shadow and border for iframe overlays to match images and ajax overlays. [smcmahon]

  • Fixed: portal footer is in a ‘row’ div. [thomasdesvenain]

  • Clean up HTML comments in main_template. [davisagli]

  • Add ids on content core viewlet managers. [thomasdesvenain]

  • Fixed: siteactions background-color was applied to whole page. Add a clear: left. [thomasdesvenain]

  • Add IEFixes.css to CSS registry in case plonetheme.classic is not installed. [elro]

  • Removed comment in IEFixes.css concerning the now removed IE8.js. [elro]

  • Fixed: spinner is back in main_template. [thomasdesvenain]

1.1.4 - 2011-05-13

  • Add styling for dragdropreorder.js. [elro]

1.1.3 - 2011-05-12

  • Add styling for z3cform multi-widget. [elro]

  • Optimize images and icon file sizes. [hannosch]

  • Updated base_properties values with new sunburst theme CSS values. [thomasdesvenain]

  • Removed clear:both on .image-left and .image-right rules. [vincentfretin]

  • Add MANIFEST.in. [WouterVH]

1.1.2 - 2011-03-02

  • Make text input fields have a default width of 20em when no size is set. [elro]

  • Hide plone.app.discussion comment viewlet from print. [timo]

1.1.1 - 2011-02-10

1.1 - 2011-02-04

  • Merge PLIP 11017: Tags MultiSelectionWidget w/scrollbar & checkboxes. [esteele]

1.0.6 - 2011-01-18

  • Adjust the new setuphandler introduced in 1.0.5 to avoid using copy/paste, which introduced unwanted additional security checks. [hannosch]

  • Tightened selector for error fields to avoid z3cform inner div.error. [elro]

  • Added styling for z3cform title and description fields. [elro]

1.0.5 - 2011-01-04

  • Added iframe to style reset. [elro]

  • Added ajax_include_head request parameter for use with cross domain iframe. [elro]

  • Copy the plone_setup action to the user action category via a custom setuphandler rather than in actions.xml, so that we don’t have to hardcode the various action settings here. This provides forward compatibility with Plone 4.1, where the URL and permission change. [davisagli]

  • Fixed content views list shift under ie6. This fixes http://dev.plone.org/plone/ticket/11280. [thomasdesvenain]

1.0.4 - 2010-11-15

  • Restore more of the table.listing (Fancy listing) CSS. Refs #10331. [rossp]

1.0.3 - 2010-09-09

  • Removed padding from navigation portlet header when it is hidden, so we won’t see a small chunk of it. This fixes http://dev.plone.org/plone/ticket/10800. [cwainwright]

  • Worked on fixing up styles for IE8:

    • put previous logo settings back (float messes with rtl)

    • put in IE spacing fixes (logo, hiddenStructure)

    • removed float from div.cell, so livesearch and display menu don’t fall behind other items in IE8.

    Closes http://dev.plone.org/plone/ticket/10872. [cwainwright]

  • Removed “line-height: 2em;” from “table.listing a” css rule so the vertical alignment of linked text and non linked text is the same. [vincentfretin]

  • Moved icons in drop down “Add new…” menu to right of text for RTL scripts. This fixes http://dev.plone.org/plone/ticket/10954. [emanlove]

  • Moved language selector to the left for RTL scripts. Also reversed margin of the actionMenu for RTL scripts. This fixes http://dev.plone.org/plone/ticket/10955. [emanlove]

  • Fixed state position in the state/transitions menu when it is no clickable. [vincentfretin]

  • Worked on fixing up styles for IE7:

    • removed padding on breadcrumb links, so all breadcrumb text displays on one level

    • put in hack to make links with content icons ‘display: block’ in IE. This fixes the Add New dropdown display, but breaks icon display on .navTreeCurrentItem, so I added zoom to the links. (fyi - the hack was the only way I could find to make this work to override the inline-block, did not work in IEFixes.css)

    • adjusted styles on logo so IE displays it in the correct place

    Refs http://dev.plone.org/plone/ticket/10872. [cwainwright]

1.0.2 - 2010-07-18

1.0.1 - 2010-07-07

  • Removed remaining references to empty sunburst_js folder. [hannosch]

1.0 - 2010-07-07

1.0b7 - 2010-05-31

  • Improved typography and vertical rhythm of the theme to improve UX. [spliter]

  • Moved overlay close button to upper-left to get it off the vertical scrollbar when a an ajax overlay is longer than the viewport. [stevem]

  • Set overflow-y:auto on ajax overlays to support forms longer than the viewport. [stevem]

1.0b6 - 2010-05-03

  • Remove styling of path_bar. Breadcrumbs should now behave in a manner similar to that of Plone 3. [esteele]

1.0b5 - 2010-05-03

1.0b4 - 2010-05-01

  • Always enable breadcrumbs on all levels. ploneCustom contains an example on how to disable them on the first levels. This closes http://dev.plone.org/plone/ticket/9987 again. [elvix, hannosch]

  • Added tests for “ajax_load” query string in main_template. When found, skip anything expensive that isn’t going to show in an ajax overlay. The plone.app.jquerytools overlay helper sets the ajax_load query string to prevent browser caching. [smcmahon]

  • Removed fixed vertical position for overlays. This needs to be computed on display so that overlays don’t display out of the viewport on long pages. [smcmahon]

  • Remove display:none for navigation portlet header. This is now handled through the template. [esteele]

  • Improved style of blocked portlets. [igbun]

  • Be carefull with adding ie hacks to IEFixes.css since Sunburst Theme uses IE8.js. Fixes http://dev.plone.org/plone/ticket/10417. [pelle]

  • Improved overlay styling e.g. for openid overlay. Done when stepping trough #10035 and it’s tried to make as general as possible. [pelle]

1.0b3 - 2010-04-10

  • Improved mobile styling. [limi]

  • Less disruptive styling for inline validation, it no longer shifts the form around in a significant way. [limi]

  • Remove unused personalize_form template and unneeded copies of the author template and prefs_main_template. [davisagli]

  • Updated styling for breadcrumbs, tags/keywords, and added styles for the currently selected nav tree item. [limi]

  • Adjusted viewlets so that Sunburst uses the viewlet configuration from plone.app.layout.viewlets. [davisagli]

  • Improved call-out and pull-quote styling. [limi]

  • Improved general overlay styling. [limi]

  • Improved history pop-up styling. [limi]

  • Fix columns in prefs_main_template. [davisagli]

  • Pass the current view to getColumnsClass. This is needed if the view is not the @@plone view and it has different portlets (such as on the portlet management views). This closes http://dev.plone.org/plone/ticket/10320. [davisagli]

  • Repositioned the searchbox for RTL scripts. Fixes http://dev.plone.org/plone/ticket/10367. [emanlove]

  • Stop hiding the (now) non-existing sendto action. Refs http://dev.plone.org/plone/ticket/8800. [dukebody]

  • Fixed help_biography message. [vincentfretin]

1.0b2 - 2010-03-05

  • Established Sunburst-specific browser view similar to ploneview and moved out the logic of applying special width/position CSS class on #portal-column-content from main_template.pt to that view. Closes http://dev.plone.org/plone/ticket/10292 [spliter]

  • Set up testing environment for the package [spliter]

  • Inline images should not have borders (makes it hard to insert graphics that are part of a sentence, or similar), and we don’t have any other round elements in the basic design (the edit bar is special, and is round to differentiate itself from the “stable elements”), so removed the rounded corners for image frames. [limi]

  • Added some padding to a <fieldset> in order to have better-looking forms. References http://dev.plone.org/plone/ticket/9824 [spliter]

  • Moved language selector and personal tools viewlets into plone.portalheader viewlet manager and re-positioned them relatively instead of absolute. Closes http://dev.plone.org/plone/ticket/10252 [spliter]

  • Hide the “up to groups overview” link and fieldset border in the “add group” overlay. Closes http://dev.plone.org/plone/ticket/10149 Closes http://dev.plone.org/plone/ticket/10150 [stuttle]

  • Replaced references to redundant #region-content to #content in stylesheets. References http://dev.plone.org/plone/ticket/10231 [spliter]

  • Adding back IE8.js to fix Sunburst for IE6/7, re-enabling mobile device support. [limi]

  • Adding IE8.js v2.1 beta, this should resolve the issues with @media selectors, and let us re-enable the mobile support again. Thanks to Dean Edwards for fixing this. [limi]

1.0b1 - 2010-02-18

1.0a5 - 2010-02-01

1.0a4 - 2009-12-21

  • made descriptions for items in livesearch wrap normally [spliter]

  • fixed positioning of livesearch to not overflow the screen on the right and have horizontal scrollbar. [spliter]

  • Enabled thumbnails view in Sunburst. Fixes #9870. [spliter]

  • Do not display the author contact form when the author has no email (for example for openid users). Refs #8707. [maurits]

  • On author.cpt, only display the “log in to add comments” button if mailhost is defined. Only show the mailhost warning if user is authenticated. [esteele]

1.0a3 - 2009-12-02

  • Add selectors for openid login form section to login styles. [smcmahon]

  • Sunburst has it’s own table-less prefs_main_template.pt to keep validation of control panels for both sunburst and plonetheme.classic [spliter]

  • removed negative margin from #contentActionMenus - it broke the rounded corner of #edit-bar [spliter]

  • moved “Manage portlets” fallback link out of main_template to plone.manage_portlets_fallback viewlet http://dev.plone.org/plone/ticket/9808 [spliter]

  • Update styles to reflect the move to @@register and @@new-user [esteele]

1.0a2 - 2009-11-18

  • Remove non-ascii character in README that prevented distribution. [esteele]

1.0a1 - 2009-11-18

  • Initial release

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

plonetheme.sunburst-1.5.1.zip (81.2 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page