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!{TIP}

{NOTE()}For complete information on using CSS, see http://www.w3.org/Style/CSS/.{NOTE}

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.

No Tabs

  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.{NOTE}
  2. On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML <head> Content area:
    Adding a CSS file
    Adding a CSS file

    Including a CSS file
    <link 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.{TIP}

  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.{NOTE}
  2. On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML <head> Content area:
    Adding a CSS file
    Adding a CSS file

    Including a CSS file
    <link rel="stylesheet" href="''DIRECTORY/FILENAME.css''" type="text/css" media="screen" />
  3. Click Apply.
  4. Clear the Tiki caches.

  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.{NOTE}
  2. On the General Layout Options tab of the Admin: Look & Feel page, add the following to the Custom HTML <head> Content area:
    Adding a CSS file
    Adding a CSS file

    Including a CSS file
    <link 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:

Including a CSS style
.CUSTOM_CSS_CLASS {padding:1em; font-size:2.0em; font-weight:bold}


Creating Inline Styles

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

No Tabs
  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.
    Look and Feel
    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.{TIP}

  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.
    Look and Feel
    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.

  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.
    Look and Feel
    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:

Using a custom CSS style
{DIV(class="CUSTOM_CSS_CLASS")}
   This text will be styled with the CUSTOM_CSS_CLASS.
{DIV}



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

<HR>
Creative Commons
This guide is written by Rick Sapir and published by tikiforsmarties.com. This guide is Copyright © 2010-2014 by Rick Sapir under a Creative Commons Attribution-Share Alike 3.0 License. Some rights reserved.


Fair attribution includes a return link to http://twessentials.tikiforsmarties.com (for online use) and mention of primary author (Rick Sapir) and publisher (KeyContent.org).

Essentially, you are are free:

Share
to Share — to copy, distribute and transmit the work
Image
to Remix — to adapt the work


Under the following conditions:

Image
Attribution. You must attribute the work to me, as the original licensor, but not in any way that suggests that I endorse you or your use of the work. Fair attribution includes a return link to http://twessentials.tikiforsmarties.com (for online use) and mention of primary author (Rick Sapir) and publisher (KeyContent.org).
Image
Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.


Please read http://creativecommons.org/licenses/by-sa/3.0/legalcode for the full license.

Please read Credits and Acknowledgments for full list of contributors to this project.

Images

The screen images are from Tiki Wiki CMS Groupware, from some versions between Version 6 up to Version 12, and are made available under the GNU Lesser General Public License, Version 2.1 (LGPL). Some pictures and images are from stock.xchng and are subject to the SXC Image License Agreement.

Trademarks

Tiki, Tiki Wiki CMS Groupware, and the Tiki logo are trademarks of the Tiki Software Community Association, used with permission. KeyContent.org and Tiki Essentials are unaffiliated with the Tiki Software Community Association.

Privacy

Please see Privacy Policy for information on how your personal information is treated when you access Tiki Essentials.