(For more resources on Plone, see here.)
The last key piece to successfully skinning a site is to choose a text editor or CSS editor that matches your needs and plays well with Plone. We are not talking about a word processor here, like Microsoft Word or Pages; rather, a text editor is a type of program used for editing plain text files. Text editors are often provided with operating systems or software development packages, and can be used to change configuration files and programming language source code.
We'll look at a few of the more popular text editors that are appropriate for Plone development and theming.
TextMate is a combination of text editor and programming tool that is exclusively for the Mac, and can be found at http://macromates.com.
One of the key joys of working with TextMate is that it lets you open up an entire file structure at once to make navigation between related files easier. For Plone, this is essential. Your average file structure will look something like this:
Rather than opening the entire buildouts folder, or even the plonetheme.copperriver folder, generally you only want to open the structure closest to the files you need in order to keep performance snappy—in this case, mybuildout[rockaway]/src/plonetheme.copperriver/plonetheme/copperriver/:
As you can see, it opens the entire project in a clean interface with an easily navigable structure. Without this feature, skinning for Plone would be much more time-consuming.
TextMate also offers numerous programmer-related tools:
- You can open two files at once (or more), and using the diff option you can compare the files easily
- Subversion (svn) support
- Ability to search and replace in a project
- Regular expression search and replace (grep)
- Auto-indent for common actions such as pasting text
- Auto-completion of brackets and other characters
- Clipboard history
- Foldable code blocks
- Support for more than 50 languages
- Numerous key combinations (for example, Apple + T opens a search window that makes it easy to locate a file)
- Themable syntax highlight colors
- Visual bookmarks to jump between places in a file
- Copy/paste of columns of text
- And much, much more
The Bundle feature is one of the more interesting aspects of the tool. If you look at the HTML bundle, for example, it shows a list of common actions that you might wish to perform in a given document, and on the right, the code that spawns that action, and the hot-key that activates it.
There's even a Zope/Plone TextMate support bundle found at http://plone.org/products/textmate-support that was developed by some of Plone's core developers. It enhances TextMate's already existing support for Python, XML, (X)HTML, CSS, and Restructured Text by adding features aimed specifically at the modern day Zope and Plone developer.
For the geeks in the audience, the bundle's features include: Doctest support (restructured text with inline Python syntax and auto-indent of python code), pdb support (for debugging), ZCML support (no more looking up directives with our handy and exhaustive snippets), and a ZPT syntax that marries the best of both worlds (XML strictness with the goodness of TextMate's HTML support). This bundle plus TextMate's other capabilities make switching to developing for Plone on a Mac a good idea any day!
As well as assigning a single key equivalent to a bundle item, it is possible to assign a tab trigger to the item. This is a sequence of text that you enter in the document and follow it by pressing the tab key. This will remove the sequence entered and then execute the bundle item. TextMate is full of hot-keys and features in general, yet it's surprisingly compact. Thankfully, the documentation is thorough.
TextMate is a dream for themers and programmers alike. For those who are still new at CSS, another tool might be a good place to start, but for power users, TextMate is the primary tool of choice.
(For more resources on Plone, see here.)
CSS Edit (not to be confused with CSS Manager, a Plone add-on), is a lovely, easy-to-use CSS tool for OS X. It can be purchased at http://macrabbit.com/cssedit for around $30.00.
To get started, click on the Add Site URL button. It allows you to navigate to either a localhost site or a live site. Next, click on the Inspector button. An inspector pane pops up that is updated as soon as you click on an element on your page. The element is also highlighted nicely and shows arrow indicators if you want to click to expand to the containing object and show the parent's CSS instead.
Expanding the arrow to the right of the Make A Difference button in the above screenshot selects the ID globalnav-wrapper, as indicated here and in the top hierarchy bar.
If you select one of the styles in the black Applied Styles window, it pops up a message that asks if you wish to override an existing stylesheet with a local stylesheet. Answering in the affirmative opens a small CSS editor window where you can make additional changes, see the immediate effects, and still access the Applied Styles window/navigator.
In this case, I opted to let it extract all of the CSS from my theme product's main stylesheet, wec.css. This prevents the issue of having to integrate your changes from a blank stylesheet into your core stylesheets, though you could optionally do that.
In order to test the functionality of this product, it requires you to purchase the product if your site has over 2500 characters of code in it.
According to the developers of CSS Edit, it offers real-time styling of absolutely any web page. Even if your site is powered by a complex database or makes use of advanced AJAX, you can style and analyze it without the hassle of uploading or refreshing.
The Selector Builder lets you describe what elements to style in plain English. Advanced CSS selectors have a steep learning curve, but with this product there is help. In the case of some of the more convoluted areas of Plone to style, such as the navigational structures, this feature is helpful.
You can also take advantage of a feature called CodeSense. Instead of merely suggesting a list of predefined keywords, it analyzes your stylesheet and behavior to offer context-sensitive suggestions.
Additionally, you can use the Validation inspector to check your site against W3C conventions.
Finally, using a Milestones interface, you make big changes without any risk of losing your work, and still have the option to roll back.
All in all, this is a slick tool. It's a bit pricey, but for people who want a little extra assistance with their CSS, it's invaluable.
The downside of this tool is actually not the tool itself: it's Plone. For themers who will be working on the filesystem, you'll quickly learn that Plone's file structure is scattered, and it's important to be able to access the various pieces and parts quickly; this tool doesn't provide that flexibility. Ultimately, this tool is best for CSS-only tasks, not for filesystem development of themes. As Plone development evolves and the Deliverance and collective.xdv tools for theming becomes more of a reality, this tool may have more applicability.
E Text Editor
As a Windows alternative to TextMate, E Text Editor provides much of the same functionality (www.e-texteditor.com) for a mere $34.95.
It can automate manual work via snippets, and it supports Text Mate bundles. It gives you access to the full range of UNIX shell tools and lets you extend "e" with your choice of languages such as Python and Ruby. Moreover, "e" users get the luxury of a personal revision control system. As with TextMate, you can even open up a directory full of files all at once, which can be invaluable in Plone development.
As a Windows-based text editor, "e" is an excellent first choice.
As a text pad alternative for Windows users, the Windows default, Notepad will certainly suffice. Notepad does not support formatting of any kind. If rich text is copied from a web page and pasted into Notepad, then copied again from Notepad before being pasted into a destination program, Notepad will have stripped all of the formatting. This can be very handy when dealing with the HTML that is pasted into kupu (Plone's visual editor), but it doesn't help much in terms of working with code in Plone. It doesn't give you shortcuts, bundles, or helpful highlighting, but as a straight text editor, it does the trick.
As an interesting aside, Notepad does support both left-to-right and right-to-left based languages, and one can alternate between these viewing formats by pressing and releasing the arrow key followed by Ctrl+Shift, using the right or left arrow and shift keys to go to right-to-left format or left-to-right format, respectively.
Notepad can edit files of almost any format; however, it does not treat Unix- or Mac-style text files correctly, but another text editor, Wordpad, does.
As lightly more sophisticated text editor for Windows, WordPad is also a fine choice, though still lacking in Plone-specific features. WordPad supports Rich Text Format (RTF), which doesn't help us much, but it does allow fi les shared between OS X and Windows to be read correctly. If you're using it solely as a text editor, you'll be fine.
Sometimes regarded with a little snobbery, Dreamweaver could hypothetically be used if no other options exist for Windows or OS X users. Using the code layout view is really the only part that makes it usable in Plone development. Unfortunately, Dreamweaver tends to be a bit of a memory hog and can be a little slow. Additionally, you can't open up a directory containing multiple files, which means it will slow themers down significantly. In investigating it for this article, it was not possible to open .pt (page template) files using Dreamweaver, which is a deal breaker, as page templates are certainly part of the theming process. It's not known if this is merely a configuration error, but several attempts at configuring Dreamweaver to open .pt files failed.
All in all, Dreamweaver is intended for editing CSS and HTML files, and without page template support, it has limited use for Plone themers.
In this two-part article series, we have learned:
- What graphic design tools are appropriate for theming a web site and why
- How to validate your CSS against W3C conventions
- What text editors are appropriate when developing for Plone and why
- Find and Install Add-Ons that Expand Plone Functionality
- Skinner's Toolkit for Plone 3 Theming (Part 1)