Flexible CSS - putting CSS on its own page

Posted by RobElliott on 08 Mar 2012 10:27, last edited by PeterMortensen on 30 Aug 2015 14:57

Tags: categories css layout themes

rating: +4+x

Introduction

The most flexible way to develop and use a custom theme on your site is, surprisingly, not to use the custom themes part of site manager but to put your CSS (custom style sheet) on its own page on your site and then tell the site manager in Appearance -> Themes that it is an external theme and give the location of the page.

The advantage of this method is that when you change any rule in your CSS and save the page it is on the change is reflected immediately across your site.

Because your CSS is on a page on the site, it means that like any other page you can revert to an earlier version if you don't like the changes you have made or something doesn't work the way you thought it would.

The other big advantage is that it allows you easily to have different CSS in different categories. For example, you might change the image in your header for each category, or display the side bar only on pages of particular categories.

Set up your CSS page

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. You must specify as [[code type="css"]], not just [[code]] which will not work.

Then 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]]

The @import rule must always be the first item in the codeblock.

Adding your own CSS

Now you can add your own CSS below the @import rule and before the [[/code]] tag. 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.

Setting up Site Manager

You will only need to do this next step once.

Go to site manager (_admin) -> appearance and behaviour -> themes. Make sure that _default is highlighted in the list of categories on the page.

A box will open for you to enter the location of the CSS file. Type /admin:css/code/1. Then click Save Changes. These steps are shown in the image below (note that the page the CSS is on in the example used for the image is vineyard:css):

css_admin.jpg

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.

CSS for different categories

If you want to have a different to bar background color for a different category you add a second codeblock, import the first codeblock then add the CSS then tell the site manager that the category is using codeblock 2.

Codeblock

In this example a second codeblock has been created on the page below the first.

The first codeblock has then been imported. Again, the import must be the first item in the codeblock.

We've then changed the background color of the top bar to yellow - but only for this category, for every other category it is still light grey.

[[code type="css"]]
@import url("/admin:css/code/1");

#top-bar {
    background-color: yellow;
}
[[/code]]

Site Manager

If you create a second (or third or fourth….) codeblock you need to tell the Site Manager that you are using it as an external theme for that category. In the same way that you did for the default category in the image earlier:

  • Go to Appearance and Behaviour -> Themes in your Site Manager
  • Select the External tab
  • Select the category which will have the new background color for the top bar
  • In the box enter /admin:css/code/2
  • Save the changes.

General Comments about CSS

CSS is always read from top to bottom, so if you had changed the top bar background color to light grey and then further down the page had added another CSS rule to change it to red, it is the red color that would be applied. To help maintenance of your CSS it is a good idea to keep all rules for a particular part of the page together, for example all the header rules together, all the side bar rules together, all the content together and so on.

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 Firebug is probably 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 single page there is also the CSS module.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.