Wikidot Modules

In his Bootstrap announcement to the community, Squark posted this basic information to help us get started.

Since a while our team was thinking about a milestone, which would bring completely new quality to the Wikidot. You may have noticed that Wikidot's look is not fresh anymore. It's time to change that. We're introducing new features - layouts and bootstrap-based themes. At the moment, it's tested by several users, but we want to expand it for everyone, who would like to check it out.

Layout

Every Wikidot's page has it's hardcoded layout, i.e. everything inside @body@ is Wikidot-defined. User may change the content of the page, side bars, top bars etc. Page layout structure is defined under http://www.wikidot.com/doc:layout-reference

From now on, users will have the ability to create their own layout, i.e. define everything inside the body, deciding whether to use or not and - most important - how to use: sidebar, topbar, footer, license etc. Layout is defined in Admin Panel (Site Manager), under Appearance & Behaviour > Themes > Custom

Layout is created using HTML together with our modules, i.e.

<div class="menu">
[[topbar]]
</div>
<div class="container">
[[content]]
</div>

Here is a list of modules, which you may use in layouts:

[[module NaviBar]]
[[module LoginStatus]]
[[module PageOptionsBottom]]
[[module FooterBar]]
[[module AdModuleAboveContent]]
[[module AdModuleBelowContent]]
[[module AdModuleAboveSidebar]]
[[module AdModuleBelowSidebar]]
[[module AdModuleBelowFooter]]

[[site_subtitle]]
[[site_locked]]
[[page_title]]
[[breadcrumbs]]
[[tags]]
[[topbar]]
[[sidebar]]
[[ssl_warning]]
[[page_not_exists]]
[[license_text]]
[[action_area]]
[[footer]] <!— custom footer will be used if that option is enabled in your site's admin panel—>

Modules can also be used within [[if]]...[[/if]], e.g.

[[if breadcrumbs]]
[[breadcrumbs]]
[[/if]]

[[if sidebar]]
[[sidebar]]
[[/if]]

Which means, that Wikidot will display breadcrumbs only if the page contains parent page and sidebar will be displayed only if the theme is set to use sidebar. [[if]] can't be nested.

Boostrap

When creating a custom CSS theme, from now on, users may choose Bootstrap to be loaded (CSS and JS), which together with the layouts will give almost infinite possibilities to create beautiful themes very easily. Many elements from Wikidot's interface already have Bootstrap classes added. We do realize that there is still much work to do on our side, but we really hope you can help us improve this new feature, take requests for classes and styles to be added to interface elements. We also hope that you'd like it and would use Bootstrap extensively, as it is so much powerful!

Notes:

  • We're also adding FontAwesome to the Bootstrap to boost it up even more.
  • Bootstrap will come in two latest versions to choose: 2.x and 3.x

If you want to test Layouts & Bootstrap, please leave a comment.

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License