Design Your Own CSS Theme

This document is a work-in-progress. Please contribute if you wish!

This is a howto that describes a way to create your own appearance for your site.

Introduction

A theme is a structured template, written in a markup language called Cascading Style Sheets (CSS), that controls the appearance and graphical layout of a page. The theme defines the font to be used, its size, the location of text, colors, and background images. However, themes are independent from the actual informational content of the page, so they make it possible to change the visual presentation without having to re-enter the actual text or other data.

Wikidot.com already offers a several basic CSS themes to choose from. But it is certainly never a bad idea to create your very own look for your site. The whole trick is to write new CSS code that is placed upon the existing themes so you do not have to write everything from scratch. E.g. to just change most of the colors you need to produce as much as 20 lines of code. And this HOWTO will tell you how.

Basics

When creating a new theme you will have to extend already existing themes. Custom themes are created per site and are available only within a given site.

To create new themes you will certainly need some CSS and design skills. You can learn a lot at sites like the following:

w3schools - css

tutorial and reference documents.

Web 2.0 Design Guide - Why it works

"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry

Zen Garden - The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS-based design.

css/edge

A rejection of what's practical in favor of what's possible. complexspiral example

ColorBlender

makes it very quick and easy to create a color scheme for e.g. a website.

Step-by-Step Guide

Step 1: Manage the Site's Appearance

Go to the Site Manager (by default available at the page admin:manage). There should be a link on the side bar of your pages.

Click on Appearance » Custom Theme.

Of course you will need an administrator role within the Site.

Step 2: Create a Custom Theme

If you already have some custom themes defined you should see them listed. In order to create a new one:

• click create a new theme
• choose a name for the theme
• choose a theme you want to extend…

You can basically extend any theme available. However if you want to start from a plain look as much as possible than you should choose Base theme. Every theme on Wikidot.com extends the Base theme. This theme contains basic layout for pages, dialogs, forum etc. We will come back to it later.

But if you just want to change e.g. colors in an already available theme, then choose this theme (e.g. change colors in the Cappuccino theme).

At the moment suppose you want to extend the Base theme.

Choose an editing method

The box with the title 'CSS code' shows the CSS in your custom theme. It begins blank (it doesn't display the CSS from the theme you are extending, only the additional CSS you build on top of this. The additional code will appear after the end of the original theme and override existing definitions).

There are 2 ways to manage your CSS code: put it directly into the box or (which we recommend) keep all the CSS code in a separate special page on your wiki, and use the 'import' button to import it to the box. This way you can easily keep revisions of your theme as you do with wiki pages. The CSS is extracted from the first [[code]] … [[/code]] block in the specified page. The process of taking code from the 'sync' page isn't an automatic one - so each time you change it you have to use the custom theme administration controls and click "import" and "save theme".

So we recommend here to open a new window in your browser and create a (empty) page called css:mytheme (or any other that suits you). Put this name in the theme form.

The “save theme” function will not export the code back in your CSS wiki-page but record the content of the box as a custom theme. If you use this method you must:

1. Edit and save your custom CSS code in your css:mytheme wiki page ( this is not an active CSS but just text data)
2. Create or select your custom theme from manage site / Appearance / custom themes
3. "import" the CSS data from css:mytheme wiki page
4. "Save theme" in order to save CSS data in the real custom theme.

Select navigation elements

Decide if you want to use side/top navigation (menu) elements. Select whether your theme will use it or not?

Save the theme

Even if you do not have CSS ready yet - you will write it later.

Step 3: Write CSS for the Theme

This is the most important step. To do this properly you will have to learn first how the theme you are about to extend is implemented.

For the Base theme look at the CSS file: http://www.wikidot.com/common--theme/base/css/style.css

As you can see this CSS imports a few other styles too:

http://www.wikidot.com/common--theme/base/css/odialog.css	used for dialogs (window pop-ups)
http://www.wikidot.com/common--theme/base/css/forum.css	basic forum look definitions
http://www.wikidot.com/common--theme/base/css/editor.css	wiki editor
http://www.wikidot.com/common--theme/base/css/autocomplete.css	used for autocomplete element - leave this alone
http://www.wikidot.com/common--theme/base/css/text_highlighter.css	defines colors for code highlighting (within [[code]] … [[/code]] blocks)

If you aren't sure of the address of the CSS for the theme you are already using just check the source code on one or your pages (look for 'style type="text/css" id="internal-style")'.

