Wiki Tutorial:
CSS Tips and Tricks

This tutorial was written for the Wiki "PatternSkin". There are manyvother skins available which are not specifically covered here although the general discussion should be applicable.

Override Page Styles

Wiki "skins" (PatternSkin unless you've changed it) are predefined to have a set of styles - headers are a certain size and color, etc. If you don't like the look, however, you can change it. Wiki (and PatternSkin) are customizable - across webs, pages, or just one or two words.

You can control font, size, and colors, along with other styles of a page (or set of pages), by specifying your own CSS styles or stylesheets. You can make small "surgical" changes by using the CSS <div> or <span> directives. If you want to use a style in many locations, define a class. If you're unfamiliar with CSS, there are many books and tutorials available. Try one of these:

Overriding the Default Stylesheet

The default Wiki skin is called PatternSkin. It's CSS-based and tweakable.

If you want to make a lot of changes, you can include your own stylesheet, overriding (or adding to) the regular CSS styles for the Wiki "skin". A user stylesheet can be specified for an entire web (use caution!) or for a single topic page. Here's how to add your own CSS stylesheets to modify the default (PatternSkin) stylesheets (c.f. Pattern Skin CSS Cookbook)

  • Create a CSS file with your changes.
  • Give it a name that indicates what it is, e.g. blueheaders.css.
  • Attach it to a topic
  • Then, in every topic where you want to use those styles, set the USERSTYLEURL variable appropriately:
   * Set USERSTYLEURL = %PUBURLPATH%/%INCLUDINGWEB%/TopicWithStyle/stylefilename.css

Watermarks (Background Images)

If you want a page to be marked specially, e.g. as "DRAFT", "BETA", or "DEPRECATED", you can add a watermark (stamp) by specifying a background image for the page using CSS.

(Note: You cannot have dynamic (image) references in an external file (i.e. /pub/Help/WikiTutCSS will not be resolved). The path must either be hardcoded in an external css file, or written directly into the content of a topic.)

Instructions and Example:
  • Attach the image file to this topic, WikiTutCSS.
  • Edit the page for the topic that will be using the different background.
  • Add the appropriate CSS code, e.g.
   <style type="text/css" media="all">
     .bgrnd-deprecated {
        background-image:url("%PUBURLPATH%/%INCLUDINGWEB%/Help/WikiTutCSS/deprecated.gif");
     }
   </style>
  • Then wrap the page text in
    tags.
   <div class="bgrnd-deprecated">
   ---+ Header ...
   ...
   </div>

Or, do it this way
<div style="background-image: url('%PUBURLPATH%/Help/WikiTutCSS/deprecated.gif');">
   ---+ Header ...
   ...
   </div>

Example

See an example page.

Tip: Set Variables

For example, to make deprectaing pages easier, you can define a DEPRECATE variable. Then use
    %DEPRECATE%
    text to be highlighted
    %ENDDEP%
to mark part (or all) of a page as deprecated.

Font Size and Styles

Size

Overriding the (standard) sizes of headers can be useful in skins that define third and fourth level heads to be the same size by default. :-(

        Default level 3 head

        Default level 4 head

Use a spanning style to change that.
    ---+++ <span style="font-size: larger;">Larger size</span>
renders as:

        Larger level 3 head


Make
  preformatted text 
bigger (and bolder) like this:
   <span style="font-size: large;font-weight: bold;"> 
     <verbatim>
          preformatted text
     </verbatim>
   </span>
renders as:
  preformatted text

Note: To change only a portion of a block of preformatted text, wrap the block in <pre> tags (<verbatim> tags will not parse the enclosed <span> directive).

   <pre>
      ... <span style="font-size: large;font-weight: bolder;">bigger and bolder</span> ...
   </pre>
renders as:
  The middle of this sentence is bigger and bolder than the rest


Style: underline, strike-out, ...

    ... <span style="text-decoration: line-through;">Tuesday</span> ...
        The meeting is on Tuesday Wednesday.

    ... <span style="text-decoration: underline;">Tuesday</span> ...
        The meeting is on Wednesday this week.

Tip: Set Variables

<!--
   * Set STRIKE = <span style="line-through: underline;"> 
   * Set UNDERS = <span style="text-decoration: underline;">
   * Set ENDSPAN = </span>
-->   

Example: Use %UNDERSPAN% text to be underlined %ENDSPAN%


Highlighting (background color)

    ... <span style="background-color: #FFFF33;">highlighted text</span> ...
        regular text, highlighted text, more regular text

Use <div> instead of <span> to highlight a complete line

        regular text,
start highlighting

Tip: Set Variables

<!--
   * Set HILITE = <span style="background-color: #FFFF66;">
   * Set HILITE_YELLOW = <span style="background-color: #FFFF66;">
   * Set HILITE_GREEN = <span style="background-color: #66FF66;">
   * Set HILITE_BLUE = <span style="background-color: #00FFFF;">
   * Set HILITE_PINK = <span style="background-color: #FFCCFF;">
   * Set HILITE_PURPLE = <span style="background-color: #EEDDFF;">
   * Set ENDHI = </span>
-->   

Example: Use %HILITE% text to be highlighted %ENDHI%.


Spacing: Vertical and Horizontal

Increase margin width (text indentation)

   <div style="margin-left: 40px">
   ... text to be indented
   </div>

Increase
the
left
margin
of some text

Tip: Set Variables

<!--
   * Set INDENT = <div style="margin-left: 40px;">
   * Set ENDENT = </div>
-->

Adjust inter-line spacing

   <div style="line-height: 30px">
     text to be adjusted
   </div>

Example: Normal vertical spacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mattis dignissim est. Donec sem. Vestibulum varius justo sit amet est. Vivamus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla purus. Phasellus nisl. Nam id ipsum. Ut elementum ligula vel quam. Nunc tincidunt turpis nec felis. Sed vulputate scelerisque lectus.

Example: Increased vertical spacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mattis dignissim est. Donec sem. Vestibulum varius justo sit amet est. Vivamus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla purus. Phasellus nisl. Nam id ipsum. Ut elementum ligula vel quam. Nunc tincidunt turpis nec felis. Sed vulputate scelerisque lectus.

Add Space Between Sections

To add space above (or below) content, e.g. to push content down the page, try this:

<style>
  .vertical-20 { margin-bottom: 20cm;}
</style>

<p class="vertical-20"></p>

Color Cells in a Table

Color Cells Based on Their Contents

A lot of people like to use status codes, e.g. "Open", "Working", "Closed" or even the very simple "Green", "Yellow", "Red". A combination of CSS and JavaScript can be used to color table cel backgrounds depending on the word in the cell. See TWikiTutColorTable for details.

Project Status
abc green
xyz red

Coloring One Cell

If you just want to color one cell, you can do it in any of several ways.

Color the Background of the Text

This example uses the highlighting trick described above. Note that both the <span> and <div> methods have a narrow white border. The text is highlighted, not the cell background.

| *Col1* | *Col2* | *Col3* |
| row one column one | row one column two | row one column three|
| row two column one | <span style="background-color: #FF0000"> row two column two </span> | row two column three |
| row three column one | row three column two | <div style="background-color: #00FF00"> row three column three </div> |

Col1 Col2 Col3
row one column one row one column two row one column three
row two column one row two column two row two column three
row three column one row three column two
row three column three

Or simplify with variables (see above).

| *Col1* | *Col2* | *Col3* |
| row one column one | row one column two | row one column three|
| row two column one | %HILITE_YELLOW% row two column two %ENDHI% | row two column three |
| row three column one | row three column two | %HILITE_GREEN% row three column three %ENDHI% |

Col1 Col2 Col3
row one column one row one column two row one column three
row two column one row two column two row two column three
row three column one row three column two row three column three

Modify the Parameters of the Table Cell

This is a bit trickier...

| *Col1* | *Col2* | *Col3* |
| row one column one | row one column two | row one column three|
| row two column one </td><td bgcolor='#FF0000'> row two column two | row two column three |
| row three column one | row three column two | row three column three |

Col1 Col2 Col3
row one column one row one column two row one column three
row two column one row two column two row two column three
row three column one row three column two row three column three

Topic attachments
ISorted ascending Attachment Action Size Date Who Comment
deprecated.gifgif deprecated.gif manage 2 K 02 Mar 2009 - 21:11 VickiBrown Deprecated GIF
Topic revision: r2 - 22 May 2015, VickiBrown
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email