Toolchain

Preparing Zope & Plone

If you are creating the skin on the file system (recommended)  rather than through the ZMI there are several methods you can use to make debugging simpler.

Zope Debug Mode

Running Zope in debug mode enables skin changes to be reflected on the site instantly. There are several ways to enable this:

• in etc/zope.conf set:
  

   debug-mode on

  then restart zope using the following (in order to display error log to your console)
  

  zope_instance/bin/runzope

• OR start zope using :
  

  zopectl fg

• If you installed using the Windows installer version of Plone there is an option to run in Debug mode in the Plone Program menu.

Reloading Products

If you are not using debug mode there is still a way to update changes to a skin product using the reload option. To enable this option you need to have a refresh.txt file inside your product folder (DIYPloneStyle's generator creates this by default). 

• In the ZMI, go to Control Panel -> Product Management -> Name of your skin product
• load the Refresh tab and click the 'Refresh this Product button' to reload the product.

CSS Resource Registry  

To help the performance of a Plone site, portal_css merges all the stylesheets for a page into just one CSS file. To make debugging you custom css simpler you can use its debug mode which prevents this merge:

• In the ZMI go to Plone Site -> portal_css
  
• Tick the Debug mode box and press the save button.

DOM Inspectors

Document Object Model or DOM for short, is a term used to describe how a html page (or xml document) is structured and provides an API to access. The browsers convert the raw text from the html/xml file into a DOM and then use it to apply CSS and other transformations.

So why is this useful for us? Well the HTML and CSS in Plone's default skin does a lot of things well – the downside of all this power is that its complicated. So sometimes you want to change just a simple element but you don't know how to get a handle on that item to write the relevant css.

This is where the DOM Inspectors come in...... You can see the structure of the page in a tree and receive visual feedback as you traverse all the elements. Once you've found it you can easily find out all the attributes such as class, id, and parent elements.

Firefox DOM Inspector

When you install firefox, make sure you enable the Web Developer tools option from the Custom installation menu.

Firefox comes with a very useful DOM inspector tool. To open it go to the Tools menu and look for it near the bottom. Alternatively in Windows Firefox press Ctrl + Shift I , or in Mac Firefox Apple key + Shift + I.

First thing you'll probably have to do is maximise the DOM Inspector – it works much better with a large screen.

Then go to the File menu and select Inspect a URL. Enter the address for the site you want to inspect and the page will load up in the bottom pane of the DOM Inspector.

There are two basic ways of using the Inspector :

Traversing the tree

In the tree pane in the top left, use the + icons to expand each node. Starting with #document, then HTML and BODY as you expand you reveal more and more of the elements; Notice that there are columns for id and class to help you find where you are.

As you click on each element you will see the the relevant visual element flashing below in the browser pane.

Now, Lets find the navigation tree elements:

• Expand the DIV with id visual-portal-wrapper (the Plone specific container for all the page)

• Locate and Expand TABLE with id portal-columns (this contains the central part of the page)

• Expand TBODY, TR and then TD with the id portal-column-one (left column)

• Finally expand the DIV with the class visualPadding to reveal the portlet items including the portlet-navigation-tree

Select Element by Clicking

Go to the search menu and choose the last option 'Select Element by Click'

Now go to the browser pane and click on the element you want to highlight in the tree.

To find another element you need to repeat the first step again.

Web Developer Extension for Firefox

The Web Developer Extension adds a very powerful & useful toolbar to your firefox browser which really helps while developing Plone Skins.

Here are some of the many features it offers:

• Edit CSS instantly - no need to make changes in the ZMI or FileSystem and refresh.
• View Style information - click on elements of the page to bring up the relevant CSS declarations.
• Disable all/specific stylesheets
• Apply new stylesheets
  
• Display outlines of all/specific elements on the page (e.g all <div>, or <ul>)
  
• Generate a list of all images on the page.
• Resize the browser window to common or custom sizes e.g. 1024 x 768, 800 x 600 etc.
• Display detailed information about Forms, Links, Meta Tags, HTTP Headers, Document Size and more.
• Validation: for HTML / CSS  / RSS / Accessibility / Links
• Ruler - Measure how tall/wide parts of the page are. No need to guess how many pixels your CSS is out any more!
  

FireBug extension for Firefox

FireBug is the DOM inspector on steroids, and is insanely useful for inspection of HTML, CSS and Javascript.

Once installed it sits quietly in Firefox's status bar (below the browser window). Everytime a page loads it checks for and logs any errors it finds into its console. If the page has no errors on it displays a green tick icon otherwise it displays a red cross with and lists the number of errors found.

To use all the cool features simply click on either of these icons to display the FireBug pane:

Legend

1. FireBug Icon (green tick)
2. Inspector tab - use to switch from console mode (list of errors and alerts) to inspection mode.
3. Inspect button - use this to enable/disable element selection using the mouse. When enabled you can hover over elements in the browser pane and select the elements you want to inspect.
4. Source & Style tabs - switch between these to view the HTML or the selected element's CSS attributes.
   

From here you can view errors in the Console or switch to the Inspector tab to display the pages HTML interactively. Click on the arrow icons to expand/collapse each tag and traverse to your required element. Alternatively use the inpector button to choose the element from the website itself.

View Source Chart Extension for Firefox

The View Source Chart Extension makes understanding the structure of an HTML document so much easier.

Once installed simply right click anywhere on the page you want to view and look for "View Source Chart". This will load the chart up in a new window:

You will notice that different elements have different colors for easy readability, and each container is collapsible by clicking on it which can really help you isolate the items you are interested in.

Now that you have the basic tools for looking up classes and IDs on the element you want to change, we can continue with putting a new look on Plone.