CSS Per Category — Including Inexisting Pages!

CSS Per Category — Including Inexisting Pages!

By James KanjoJames Kanjo on 04 Feb 2012 08:18, last edit by James KanjoJames Kanjo on 04 Mar 2012 05:38

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


As taken from my blog post Wikidot: CSS Per Category


James KanjoJames Kanjo. Please visit his/her userPage.



Related Community Blogs

No Community Blogs have similar tags to this post.

Rate it up ?

rating: +2+x


Add a New Comment


Bookmark and Share

Community Blog feed-icon-14x14.png

Posts by date

Posts by tags

2018 2019 addthis admin admin_forum alexa animoto app appplication attributes autocomplete automatic autonumber autosave backwards badge banner birthday blog bloo bookmark bootstrap browser bug bugs button calendar candidate category cell ceo changes chinese chrome cleanup code comment community convert count country csi css database data-forms datenschutz delete deletion domain embed etension eu excel explorer favicon featured feature-request features file file-manager firefox fixing form forum free freemind front fun gallery gdpr gemeinschaft genealogy gerdami german glossary good google handbook header heading help helpon home homepage howto how-to html iframe images include infobox inline internet istorijska_biblioteka italian javascript job join joke languages link list listpages listusers live localize logged-in-user-only mail manual mass-delete mass-edit mediawiki members membership membershipapply membershipbypassword michal microsoft mindmanager mindmap mindmeister module multi-file multilingual nested newpage news newspaper newyear nextpage official open pagecalendar pagecalender pagepath pages %%page_unix_name%% permissions playground portuguese press previouspage private pro programming reshuffle rob row russian sandbox scheme scripting search search_engine services simplecal skins snippet social spam spanish squark styles successful syntax system table tag tags template templates theme themes thumbnail thumbnails toolbar town translate turkish tutorial tweet updated_at upload uri url user users variables video vote weneed who.is wiki wikidot wikipedia wish wishlist yaml

Posts by rating

CSS Per Category — Including Inexisting Pages!
Rating: þ{rating}þ (04 Feb 2012 08:18)

CSS Per Category — Including Inexisting Pages!
Rating: þ{rating}þ (04 Feb 2012 08:18)

CSS Per Category — Including Inexisting Pages!
Rating: þ{rating}þ (04 Feb 2012 08:18)


{"module":"feed\/FeedModule","params":{"src":"http:\/\/michalf.me\/feed\/pages\/category\/blog\/t\/Michal+Frackowiak%27s+blog","limit":"1","module_body":"**[http:\/\/michalf.me Michal]:** \n%%linked_title%%\n[[size smaller]]%%date|%e %b %Y at %H:%M |agohover%%[[\/size]]"}}
{"module":"feed\/FeedModule","params":{"src":"http:\/\/quake.wikidot.com\/feed\/pages\/category\/dev\/t\/Piotr+Gabryjeluk+blog","limit":"1","module_body":"**[http:\/\/piotr.gabryjeluk.pl\/ Gabrys]:**\n%%linked_title%%\n[[size smaller]]%%date|%e %b %Y at %H:%M |agohover%%[[\/size]]"}}
{"module":"feed\/FeedModule","params":{"src":"http:\/\/squark.wikidot.com\/feed\/pages\/category\/blog\/t\/Squark%27s+Latest+Posts","limit":"1","module_body":"**[http:\/\/squark.wikidot.com\/ Squark]:**\n%%linked_title%%\n[[size smaller]]%%date|%e %b %Y at %H:%M |agohover%%[[\/size]]"}}

Admin dashboard

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