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

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}
On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML <head> Content area:

Adding a CSS file

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

{TIP()}Use the Change Highlighter button to select the HTML mode.{TIP}

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}
On the Customization tab of the Admin: Look & Feel page, add the following to the Custom HTML <head> Content area:

Adding a CSS file

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

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}
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

Including a CSS file
```
<link rel="stylesheet" href="''DIRECTORY/FILENAME.css''" type="text/css" media="screen" />
```
Click Apply.
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

From the Admin: Look & Feel page, click the Customization tab.
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}
```
Click Apply.
Clear all Tiki caches.

{TIP()}Use the Change Highlighter button to select the CSS mode.{TIP}

From the Admin: Look & Feel page, click the Customization tab.
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}
```
Click Apply.
Clear all Tiki caches.

From the Admin: Look & Feel page, click the Custom CSS tab.
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}
```
Click Apply.
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?

Important

Adding Custom CSS Styles

Including an Additional CSS

Creating Inline Styles

Contents

Follow and Like

Advertising