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.

Detailed documentation

Set up and log in

>>> from Products.Five.testbrowser import Browser
>>> browser = self.getBrowser()
>>> browser.handleErrors = False
>>> portal_url = self.portal.absolute_url()
>>> self.portal.error_log._ignored_exceptions = ()
>>> self.loginAsPortalOwner()
>>> from zope.component import getUtility
>>> from plone.portlets.interfaces import IPortletType
>>> portlet = getUtility(IPortletType, name='portlets.Calendar')

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
>>> self.view = SunburstView(self.portal, self.app.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 columns

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

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 right after adding it like Calendar portlet.

>>> mapping = self.portal.restrictedTraverse('++contextportlets++plone.leftcolumn')
>>> addview = mapping.restrictedTraverse('+/' + portlet.addview)
>>> addview()
''
>>> browser.reload()

In this case we should have the left column. But not the right one.

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

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')

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 Calendar portlet to the right column to have both columns populated and visible

>>> mapping = self.portal.restrictedTraverse('++contextportlets++plone.rightcolumn')
>>> addview = mapping.restrictedTraverse('+/' + portlet.addview)
>>> addview()
''
>>> 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.

>>> from Products.Five import zcml
>>> from plonetheme.sunburst.tests.base import zcml_string
>>> zcml.load_string(zcml_string)
>>> portal_setup = self.portal.portal_setup
>>> portal_setup.runAllImportStepsFromProfile('profile-plonetheme.sunburst:testing')
{...}
>>> 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')

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.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.3.0.zip (74.0 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