Simplicity of design has been one of the most perceptible advantages of Wikidot for many years. Making things limpid and not overwhelming has been one of our priorities from the very beginning, that's for sure. Nevertheless the Web 2.0 (3.0, 4.0…) trends are changing, Wikidot can't afford to stay behind and needs to evolve.
This is why we are proud to present the new era of Wikidot's look&feel. It's the new level of custom design, which gives a tool to create amazingly attractive and sophisticated websites with almost infinite possibilities.
Custom Layout
The first part of the project are custom layouts. Until now, every Wikidot page had its own fixed HTML layout, i.e. every part of the document was wrapped in Wikidot-defined div and span elements, as desribed below:
- div#content-wrap
- div#side-bar (if side-bar navigation element exists)
- div#main-content
- div#action-area-top
- div#page-title
- div#breadcrumbs
- div#page-content (main content of the page)
- div#page-info
- div#page-options-bottom.page-options-bottom
- div#page-options-bottom-2.page-options-bottom
- div#action-area
- div#footer
Now, every Pro user can tailor the layout to fit their own needs. There are countless possibilities to create sites and define their look. Now, even moderately skilled designer can create things that weren't possible before. The only limitation is that you can't use <body>…</body> tags and id attributes within the code. It's also good to remember to put vital elements into the layout. This is being done by using modules or page elements, as we call them. You define where to put interface elements by using [[element]] or [[module ModuleName]] inside the layout, e.g.:
<div class="title">
<h1>
[[site_name]]
</h1>
</div>
<div class="my-blog-content-and-title">
<span class="blog-title">
[[page_title]]
</span>
[[breadcrumbs]]
[[content]]
</div>
Custom layouts can be found in the
Admin Panel » Appearance & Behaviour » Themes » Custom » Create a new layout
The complete list of elements is available in Layout reference.
Bootstrap integration
This is the other part of good news and we believe it's the most important one. We've decided to incorporate Bootstrap into Wikidot. It's a well-known front-end framework for easy creation of good looking sites from the ready-to-use components, such as great typography, beautiful forms, tables, buttons etc.
Bootstrap is also responsive, which means that every well designed site will dynamically resize and position content depending on the width of the browser or user’s screen resolution. Pages built with Bootstrap look great on the mobile devices without excessive CSS changes and often just out of the box. Did you take a look at our new Admin Panel? It's all made using Bootstrap and looks and behaves great on smartphones as well as on tablets. That's the power of Bootstrap!
Over time, we will integrate Bootstrap into our main Wikidot site, Blog, Sign Up/Sign screens together with creating new default templates for newcomers to create even more comprehensive and panoptical experience for the Users.
We have been testing Bootstrap on Wikidot for a while now and I would like to thank our Users for helping us in tests and development of Bootstrap Playground site, which everyone can clone and play with Bootstrap on their own. Special thanks go to:
One of my current challenges in a redesign of our wiki sites is dynamically altering the layout for our many mobile users. I'm curious if this is inherent in Bootstrap integration?
According to the Bootstrap 3 documentation:
Therefore, simply using the appropriate Bootstrap elements will automatically make your website mobile-friendly. You can see the results of such implementation at the Bootstrap Playground. Very soon, we will be creating how-to pages on how to use Wikidot's new layout features in order to utilize Bootstrap's many amazing features (:
Also, if you haven't, you need to add the following meta tag to your entire site:
You can do this by going to the regular page options on the bottom of the page (Edit, Tags, etc), clicking on + Options, and clicking Edit Meta.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
my site is shuddhideaddictioncentre.com I want to connect both sites and copy all meta data in to wiki site how it is possible.
-Chris
I believe it's live now and available to everyone as far as I know.
Edit: I just logged in with my non-pro user account I use for testing and I don't see the Bootstrap options available there yet. it looks like it's not enabled for all users yet.
Community Admin
Indeed, layouts and Bootstrap are available only for Pro users (Pro Lite/Pro and Pro Plus as well).
I guess it would help if we actually read the blog post more carefully…
Community Admin
Oh wow, Bootstrap sounds pretty amazing in this.
Guess I'll have to play around some more to see these new implements.
Thanks very much and hopefully there aren't too many kinks.
cry havoc, i care not
actually i need to create a blogging portal using drupal,but not able to understand its theme setting and all.Can anyone please help me to create my project soon as its very urgent
Our HOWTO: http://community.wikidot.com/howto:create-a-fully-functional-blog (**Create a fully functional Blog **) show you what you have to do… please read!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Bootstrap sounds pretty amazing in this.
Nice
Bootstrap is my only choice for making website responsive specially when you want to make a big website with many elements than bootstrap is always best
We have many blogs on addiction on our site shuddhideaddictioncentre.com we want to capture them in to bhopalnashamuktikendra.com and our wiki site kindly help us