01 Jan 2017 08:38 | blog bootstrap community theme wikidot

Did someone say new theme?

In the previous blog post I was considering a change to the blog, and today that culminated in the conversion of this blog to a Bootstrap 3 compatible theme.

Bootstrap is a front-end framework consisting of CSS and JavaScript components which has quickly become popular around the web. Wikidot first released integration with the framework in November 2013.

For the most part, I have expanded off the back of a freely-available theme named Simplex provided by Bootswatch — however, some major adjustments were needed to make it compatible with Wikidot and to fit in with the existing layout that this blog used.


teletype (monospaced) font

I frequently make use of teletype font to highlight modules, e.g. [[module ListPages]]. I'd like these to stand out from the main text so that they can be easily noticed as separate.

A recent change I made to the Wikidot forums a few months back made a similar change, and I've implemented it here too:

tt {
    color: #098b9a;
    word-break: break-word;

simple tables

Using the default Simplex theme, Wikidot's simple table syntax looked strange and took up more horizontal space than usual.

In an effort to fix this issue, I reduced the size of the text. Some adjustment was also needed to re-insert padding that was lost when switching from the built-in Wikidot theme to a different theme that was created without Wikidot in mind: {
    margin-bottom: 1.5em;
} td, th {
    padding-right: 2em;

page tags

The page tags that are automatically inserted at the bottom of a page also had some spacing issues that needed correction.

.page-tags a {
    padding-right: 0.5em;

link colours

And this one was more of a personal preference. I felt that the default reddish colour of each link stood out far too much against the rest of the page, so I changed the default to a solid black (#000000) link which changes to red (#DB2000) when hovering, and removed underlining.

body a {
    color: #000000;
body a:hover {
    color: #DB2000;
    text-decoration: none;

Unfortunately, within the blog articles this made links almost invisible amongst other text - so I had to restore the text decoration to ensure that the links were noticeable. As a result, you might have picked up that links within this blog post are all underlined.

.blog-content a {
    text-decoration: underline;
.blog-content a:hover {
    text-decoration: underline;

Wikidot power

The "Powered by Wikidot" text in the header didn't display correctly on the collapsed, mobile-friendly menu by default. It decided that it wanted to hug the left side of the screen.

Correcting this issue was a matter of adding some padding, and it still looks OK on larger displays:

li.navbar-text {
    padding-left: 1em;

community snippets

I am also using the following awesome CSS snippets from the Wikidot Community:

other changes

I've also turned off auto-numbering for the blog category. That means that new posts will have a more readable URL rather than a generic number, and it's considered to be more SEO-friendly (i.e. Google and other search engines prefer it).

This blog post
With auto-numbering blog:151
Without auto-numbering blog:well-thats-new

What is your first impression of the new theme? Do you like it, or are there elements that you'd prefer to be different?

Submit Feedback
Please rate this page based on the quality and helpfulness of the content to you.

Average 0% rating from 0 votes.

You may also be interested in…


Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +

01 Jan 2017 09:45


Included page "inc:signature" does not exist (create it now)

Edit | History (0) | Permalink

06 Jan 2017 08:21

The simple theme works well! As your blog post focuses more on fine tuning, do you know if there's any basic tutorial anywhere for transforming an old site theme to bootstrap?

Included page "inc:signature" does not exist (create it now)

Edit | History (0) | Permalink

10 Jan 2017 02:47

Thanks jjs :) I don't know of one that exists, but the info above might help.

It really depends on the bootstrap theme, whether it's already designed with Wikidot in mind or not, and the content of your categories.

I would suggest doing a category at a time, because there is so much chance of variability in page content that some things you don't expect could be broken by the change.

Most of your time would probably be spent converting things to use bootstrap-specific classes, so that they appear as expected.

It's possible I could write something more detailed up in the future, but I can't promise anything.

Included page "inc:signature" does not exist (create it now)

Edit | History (0) | Permalink

Add a new comment