Most probably you will only be interested in forum.css and odialog.css. But not too much anyway.

Structure of the page

Most likely you will need to know the DOM structure of the page i.e. what elements are there, what classes and ids etc. Each of the pages has more or less the same layout. You can learn this by:

• looking at the HTML source code (in your browser) for a page
• reading the Layout Reference document
• using the Web Developer extension for Firefox and clicking Outline » Outline current element
• exploring the DOM structure by using the DOM Inspector (Firefox has it) or equivalent tools

Learn by example

Let us see how the Flannel Ocean theme is defined - it directly extends the Base theme. The CSS is located here.

What the style actually does:

• defines layout for header, footer, side bar and page content
• defines font sizes and colors for elements such as headings, anchor links etc.
• changes colors for the dialog windows
• changes some colors for the forum

If you like the Flannel theme but you just want to change the colors you can simply extend this theme and redefine only the colors! The same for other themes of course. The easiest way in each case is just to copy&paste blocks of code from existing themes to your own theme.

Below is a list of selected themes and their styles

Flannel	http://www.wikidot.com/common--theme/flannel/css/style.css
Flannel (no side bar)	http://www.wikidot.com/common--theme/flannel-no-side-bar/css/style.css
Flannel Ocean	http://www.wikidot.com/common--theme/flannel-ocean/css/style.css
Flannel Ocean (no side bar)	http://www.wikidot.com/common--theme/flannel-ocean-no-side-bar/css/style.css
Flannel Nature	http://www.wikidot.com/common--theme/flannel-nature/css/style.css
Flannel Nature (no side bar)	http://www.wikidot.com/common--theme/flannel-nature-no-side-bar/css/style.css
Cappuccino	http://www.wikidot.com/common--theme/cappuccino/css/style.css
Cappucino (side bar on right )	http://www.wikidot.com/common--theme/cappucino-right/css/style.css

Update theme

So let us assume you have embedded the CSS code within the page css:mytheme. Go to Site Manager » Appearance » Custom themes and open your new theme for editing. If you have the source page configured, just click import and see what happens.

Save theme of course.

Preview theme

To begin with a custom theme won't be assigned to any pages, so you won't immediately see the results of your work. You can preview the theme in 2 ways:

• you can assign the theme to a particular page category by going to Site Manager » Appearance » Themes (as you would do for any other theme)
• you can use ThemePreviewer module - just put it on your pages somewhere and it will allow you to preview available themes on your page.

Step 4: Test your Theme!

There are many browser quirks. What some browsers render properly others can not understand at all. Please test your theme with at least major browsers (Firefox, IE, Opera).

Step 5: Assign Themes to Categories

When your theme is ready - go to Site Manager » Appearance » Themes and set the new theme for the page categories you want. And… that should be all!

General tips

• do not use pixel units (px) for font size; wherever possible (font size, layout) use font-based units (em) or percentage (%)
• keep your design clean and readable
• test CSS with different browsers

Authors

michal frackowiak. Please visit his/her userPage.

Comments

Nice

ItaniKnight 1173131198|%e %b %Y, %H:%M %Z|agohover

Yeah, that was helpful to me. Now, at least, I know HOW to get the CSS code onto the wiki… Whether or not it looks any good is a different question… :)

a different question

Goon 1173178417|%e %b %Y, %H:%M %Z|agohover

I added some links to the basics section. Maybe one can find the answer to this different question there. ;)

Easy and intuitive...NOT

gently 1180263646|%e %b %Y, %H:%M %Z|agohover

I spent hours looking for this info. Not a single tag mentioning color or how to tweak a theme! I better get studying CSS! Thanks for the free blog!

