Fiddle with CSS – the easy way.

Posted by meagain on 04 Aug 2009 12:48, last edited by RobElliott on 08 Mar 2012 11:48

Tags: css layout themes

rating: +9+x

How to change your theme the hard way

  1. Write the the CSS code (this may or may not be stored on a page in the CSS code block).
  2. Go to site manager.
  3. Go to appearance.
  4. Go to custom theme.
  5. Create new theme.
  6. Name new theme.
  7. Add code or import.
  8. Save.
  9. Go to themes.
  10. Select the category that you wish the theme to be applied to.
  11. Choose the (built-in) theme.
  12. Save.
  13. Check.
  14. Find out there is an error in the code.
  15. Go back to 1.
  16. Repeat as required.

The easy way

A new method was created in mid-2009 with the inception of "use external theme".

1. On one of your wiki pages, enter in the CSS code within a CSS code block. It should look like this:

[[code type="css"]]

your css code

[[/code]]

2. Use the following code to import the CSS from an existing theme (for example, the Base theme):

@import url(http://www.wikidot.com/common--theme/base/css/style.css);

You can add your customizations below.

3. Note the URL of the page that you have created. e.g.
http://my-site.wikidot.com/the-page-with-my-css-code-block
4. Go to site manager.
5. Appearance.
6. Themes.
7. Tick external theme.
8. Add the url of the page holding the css and add the reference to the code block, e.g. code/1,
so it looks like this: http://my-site.wikidot.com/the-page-with-my-css-code-block/code/1.
9. Save changes.
10. Check.

AND now for the good bit!!

  1. Discover any errors.
  2. Go to CSS code page and edit.
  3. Save.
  4. Refresh.
  5. Check.
  6. Go to 2 and repeat as required.

That's it. It is now so much easier!

Why is it so much better 1?

Using ff with one of the web dev tools, it is very easy to see, fix, or adjust changes. Most of these will work with most browsers. Except ie-effing-6. There is no easy way to fix these errors, so it's a case of fiddling and going through all the parlarva of finding out it's still not right.

I have two computers; one with all normal browsers and a laptop with ie6 on it.

I adjust the code in my theme page.
Save it.
Go to the laptop. Refresh it. Changes are seen immediately.

Why is it so much better 2?

You can have a number of sites all with a corporate theme.
You can make changes to the one page. All those changes are carried over to all the sites using that code.

Why is it so much better 3?

One page for all your edits, with all the advantages of a wiki page; history, notes, revert, and comments if added.

Why is it so much better 4?

You can use different CSS for different categories. So you could have a different header image, different color scheme etc depending on the category of your pages. To do this add extra code blocks to your page, import the css from the first code block /code/1 then add the CSS for that category. For example the codeblock below changes one of the images in the header for that category:

[[code type="css"]]
@import url("/css:theme/code/1");
#header-extra-div-2 { background-image:url(/local--files/css:theme/header15.jpg); }
[[/code]]

Then in Site Manager -> Appearance -> Themes for that category add the url with the ending **/code/2, for example http://my-site.wikidot.com/the-page-with-my-css-code-block/code/2


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.