Wern Ancheta

Adventures in Web Development.

Customizing Octopress

| Comments

It’s been 3 months since I first started blogging with Octopress and I’m quite happy with it. But I’ve gotten quite bored with the default theme for Octopress and I really wanted my blog to be unique so I Googled Octopress themes coz I’m not really a master of css yet who can pop out a responsive theme in 10 seconds. The theme that caught my attention is the slash theme so I installed it.

1
2
3
4
$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

After installing the slash theme I started digging through directories in Octopress and saw this source/_includes folder which contains the templates that Octopress uses.

There’s also the source/javascripts , source/stylesheets and source/images folder where the scripts, stylesheets and images used by octopress is located.

Customizing Styles

The first thing I noticed about slash is that its font-color isn’t that close to black. Nobody uses pure black in web design but anything that is close to it is good to use. I thought it was the screen.css in the source/stylesheets directory that I need to edit.

But this came up.

1
@font-face{font-family:'FontAwesome';src:url("/font/fontawesome-webfont.eot");src:url("/font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"),url("/font/fontawesome-webfont.woff") format("woff"),url("/font/fontawesome-webfont.ttf") format("truetype"),url("/font/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"),url("/font/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");font-weight:normal;font-style:normal}*{margin:0;padding:0}body{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:14px;background:#eee;color:#222}@media screen and (max-width: 1040px){body{margin:0 20px}}@media screen and (max-width: 600px){body{font-size:13px}}h1{font-size:1.8em}h2{font-size:1.5em}h3{font-size:1.3em}a{text-decoration:none;outline-width:0;color:#258fb8}.alignleft{float:left}.alignright{float:right}.clearfix{*zoom:1}.clearfix:after{content:"";display:table;clear:both}.inner{width:1000px;margin:0 auto}@media screen and (max-width: 1040px){.inner{width:100%}}.pullquote-right:before,.pullquote-left:before{padding:0;border:none;content:attr(data-pullquote);float:right;width:45%;margin:.5em 0 1em 1.5em;position:relative;top:7px;font-size:1.4em;line-height:1.45em}.pullquote-left:before{float:left;margin:.5em 1.5em 1em 0}#header{height:30px;padding:30px 0;border-bottom:1px solid #ddd;line-height:30px}@media screen and (max-width: 1040px){#header{height:auto;position:relative;padding-bottom:10px}}#header a{color:#222;-webkit-transition:color 0.3s;-moz-transition:color 0.3s;-o-transition:color 0.3s;transition:color 0.3s}#header a:hover{color:#258fb8}#header h1{float:left;font-weight:300;font-size:30px}@media screen and (max-width: 1040px){#header h1{float:none}}#main-nav{float:left;margin-left:30px}@media screen and (max-width: 1040px){#main-nav{float:none;margin-left:0;margin-top:15px}}@media screen and (max-width: 600px){#main-nav>ul{display:none}}#main-nav>ul>li{margin-left:50px;display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline}@media screen and (max-width: 1040px){#main-nav>ul>li{margin-left:0;margin-right:50px}#main-nav>ul>li:last-of-type{margin-right:0}}#main-nav>ul>li:hover>a{color:#258fb8}#main-nav>ul>li>a{padding:38px 0;margin-top:-38px}#main-nav>ul>li>a:after{content:"\f078";color:#ccc;font:12px FontAwesome;padding-left:10px}#main-nav>ul>li>a:only-child:after{content:""}@media screen and (max-width: 1040px){#main-nav>ul>li>a{padding:18px 0}}#main-nav>ul ul{position:absolute;top:60px;left:-15px;z-index:10;white-space:nowrap;background:#ddd;border:1px solid #ccc;list-style:none;display:none;-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 8px rgba(0,0,0,0.1);box-shadow:0 4px 8px rgba(0,0,0,0.1);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-ms-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}@media screen and (max-width: 1040px){#main-nav>ul ul{top:40px}}#main-nav>ul ul ul{-webkit-border-radius:0 5px 5px 5px;-moz-border-radius:0 5px 5px 5px;-ms-border-radius:0 5px 5px 5px;-o-border-radius:0 5px 5px 5px;border-radius:0 5px 5px 5px}#main-nav>ul ul li{border-top:1px solid #eee;border-bottom:1px solid #ccc}#main-nav>ul ul li:hover{background:#d5d5d5}#main-nav>ul ul li:first-of-type{border-top:none}#main-nav>ul ul li:first-of-type ul{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-ms-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}#main-nav>ul ul li:last-of-type{border-bottom:none}#main-nav>ul ul li>a{display:block;padding:5px 15px}#main-nav>ul ul li>a:after{content:"\f054";color:#999;font:12px FontAwesome;padding-left:10px}#main-nav>ul ul li>a:hover{color:#222}#main-nav>ul ul li>a:only-child:after{content:""}#main-nav>ul ul ul{top:0;left:100%}#main-nav>ul li{position:relative}#main-nav>ul li:hover>ul{display:block}#main-nav select{display:none;margin-bottom:10px}@media screen and (max-width: 600px){#main-nav select{display:block}}#mobile-nav{display:none;height:37px;position:relative}@media screen and (max-width: 600px){#mobile-nav{display:block}}#mobile-nav a{display:block}#mobile-nav .button{cursor:pointer}#mobile-nav .container{display:none}#mobile-nav .menu{position:relative;width:100%}#mobile-nav .menu .button{background:#f2f2f2;border:1px solid #ddd;color:#999;padding:0 60px 0 10px;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}#mobile-nav .menu .button:hover{color:#999}#mobile-nav .menu .button.on{color:#666;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;-ms-border-radius:5px 5px 5px 0;-o-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0}#mobile-nav .menu .button.on:before{content:"\f077"}#mobile-nav .menu .button:before{content:"\f078";color:#ddd;font:16px FontAwesome;line-height:30px;position:absolute;top:0;right:40px}#mobile-nav .menu .container{background:#f2f2f2;border:1px solid #ddd;border-top:none;position:absolute;top:31px;z-index:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-ms-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}#mobile-nav .menu .container ul{list-style:none}#mobile-nav .menu .container ul ul{margin-left:20px}#mobile-nav .menu .container a{padding:0 10px}#mobile-nav .search{position:absolute;top:0;right:0}#mobile-nav .search .button{background:#ddd;width:30px;height:30px;position:absolute;top:1px;right:-1px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-ms-border-radius:0 5px 5px 0;-o-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}#mobile-nav .search .button:before{content:"\f002";color:#f2f2f2;font:20px FontAwesome;line-height:30px;position:absolute;top:0;left:7px}#mobile-nav .search .button.on{background:#ccc}#mobile-nav .search .button.on:before{content:"\f00d"}#mobile-nav .search .container{position:absolute;right:51px;z-index:1}#mobile-nav .search input[type="text"]{background:#fff;border:1px solid #ddd;border-right:none;color:#999;font:13px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;height:30px;width:100%;padding:0 10px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-ms-border-radius:5px 0 0 5px;-o-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}@media screen and (max-width: 1040px){#sub-nav{position:absolute;top:30px;right:0}}@media screen and (max-width: 600px){#sub-nav{display:none}}#sub-nav .search{float:left;margin-top:1px;position:relative}@media screen and (max-width: 1040px){#sub-nav .search{float:none;margin-top:15px}}#sub-nav .search:before{content:"\f002";color:#ccc;font:18px FontAwesome;line-height:30px;position:absolute;top:0;right:125px}#sub-nav .search input[type="text"]{background:#f2f2f2;color:#999;border:1px solid #ddd;font:13px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;padding:6px 15px 6px 35px;width:100px;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px}#sub-nav .search input[type="text"]:focus,#sub-nav .search input[type="text"]:active{background:#fff;border-top:1px solid #ccc;color:#222;outline:none}#sub-nav .social{float:left;margin-right:15px}@media screen and (max-width: 1040px){#sub-nav .social{float:none;margin-right:0}#sub-nav .social a:last-of-type{margin-right:0}}#sub-nav .social a{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline;text-indent:-9999px;margin-right:15px;opacity:0.5;width:28px;height:28px;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s}#sub-nav .social a:hover{opacity:1}#sub-nav .social a.facebook{background:url('/images/social/facebook.png?1353755656') center no-repeat #3b5998;border:1px solid #3B5998}#sub-nav .social a.facebook:hover{border:1px solid #2d4373}#sub-nav .social a.google{background:url('/images/social/google.png?1353755656') center no-repeat #c83d20;border:1px solid #C83D20}#sub-nav .social a.google:hover{border:1px solid #9c3019}#sub-nav .social a.twitter{background:url('/images/social/twitter.png?1353755656') center no-repeat #55cff8;border:1px solid #55CFF8}#sub-nav .social a.twitter:hover{border:1px solid #24c1f6}#sub-nav .social a.github{background:url('/images/social/github.png?1353755656') center no-repeat #afb6ca;border:1px solid #afb6ca}#sub-nav .social a.github:hover{border:1px solid #909ab6}#sub-nav .social a.coderwall{background:url('/images/social/coderwall.png?1353755656') center no-repeat #3a729f;border:1px solid #3a729f}#sub-nav .social a.coderwall:hover{border:1px solid #2c577a}#sub-nav .social a.linkedin{background:url('/images/social/linkedin.png?1353755656') center no-repeat #005a87;border:1px solid #005A87}#sub-nav .social a.linkedin:hover{border:1px solid #003854}#sub-nav .social a.pinterest{background:url('/images/social/pinterest.png?1353755656') center no-repeat #be4037;border:1px solid #be4037}#sub-nav .social a.pinterest:hover{border:1px solid #96332c}#sub-nav .social a.delicious{background:url('/images/social/delicious.png?1353755656') center no-repeat #3271cb;border:1px solid #3271cb}#sub-nav .social a.delicious:hover{border:1px solid #285aa2}#sub-nav .social a.rss{background:url('/images/social/rss.png?1353755656') center no-repeat #ef7522;border:1px solid #EF7522}#sub-nav .social a.rss:hover{border:1px solid #cf5d0f}#pagenavi{padding:20px 0;height:20px;line-height:20px;position:relative;border-top:1px solid #fff;border-bottom:1px solid #ddd}#pagenavi a:hover{text-decoration:underline}#pagenavi .prev,#pagenavi .next{position:absolute}#pagenavi .prev{padding-left:30px;left:0}#pagenavi .prev:before{content:"\f060";font:1.3em FontAwesome;position:absolute;left:0}#pagenavi .next{padding-right:30px;right:0}#pagenavi .next:before{content:"\f061";font:1.3em FontAwesome;position:absolute;right:0}#pagenavi .center{text-align:center;width:100%;display:block}@media screen and (max-width: 400px){#pagenavi .center{display:none}}article{border-bottom:1px solid #ddd;border-top:1px solid #fff;padding:30px 0;position:relative}@media screen and (max-width: 800px){article{padding-bottom:15px}}@media screen and (max-width: 600px){article{padding:15px 0}}article h2.title{font-size:1.8em;font-weight:300;line-height:35px;margin-bottom:20px}article h2.title a{color:#222}article .entry-content{line-height:2;text-align:justify}article .entry-content a:hover{text-decoration:underline}article .entry-content .more-link{display:block;margin-top:16px;padding-left:30px;position:relative}article .entry-content .more-link:before{content:"\f061";font:1.3em FontAwesome;line-height:1.6em;position:absolute;left:0}article .entry-content p,article .entry-content blockquote,article .entry-content ul,article .entry-content ol,article .entry-content dl,article .entry-content table,article .entry-content iframe,article .entry-content h1,article .entry-content h2,article .entry-content h3,article .entry-content h4,article .entry-content h5,article .entry-content h6,article .entry-content .video-container{margin-top:10px}article .entry-content ul,article .entry-content ol,article .entry-content dl{margin-left:20px}article .entry-content ul ul,article .entry-content ul ol,article .entry-content ul dl,article .entry-content ol ul,article .entry-content ol ol,article .entry-content ol dl,article .entry-content dl ul,article .entry-content dl ol,article .entry-content dl dl{margin-top:0}article .entry-content strong{font-weight:bold}article .entry-content em{font-style:italic}article .entry-content p{margin-top:10px}article .entry-content h2{font-weight:300;border-bottom:1px solid #ddd;position:relative}article .entry-content h2:before{content:"";position:absolute;bottom:-2px;border-bottom:1px solid #fff;width:100%}article .entry-content img,article .entry-content video{max-width:100%;height:auto}article .entry-content blockquote{background:#ddd;border-left:5px solid #ccc;padding:15px 20px;margin-top:10px}article .entry-content blockquote>p:first-of-type{margin-top:0}article .entry-content iframe{border:none}article .entry-content table{background:#ddd;border:1px solid #ccc;border-spacing:0;margin-top:10px}article .entry-content table th{background:#ccc;padding:0 15px}article .entry-content table td{text-align:center}article .entry-content table tr:nth-of-type(2n){background:#d5d5d5}article .entry-content .caption{display:block;font-size:0.9em;color:#999;padding-left:25px;position:relative}article .entry-content .caption:before{content:"\f040";color:#ccc;font:1.3em FontAwesome;line-height:1.6em;position:absolute;left:0}article .entry-content .video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}article .entry-content .video-container iframe,article .entry-content .video-container object,article .entry-content .video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;margin-top:0}.share{padding:15px 0;border-top:1px solid #fff;border-bottom:1px solid #ddd}.post h2.title,.post .entry-content{margin-left:200px}@media screen and (max-width: 800px){.post h2.title,.post .entry-content{margin-left:0}}.post .meta{position:absolute;top:85px;line-height:2;font-size:0.9em;color:#999;width:170px}@media screen and (max-width: 800px){.post .meta{margin-top:15px;position:static;width:auto}}.post .meta a{color:#999;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s}.post .meta a:hover{color:#222}.post .meta .date,.post .meta .tags,.post .meta .comments{padding-left:30px;position:relative}.post .meta .date:before,.post .meta .tags:before,.post .meta .comments:before{color:#ccc;font:1.3em FontAwesome;line-height:1.6em;position:absolute;left:0}@media screen and (max-width: 800px){.post .meta .date,.post .meta .tags,.post .meta .comments{display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline;margin-right:30px}}.post .meta .date:before{content:"\f073"}.post .meta .tags:before{content:"\f02c"}.post .meta .comments:before{content:"\f075"}.archives{position:relative}.archives:last-of-type:before{content:"";position:absolute;bottom:0;width:200px;border-top:1px solid #ddd}.archives .year{line-height:35px;width:200px;position:absolute;top:0;padding-top:15px;border-top:1px solid #fff}.archives .year:before{content:"";position:absolute;top:-2px;width:100%;border-top:1px solid #ddd}@media screen and (max-width: 600px){.archives .year{position:relative;width:100%}}.archives article{margin-left:200px;padding:15px 0}@media screen and (max-width: 600px){.archives article{margin-left:0}.archives article:first-of-type{border-top:none;padding-top:30px}}.archives article .title{margin-bottom:0}.archives article .meta{color:#999;font-size:0.9em;line-height:2;margin-top:15px}@media screen and (max-width: 600px){.archives article .meta{display:none}}.archives article .meta span{margin-right:30px;display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline}.archives article .meta span:before{color:#ccc;font:1.3em FontAwesome;padding-right:10px}.archives article .meta a{color:#999;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s}.archives article .meta a:hover{color:#222}.archives article .meta .date:before{content:"\f073"}.archives article .meta .tags:before{content:"\f02c"}.archives article .meta .comments:before{content:"\f075"}#comment{padding:30px 0;border-top:1px solid #fff;border-bottom:1px solid #ddd}#comment h2.title{font-size:25px;font-weight:300;line-height:35px;margin-bottom:20px}footer{padding:15px 0;border-top:1px solid #fff;text-align:center;font-size:0.9em}article code,article pre{background:#ddd;border:1px solid #ccc;font-family:Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace}article code{font-size:0.9em;padding:1px 3px;margin:0 3px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}article pre{font-size:1/0.9em;line-height:1.5;margin-top:10px;padding:5px 15px;overflow-x:auto;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}article pre code{background:none;border:none;padding:0;margin:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0}figure.code{background:#ddd;border:1px solid #ccc;margin-top:10px;padding:5px 15px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}figure.code figcaption{font-size:0.9em;position:relative}figure.code figcaption span{margin:-5px -15px 0;padding:5px 15px;display:block;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #dddddd));background:-webkit-linear-gradient(top, #cccccc,#dddddd);background:-moz-linear-gradient(top, #cccccc,#dddddd);background:-o-linear-gradient(top, #cccccc,#dddddd);background:linear-gradient(top, #cccccc,#dddddd)}figure.code figcaption span:empty{display:none}figure.code figcaption a{position:absolute;top:5px;right:0}figure.code code,figure.code pre{background:none;border:none;padding:0;margin:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0}figure.code .highlight{overflow-x:auto}figure.code .line-numbers{border-right:1px solid #ccc;font-family:Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;padding-right:15px;text-align:right}figure.code table{border:none;text-align:left;margin-top:0}figure.code table td{text-align:left}figure.code td.code{width:100%;padding-left:15px;overflow-x:auto}.entry-content .gist{background:#ddd;color:#222;padding:30px 15px 5px;margin-top:10px;border:1px solid #ccc;position:relative;overflow:hidden;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.entry-content .gist .gist-file{margin:0}.entry-content .gist .gist-file .gist-data{background:none;border:none}.entry-content .gist .gist-file .gist-data pre{font:0.9em Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;line-height:1.5}.entry-content .gist .gist-file .gist-meta{font:300 0.9em "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;margin:0 -16px -6px;padding:5px 15px;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #cccccc));background:-webkit-linear-gradient(top, #dddddd,#cccccc);background:-moz-linear-gradient(top, #dddddd,#cccccc);background:-o-linear-gradient(top, #dddddd,#cccccc);background:linear-gradient(top, #dddddd,#cccccc)}.entry-content .gist .gist-file .gist-meta a{color:#258fb8}.entry-content .gist .gist-file .gist-meta a:first-of-type{position:absolute;top:5px;right:15px;z-index:1}.entry-content .gist .gist-file .gist-meta a:nth-of-type(2){position:absolute;top:0;left:0;padding:5px 15px;width:100%;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #dddddd));background:-webkit-linear-gradient(top, #cccccc,#dddddd);background:-moz-linear-gradient(top, #cccccc,#dddddd);background:-o-linear-gradient(top, #cccccc,#dddddd);background:linear-gradient(top, #cccccc,#dddddd)}figure.code .c,.gist-highlight .c{color:#93a1a1 !important;font-style:italic !important}figure.code .cm,.gist-highlight .cm{color:#93a1a1 !important;font-style:italic !important}figure.code .cp,.gist-highlight .cp{color:#93a1a1 !important;font-style:italic !important}figure.code .c1,.gist-highlight .c1{color:#93a1a1 !important;font-style:italic !important}figure.code .cs,.gist-highlight .cs{color:#93a1a1 !important;font-weight:bold !important;font-style:italic !important}figure.code .err,.gist-highlight .err{color:#dc322f !important;background:none !important}figure.code .k,.gist-highlight .k{color:#cb4b16 !important}figure.code .o,.gist-highlight .o{color:#586e75 !important;font-weight:bold !important}figure.code .p,.gist-highlight .p{color:#586e75 !important}figure.code .ow,.gist-highlight .ow{color:#2aa198 !important;font-weight:bold !important}figure.code .gd,.gist-highlight .gd{color:#586e75 !important;background-color:#f4c5b6 !important;display:inline-block}figure.code .gd .x,.gist-highlight .gd .x{color:#586e75 !important;background-color:#f1b1a4 !important;display:inline-block}figure.code .ge,.gist-highlight .ge{color:#586e75 !important;font-style:italic !important}figure.code .gh,.gist-highlight .gh{color:#93a1a1 !important}figure.code .gi,.gist-highlight .gi{color:#586e75 !important;background-color:#e5e3b5 !important;display:inline-block}figure.code .gi .x,.gist-highlight .gi .x{color:#586e75 !important;background-color:#cdd088 !important;display:inline-block}figure.code .gs,.gist-highlight .gs{color:#586e75 !important;font-weight:bold !important}figure.code .gu,.gist-highlight .gu{color:#6c71c4 !important}figure.code .kc,.gist-highlight .kc{color:#859900 !important;font-weight:bold !important}figure.code .kd,.gist-highlight .kd{color:#268bd2 !important}figure.code .kp,.gist-highlight .kp{color:#cb4b16 !important;font-weight:bold !important}figure.code .kr,.gist-highlight .kr{color:#d33682 !important;font-weight:bold !important}figure.code .kt,.gist-highlight .kt{color:#2aa198 !important}figure.code .n,.gist-highlight .n{color:#268bd2 !important}figure.code .na,.gist-highlight .na{color:#268bd2 !important}figure.code .nb,.gist-highlight .nb{color:#859900 !important}figure.code .nc,.gist-highlight .nc{color:#d33682 !important}figure.code .no,.gist-highlight .no{color:#b58900 !important}figure.code .nl,.gist-highlight .nl{color:#859900 !important}figure.code .ne,.gist-highlight .ne{color:#268bd2 !important;font-weight:bold !important}figure.code .nf,.gist-highlight .nf{color:#268bd2 !important;font-weight:bold !important}figure.code .nn,.gist-highlight .nn{color:#b58900 !important}figure.code .nt,.gist-highlight .nt{color:#268bd2 !important;font-weight:bold !important}figure.code .nx,.gist-highlight .nx{color:#b58900 !important}figure.code .vg,.gist-highlight .vg{color:#268bd2 !important}figure.code .vi,.gist-highlight .vi{color:#268bd2 !important}figure.code .nv,.gist-highlight .nv{color:#268bd2 !important}figure.code .mf,.gist-highlight .mf{color:#2aa198 !important}figure.code .m,.gist-highlight .m{color:#2aa198 !important}figure.code .mh,.gist-highlight .mh{color:#2aa198 !important}figure.code .mi,.gist-highlight .mi{color:#2aa198 !important}figure.code .s,.gist-highlight .s{color:#2aa198 !important}figure.code .sd,.gist-highlight .sd{color:#2aa198 !important}figure.code .s2,.gist-highlight .s2{color:#2aa198 !important}figure.code .se,.gist-highlight .se{color:#dc322f !important}figure.code .si,.gist-highlight .si{color:#268bd2 !important}figure.code .sr,.gist-highlight .sr{color:#2aa198 !important}figure.code .s1,.gist-highlight .s1{color:#2aa198 !important}#banner{color:#999;padding:30px 0;line-height:30px;text-align:center;position:relative;display:none;border-top:1px solid #fff;border-bottom:1px solid #ddd}#banner:hover a{color:#258fb8}#banner a{color:#999;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s}#banner a:hover{text-decoration:underline}#banner small{position:absolute;right:0;bottom:0}#banner .loading{background:url('/images/loading_pacman.gif?1353755656') center no-repeat;text-indent:-9999px}#banner .container{height:30px;overflow:hidden;position:relative;display:none}#banner .container .feed{list-style:none;position:absolute;top:0;width:100%}#banner .container .feed li{position:relative}#banner .container .feed li small{position:absolute;right:0}/* fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;padding:0;margin:0}.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}.fancybox-skin{position:relative;padding:0;margin:0;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.fancybox-opened{z-index:8030}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}.fancybox-outer,.fancybox-inner{padding:0;margin:0;position:relative;outline:none}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;padding:0;margin:0;vertical-align:top}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url('/images/fancybox/fancybox_sprite.png?1353755656')}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:8020}#fancybox-loading div{width:44px;height:44px;background:url('/images/fancybox/fancybox_loading.gif?1353755656') center center no-repeat}.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url('/images/fancybox/blank.gif?1353755656');-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden}.fancybox-prev span{left:20px;background-position:0 -36px}.fancybox-next span{right:20px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;padding:0;overflow:visible;visibility:hidden}#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:#000}#fancybox-overlay.overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}.fancybox-opened .fancybox-title{visibility:visible}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8030;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);text-shadow:0 1px 2px #222;color:#FFF;font-weight:bold;line-height:24px;white-space:nowrap;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{margin-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,0.8)}

Hmmm this gives off a warning that this isn’t the one. Then I remembered that Octopress is using SASS and SASS compiles to CSS so I probably needed to edit the SASS file. Luckily I found a sass directory and the first thing I opened up was the _base.scss file.

1
2
3
4
5
@import "base/color";
@import "base/font";
@import "base/layout";
@import "base/typography";
@import "base/utilities";

Hmmm, I need to change the color so I’ve gone ahead and opened the base folder and opened up _color.scss

1
2
3
4
5
6
7
$color-background: #eee;
$color-main: #258fb8;
$color-gray01: #666;
$color-gray02: #999;
$color-gray03: #ccc;
$color-gray04: #ddd;
$color-gray05: #fff;

I don’t have any idea which one. And I just can’t do trial and error here because my laptop goes into suicide sequence if I execute rake preview and change up the contents of some files So I loaded my blog on the browser and see if there’s anything similar.

style

There it is! the body has a color of #666 so is the $color-gray01 variable it’s definitely the one that needs changing.

But the problem is I can’t just put in color: black because that would be a crime (for web-designers at least). Octopress site to the rescue! They’re using #222 as font color so I’ve gone ahead and copied that.

1
2
3
4
5
6
7
$color-background: #eee;
$color-main: #258fb8;
$color-gray01: #222;
$color-gray02: #999;
$color-gray03: #ccc;
$color-gray04: #ddd;
$color-gray05: #fff;

Ok everybody happy!

Adding Coderwall badge

Looking at source/_includes/header.html they also have a coderwall badge and I also have a coderwall account it would just turn to waste if I don’t post it on my blog as well. Recalling octopress basics there’s a _config.yml file at the root of octopress directory which contains all the general settings for the octopress blog like blog name, twitter account, pagination and stuff.

The condition for showing coderwalls beautiful badge is that site.coderwall_user exists in the _config.yml.

1
<a class="coderwall" href="https://coderwall.com/" title="Coderwall">Coderwall</a>

That’s easy, just add the following to _config.yml where wern is your coderwall username.

1
2
# Coderwall
coderwall_user: wern

Replace default scrollbars

Slash is using the awesome fancybox plugin. Lightbulb! this is where I got the idea that I can actually include plugins as well. I noticed that slash is not using a scrollbar beautifier like the default theme for Octopress so I decided to use the ever awesome JScrollpane (second google search entry when searching jscrollpane) which I always use in my projects if there’s a need to replace the default scrollbars.

I just downloaded all the required files and put them on their proper directories.

1
2
jquery.jscrollpane.css //goes to stylesheets directory.
jquery, jquery.mousewheel.js and jquery.jscrollpane.min.js // goes to javascripts directory.

Then link them up in the head.html file.

1
<link href="/stylesheets/jscrollpane.css" media="screen, projection" rel="stylesheet" type="text/css">

The scripts goes to the footer.html file since its good practice (content will load faster if scripts are at the bottom)

1
2
3
4
5
<script src="/javascripts/jquery.jscrollpane.js"></script>
<script src="/javascripts/jquery.mousewheel.js"></script>
<script>
$('.code').jScrollPane();
</script>

Comments