Forum

This topic describes an advanced technique for customizing a website by defining and applying styles to the site pages using CSS technology.

To start using custom styles for the whole website create custom.css file in the top-level directory. The content of that file will be appended to the styles provided by the site design template. Any style defined in the template can be overridden (redefined) in the "custom.css" file.

Three Ways to Define Styles for Your Content

1. Good Approach: Your Own Classes

Define classes for elements, write styles for those classes and use them on any page of your website. Avoid class name conflicts with classes, defined in CMS template by adding a prefix to your own class names.

Example:
/custom.css:

/* Enlarged semi-bold font, red letters */
.my_header1 { font-size: 125%; font-weight: bolder; color: red; }

/* Italic font, blue letters */
.my_remark { font-style: italic; color: blue; }

/* Green framed box with padding, border, and limited width */
.my_green_box { 
  padding: 5px; 
  width: 500px;              /* fixed width */
  border: 3px solid green; 
  border-radius: 5px;        /* rounded corners in modern browsers */
  background-color: #80ff80; /* light green as hex RGB */
  color: black;
  margins 10px 20px 5px -30px; /* clockwise margins, left-shifted by 30 pixels */
  /* Negative margins could compensate unneeded margins of the parent container */
}

Usage on a web page (or menu):

The CMS engine permits using of "div", "span", "table", "p", "pre" tags without 
<html></html> escapes, but keeps considering content of DIVs and SPANs as wiki-formatted text. 

Here we use this feature for easy styling the page content:

This sentence will contain <span class="my_remark">emphasized phrase</span>, 
which has been embedded into regular text via span tag. The span tags produce 
in-line content.

<div class="my_header1">
This will look like a header because div tags produce boxes 
(separate rectangular areas) and this box has custom style.
</div>

<div class="my_green_box">
And this looks like a banner or sticker according to the "my_green_box" class.
</div>

If DIVs and SPANs are not enough, custom class styles can be used within HTML inserts, like here:
<html>
<h2 class="my_header1">This header styles modified according the "my_header1" class rules.</h1>
<p class="green_box">And this paragraph is also a "green box".</p>
</html>

2. Harder Approach: Override or Extend Template Styles

Examine classes and styles provided by the site template and re-define what you want by writing your "/custom.css". The template styles can be inspected easy using FireBug tool (right click on the element and choose "Inspect Element" on the menu), or by viewing any resulting site page HTML and CSS. Then tweak what you want by writing modified css definition into your custom.css. Or define new global rules for already existing layout.

Example:
/custom.css:

/* These rules modify link font in the top menu of the actual "Anuko" template:*/
.topMenu a:link { font: color: yellow; }
.topMenu a:hover { font: color: red; }

/* This rule adds a background image for the page content area: 
(Anuko template defines it as <div class="content_area">) */
div.content_area { 
  background-image: url('/img/my_gray_marble.png');
  background-repeat: repeat;
  background-position: top left;
}

/* And this rule adds a silver background for all default <h1>
   headers within the content_area */
div.content_area h1 { background-color: #e0e0e0; }

It affects all pages of the website. You don't need to edit web pages individually. A change in custom.css file will affect the entire website.

3. Inline Styles for One-time In-place Patches

Specify style attribute for some tag just in place for one-time style corrections only.

Example:
Usage on a web page (or menu):

Our telephone number is <span style="font-weight: bolder; font-size: 125%; color: red">555-55-55</span>.
It is provided only here. 
Our web-site does not contain any other content written in big red letters.

All three methods can be combined if necessary.