An elegant fixed-width CSS-based theme that supports 2- or 3-column layouts. Also printer and mobile device friendly.
The pinstripes theme has three style sheets enabled as part of the theme package. In addition to the style.css document that controls the display of the content on a computer screen or while using a projector, a second style sheet controls how the page content is printed. The third style sheet has been enabled for use by site visitors with cell phones, pocket PCs, smart phones, and other mobile devices. These style sheets will be called into use automatically, depending on the type of device that is retrieving a particular page from your site.
These style sheets also contain built-in style classes that you can use to control what page content will be printed or displayed with each media type, and you can include these classes while coding your content.
This theme would be suitable for simple websites that don't require a separate theme to serve specialized content to mobile device users. A theme switcher or extra scripting would not be needed to make full use of the Pinstripes theme.
Using the mobile friendly CSS style classes:
You should suppress the display of large images on mobile devices. While these devices can reduce an image as needed, the actual file size of the image isn't reduced. A 300-meg image will remain a 300-meg image, even if it's being displayed on a cell phone screen that is only 150 pixels wide. Also, you need to take bandwidth issues into account: some of your users may be visiting your site using a relatively slow cell phone network.
To hide a large image, I've created a special dontShow style class and it's included in the handheld.css style sheet. All you need to do is to add a class="dontShow attribute and value pair to the XHTML element code for the image. For example:
<img src=largeimage.png" class="dontShow" height="450" width="750" alt="view of the City of San Francisco, California" />
Displaying large data tables can be problematic on mobile devices, especially on mobile phones with tiny screens. You can use the dontShow class to hide tabular data (or layout tables) from view on these devices:
<div class="dontShow">
... table code ...
</div>
In addition to the dontShow class, there is also a handheldOnly CSS style available for use. There may be some cases where you have content that you want to display only on mobile devices.
For example, table-based content is generally not well displayed on mobile devices. Use this class for alternative content for these users:
<div class="handheldOnly">
... alternative content ...
</div>
Using the printer friendly CSS style classes:
In the Pinstripes theme, the printer friendly style sheet (print.css) has been set up so that nothing in the left or right sidebars will be printed. Also, the Primary Links menu won't be printed (if you're using the default placement, which is right under the page header).
You may want to suppress the printing of a particular chunk of content within the main page content column as well. For example, if you have a custom search form on one of your pages, there's a dontPrint style class that you can use to suppress the printing of this search feature. This style class can be used with a variety of XHTML elements, including <p>, <span>, and <div>. For example:
<div class="dontPrint">
... custom search form code ...
</div>
In addition to the dontPrint class, there is also a printOnly CSS style available for use. There may be some cases where you have content that would be suitable for a printed page but not displayed on other media.
For example, if you're offering a Instant Messaging window on a particular page, you can keep the IM window from being printed and provide basic information about the IM service, including the URL to use to connect to the service:
<div class="printOnly">
... information about the IM service ...
</div>
Two-column content:
The Pinstripes theme also includes two CSS classes that enable you to use a two-column format within the Content column, leftColumn and rightColumn.
Use the <div> element to enclose the content that would appear in each column:
<div class="leftColumn">
... content ...
</div>
<div class="rightColumn">
... content ...
</div>
If you want to use a one-column layout after a two-column section, add a clean break after the coding for the two-column content. This code should eliminate any awkward wrapping problems:
<br clear="all" />
Note: the leftColumn and rightColumn styles have been set to a width of 100% in the handheld.css document. This means that all of the page content will be displayed in a one-column format on mobile devices.
