Wikidot Community

The following is a standard reply I give to questions like this. which I hope is helpful for you. You are using the flannel-no-side-bar theme rather than the flower-blossom theme used in the example below.

1. Create a page called admin:css. You can call it whatever you like but most of us use admin:css or css:theme or some variation of that. For now we'll use admin:css.

On that page add a codeblock and import the default theme you want to base your theme on - we'll assume this is the flower blossom theme:

[[code type="css"]]

@import url(http://static.wikidot.com/common--theme/flower-blossom/css/style.css);

[[/code]]

2. Now you can add your own css under the @import rule and before the [[/code]] tag. You might add a different header background image, or different fonts or completly different colors. For example you might change the top bar menu to a background color of light grey:

[[code type="css"]]

@import url(http://static.wikidot.com/common--theme/flower-blossom/css/style.css);

#top-bar {
    background-color: #ddd;
}

[[/code]]

And you can build up your css so that the end result looks nothing like the default themes.

3. You will only need to do this next step once. Go to site manager -> appearance -> themes. Make sure the _default is highlighted in the list of categories on the page. Then click the "or use an external theme" radio button. A box will open for you to enter the location of the css file. Type /admin:css/code/1. Then click Save Changes.

You now have the basics of your own theme on a page on your site. The advantage of this is that it is easy to add new rules and properties and revert back - as with any other page - if you don't like the result.

Whenever you want to add a new rule to your CSS just add it on the admin:css page (after the @import which must be first but before the [[/code]], then save the page and the new rule will take effect immediately.

It also opens up the opportunity to have different CSS for different categories on your site. For example you might want a different header image on each different category. To do this you would add a second codeblock, import the first codeblock using for example @import url("/css:theme/code/1 and add the specific ruules and properties, and then in the sitemanager for that category you would enter /admin:css/code/2 in the external theme box. And so on. On one site here I have a css:theme page with 18 different code blocks for a mass of different categories and uses.

A great Firefox addon to learn about the css that is being used on your site is Firebug. Alternatives for other browsers are out there but I find Firebug the best for exploring a site's CSS and testing changes on-the-fly before you commit to them in the css on your css page.

To change the css on a specific page there is also the CSS module.

To center the title and subtitle add the following to the admin:css page that you created above:

#header h1, #header h2 {
    margin: 0 auto;
}