Wikidot: CSS Per Category
04 Feb 2012 07:23
04 Feb 2012 07:23
04 Feb 2012 07:23
04 Feb 2012 07:23
nav_first.pngFirst: blog:1
My first blog!
Edited: 06 Nov 2011 11:49 by: James Kanjo
Comments: 2
Tags: ads blog css facebook first free myspace program programming wiki wikidot
nav_prev.pngPrevious: blog:76
Recovery Partition Cheat Sheet
Edited: 29 Jan 2012 00:05 by: James Kanjo
Comments: 0

Something that's slightly annoying about Wikidot is that when it comes to creating new pages that previously didn't exist, the Live Template isn't taken into account. That is, if you use the CSS module in the Live Template, then that isn't applied to the page until after you save the page. All proceeding edits work fine, but the initial edit doesn't look how it's supposed to.

But of course, they don't call me a Wikidot Super-Guru for nothing! Read on to see how it's done properly.

There are two useful tools that appear when we create new pages: the top and sidebar navigators. Whatever code you place in these two pages, it will appear on every page that utilises those particular navigators. Generally speaking, these navigators are usually global for the site on most wikis (however they can be customised on a per-category basis).

For our exercise today, we are going to focus on the sidebar navigator (usually located on the /nav:side page).

Step 1: Create your per-category CSS pages

Let's assume the category "survey". We are going to create a hidden page called /survey:_css for us to store our CSS module on. Place your CSS module on this page like so:

[[module CSS]]
a {color: #FFF !important;}

This line of CSS code will ensure all links appear in the colour "white".

Step 2: Inject James' Brilliant Code

Navigate to your sidebar navigator page and place the following code at the bottom:

[[include :snippets:category-css]]

This Wikidot code will extract the source from the :_css page on a per-category basis. If no such page exists, nothing happens!

If you happen to have no sidebar navigator on your Wikidot site, I suggest that you:

  1. Re-enable the sidebar from your /admin:manage page;
  2. Go to the sidebar page (usually it's the /nav:side page);
  3. Paste the following code at the top of the sidebar's source code to "remove" the sidebar:
[[module CSS show="true"]]
#side-bar {display: none;}

Step 3: You're done! Check it out!

That's right, there is no Step 3! You can now create new pages with per-category customised CSS now!!!

No more messing around with the site's global CSS!

λ James Kanjo


Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
All content on this page is subject to the guidelines outlined here