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:

table.wiki-content-table {
    margin-bottom: 1.5em;
}
table.wiki-content-table td, table.wiki-content-table 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:

• FontAwesome Editor
• Better Code Blocks
• Inline Hovertips

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).