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

• Added Font-awesome
• Added Google Code Prettify

1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></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;
}

ol.linenums
{
    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.