Aug 21 2015 0

Changing the styling of my blog

On this page I document the changes I have made to the template (based on the template Default’) I am using for my blog.

Changes to head.html


<link rel="stylesheet" href="">
<script src=""></script>

Changes to style.css

CSS to style the code blocks and enable numbering for each line 1

/* Changes */
/* CODE */
/* Removed the complete CODE section, see below for new styling of code elements */

/* LISTS */
/* Updated the following */
ul, ol {
  margin-left: 0;
  margin-bottom: 24px;

ul {list-style: disc;}

/* Styling for Google Code Prettify */
pre, code, kbd, samp {
    font-family: Monaco, Courier, monospace;
    font-size: 9pt;

code {
    background-color: rgb(222, 233, 244);
    color: rgb(0, 0, 0);
    padding: 1px 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: dotted 1px gray;

pre {
    background-color: rgb(245, 245, 245);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow:         2px 2px 2px rgba(0, 0, 0, 0.3);

pre code {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background-color: transparent;

pre {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
    max-height: 500px;

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 6px;

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
    list-style-type: decimal !important;
    border-left: 1px dotted silver;
    padding-left: 5px;
    font-family: Monaco, Courier, monospace;
    font-size: 9pt;

/* Styling of table header */
thead {
   background: rgb(128, 128, 244);

Changes to scripts.js

Some piece of jQuery to add prettyprint to pre-tag (for now all code blocks will use line-numbering) to be able to apply Google Code Prettify. 1

$('pre').addClass('prettyprint linenums:1');

This requires you to turn off the App Code highlighting’ (under Typesetting) within the dashboard of your blog. Code highlighting

Previous post
Switching blogging services Since will be closing shop it was time to start looking for alternatives. Via their twitter account they announced they would be
Next post
Styling external links To add a visual indication to links that are ‘external’ and take you away from my blog, have I added to the right-hand side of the link. The icon
This blog is powered by Blot