Per Category CSS Module

By James KanjoJames Kanjo


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.


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, click here for further instructions.

Now simply create your per-category CSS page. 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  show="true"]]

*/Your CSS coding goes here, take the following line for example/*
a {color: #FFF !important;}


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


As taken from my blog post Wikidot: CSS Per Category

No Sidebar

If you don't have a sidebar 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;}

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by James Kanjo

Rate this solution

If you think this solution is useful — rate it up!

rating: +2+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License