Re: Easy and intuitive...NOT

leiger40 1189123777|%e %b %Y, %H:%M %Z|agohover

Just go to http://www.blogger.com/start and sign up for a blog there - they're a great blog provider. Using a wikidot site as a blog would end up being a hassle after a while .. lol

If anyone is interested in contributing to another site dedicated to CSS among other things, check out http://hard-drive.wikidot.com and apply for membership.

Cheers

Re: Easy and intuitive...NOT

Phil Chett 1190246137|%e %b %Y, %H:%M %Z|agohover

check out http://hard-drive.wikidot.com and apply for membership.

er…. how do i do that then?

last edited on 1193212272|%e %b %Y, %H:%M %Z|agohover by Phil Chett + show more

Re: Easy and intuitive...NOT

leiger40 1193270511|%e %b %Y, %H:%M %Z|agohover

er…. how do i do that then?

Yeah, it's been blocked from new membership by the other site admin I am working with. I'll see if I can fix that up now, or at least ASAP. Check back there in a few days.

Sorry about that…

EDIT: ok, ready for new members now :)

last edited on 1194952395|%e %b %Y, %H:%M %Z|agohover by leiger40 + show more

Logo

christmas4kids 1199136289|%e %b %Y, %H:%M %Z|agohover

I'm trying to add a logo to my wiki. I would assume I should do that in the css and I have been messing around wiht it but I can't seem to figure it out. I've tried copying the code for the background image in the header and tried changing the coordinates but my image wont show up.

If anyone is interested in doing it for me :) I just want the image found below in the upper left hand corner of the default Flannel layout.

http://christmas4kids.wikidot.com/local--files/start/logo

Thanks much for any help.

Re: Logo

tehraptor 1203716254|%e %b %Y, %H:%M %Z|agohover

In the custom themes section of admin:manage, make a new theme that extends the flannel theme and put the following code:

#header{
    /*background: none;*/
    height: 9em;
    border-bottom: 3px solid #800202;
    background-image: url(http://christmas4kids.wikidot.com/local--files/start/logo);
    background-repeat: repeat-x;
    background-position: 0 2.1em; 
}

You will need to re-upload your image and make sure it ends in a valid for (ex: .jpg .gif .bmp) - This is your problem

-Tehraptor

Re: Logo

Lt Commander Chris 1205079824|%e %b %Y, %H:%M %Z|agohover

Changed the universal background colour (yes spelt it correctly in the css, US style) and made sure there were no conflicts but refuses to change from default used by co. Any particular reason?

Re: Logo

Supermom 1209761171|%e %b %Y, %H:%M %Z|agohover

OK, this is basicac CHINESE! I don't get it, it is dificult to navigate.

I have a logo in my computer, how to I attach it next to the name of my wiki??????????

Additional info

Robert W 1205416600|%e %b %Y, %H:%M %Z|agohover

Having struggled a lot to follow these instructions I thought a few extra pieces of information might help - so I've added them. That might be a bit presumptuous, but it's probably simpler than any other options. I won't be offended if someone edits/undoes my changes.

Re: Additional info

Helmuti_pdorf 1205418245|%e %b %Y, %H:%M %Z|agohover

Fine, it is clearer now.

Definition of theme and CSS

Jack Button 1206289845|%e %b %Y, %H:%M %Z|agohover

"Theme" didn't t mean anything to me for a while and neither did CCS ( Cascading Style notes)

It might be good to start this page with something like this.(It may be off base — I am new.).)

A theme is a structured template that provides specific directions that control the appearance of pages. When complete, the template establishes the fount to be used, its size, the location of text, any back ground color, specific images to be used and their location. (and other things that I don't know.)

The theme starts with a basic template and modifies and adds to it, using a markup language called Cascading Style Notes (CSS)

Am I in the ball park? If yes, please modify it and place it at the top of the page.

Regards, Jack

Importing CSS themes?

sithkhan 1206353261|%e %b %Y, %H:%M %Z|agohover

Can we import CSS from other places, or must we use wikidot specific theme modification only? Thanks!