LunpaCMS - A CMS Framework for building Perl Websites

A Quick Introduction

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.

CSS-Based Layout Vs. Table-Based Layout

Tables were originally introduced just to display tabular data, but then became the most popular way to layout website design. However, as CSS has more power on styling of HTML element, it became another popular way to design a website's layout. While CSS has several advantages over table-based designs, LunpaCMS does not fully embrace a browser as the only HTML parser we use. Adding MUAs such as Outlook and Thunderbird to the mix and the use of CSS becomes less than ideal. Because templates can be emailed and can be used interchangeably with traditional browsers and LunpaCMS features such as Newsletter Manager, the use of pure CSS is still several years off.

CSS in Email

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client. (from: http://www.campaignmonitor.com/css/) The use of table-based designs and inline CSS to properly support Mail User Agents (MUAs) is often the only viable choice.

How to Add CSS to Your Site

In order to add CSS to your site, you can do one of two things:

You can make sure your LOCAL_SKIP_PRINT_HTML_HEAD_AND_BODY to 0 so that LunpaCMS automatically creates the head of your html page(NOT what you want if you have a custom html head in main_begin.template) and then create a template to use as a stylesheet and set LOCAL_STYLESHEET to that template.
You can create a separate local stylesheet and link to it by adding the line below in your custom header in main_begin.template. Make sure you have LOCAL_SKIP_PRINT_HTML_HEAD_AND_BODY set to 1 for this configuration.
```
<head>
  <title>Page Title</title>
  <link rel="styleSheet" href="/resources/css/local.css" type="text/css"> 
</head>
```
You can create a template to use as a stylesheet and set LOCAL_STYLESHEET to that template. Add a LunpaCMS stylesheet tag to your custom header in main_begin.template. This can be combined with local.sss, resulting in HTML similar to the following:
```
<head>
  <title>Page Title</title>
  <link rel="styleSheet" href="/resources/css/local.css" type="text/css"> 
  :::STYLESHEET:::
</head>
```

Overwriting Manager CSS

Many LunpaCMS managers use CSS rules to style their HTML elements. These rules are stored in one CSS file for easier maintenance at globalresources/css/managers.css. To distinguish one manager's CSS rules from others, each manager's CSS rules start with either a unique CSS class selector or a unique prefix in its class name. For example, CSS rules for News Manager start with class selector '.newsMgr', and name of CSS rules for Employee Manager starts with prefix 'empMgr_.' If you want to override any LunpaCMS managers rule, you can write your own rule in your local CSS file. Include LunpaCMS manager's CSS file prior to site's local CSS file to ensure that local CSS rules can override managers' default CSS rules.

<head>
  <title>Page Title</title>
  <link rel="styleSheet" href="/globalresources/css/managers.css" type="text/css"> <!-- LunpaCMS Manager's CSS File -->
  <link rel="styleSheet" href="/resources/css/local.css" type="text/css"> <!-- Site Local CSS File -->
</head>
</code>

Printer-Friendly Page by CSS

Sometimes we need to make printer-friendly version of web pages, usually by hiding page layout HTML elements remaining only page content. This page layout HTML element hiding can be accomplished using CSS. To include CSS file which applies only to printer, add "media='print'" attribute. Override CSS rules used for page layout to hide them when printing.

<link rel="styleSheet" href="/resources/css/printer.css" type="text/css"> <!-- Site Local CSS File For Printer -->

Nickname:
E-mail Address:
Comment:	(Only a limited set of HTML tags such as <b>, <i>, <u> are allowed. Embedded flash video from Youtube or Vimeo are also supported.)