Adding Custom CSS Styles

There are two ways to add custom CSS styles to your Tiki:

Later, you'll see how to add these styles on a per-page basis.

Tip: Use the Tiki Theme Generator to customize your site's theme without having to modify CSS files!

Note: For complete information on using CSS, see http://www.w3.org/Style/CSS/.

Including an Additional CSS

If you already have custom styles in a CSS style sheet, you can easily add the CSS file to your Tiki.

9.x

1. Copy your .css to your webserver. You could FTP the file, or even use Tiki's file gallery to store the file.
   

   Note: Depending on your server configuration, storing CSS files in the Tiki file gallery may cause performance issues.

2. On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML Content area:
   
   

   Adding a CSS file
   
   
   Including a CSS file

   <li<x>nk rel="stylesheet" href="DIRECTORY/FILENAME.css" type="text/css" media="screen" />

3. Click Apply.
4. Clear the Tiki caches.

Tip: Use the Change Highlighter button to select the HTML mode.

8.x & 7.x

1. Copy your .css to your webserver. You could FTP the file, or even use Tiki's file gallery to store the file.
   

   Note: Depending on your server configuration, storing CSS files in the Tiki file gallery may cause performance issues.

2. On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML Content area:
   
   

   Adding a CSS file
   
   
   Including a CSS file

   <li<x>nk rel="stylesheet" href="DIRECTORY/FILENAME.css" type="text/css" media="screen" />

3. Click Apply.
4. Clear the Tiki caches.

6.x

1. Copy your .css to your webserver. You could FTP the file, or even use Tiki's file gallery to store the file.
   

   Note: Depending on your server configuration, storing CSS files in the Tiki file gallery may cause performance issues.

2. On the General Layout Options tab of the Admin: Look & Feel page, add the following to the Custom HTML Content area:
   
   

   Adding a CSS file
   
   
   Including a CSS file

   <li<x>nk rel="stylesheet" href="DIRECTORY/FILENAME.css" type="text/css" media="screen" />

3. Click Apply.
4. Clear the Tiki caches.

You can now use any of the styles from your custom .css file in a Tiki wiki page. For example, you could use the DIV plugin:

Creating Inline Styles

If you do not have a completed CSS file, you can create custom CSS styles in Tiki.

9.x

1. From the Admin: Look & Feel page, click the Customization tab.
2. On the Customization tab, type your CSS style definitions in the Custom CSS field.
   
   

   Custom CSS style definitions
   
   
   Including a CSS style

   .CUSTOM_CSS_CLASS {padding:1em, font-size:2.0em; font-weight:bold}

3. Click Apply.
4. Clear all Tiki caches.

Tip: Use the Change Highlighter button to select the CSS mode.

8.x & 7.x

1. From the Admin: Look & Feel page, click the Customization tab.
2. On the Customization tab, type your CSS style definitions in the Custom CSS field.
   
   

   Custom CSS style definitions
   
   
   Including a CSS style

   .CUSTOM_CSS_CLASS {padding:1em, font-size:2.0em; font-weight:bold}

3. Click Apply.
4. Clear all Tiki caches.

6.x

1. From the Admin: Look & Feel page, click the Custom CSS tab.
2. In the Custom Code area, type your CSS style definitions in the Custom CSS field.
   
   

   Custom CSS style definitions
   
   
   Including a CSS style

   .CUSTOM_CSS_CLASS {padding:1em, font-size:2.0em; font-weight:bold}

3. Click Apply.
4. Clear all Tiki caches.

You can now use your custom style in a Tiki wiki page. For example, you could use the DIV plugin:



Now that you know how to customize specific CSS styles, how can you determine which CSS style to edit?

---