Octopress theme customization

14 Feb 2012

Update Jul 23rd, 2012

I’ve released DarkStripes, an Octopress theme based on the customizations described in this article.  Check it out

Original article

I received a positive feedback on the Octopress theme customization I wrote for this website, so I decided to publish the modifications I made to the default theme.

I followed the Theming & Customization instructions and modified only the “custom” files beacuse I wanted to be able to upgrade Octopress without having to re-apply my changes every time.

Feel free to use the following code, just please give me credit and some backlink love.

First of all I changed the main layout width because I wanted the article content to be 640px wide, a populare image format, especially if you use Flickr.
I love the modern browser ability to resize images on the fly, but I prefer to keep my pages as light as possible, so I try to post images that fit the layout.

$max-width: 1037px;
$sidebar-width-medium: 286px;
$sidebar-width-wide: 286px;

Then I changed the default font and set it to Lato, including the font from Google Fonts

$sans: "Lato", sans-serif;
$serif: "Lato", sans-serif;
$heading-font-family: 'Lato', sans-serif;
$header-title-font-family: "League", Helvetica, Arial, sans-serif;
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And finally I wrote my custom CSS. I use some external resource in my style:

@font-face {
	font-family: "League";
	src: url('/font/LeagueGothic.otf');
}

a:visited, #content .blog-index article h1 a:hover { color: #1863A1; }


/* ----- main layout ----- */


html { background: #262C33 url("/images/line-tile.png"); }

body { font-size: 1em; }

body > div { background-image: none; }

body > div > div { background-image: none; }


/* ----- header ----- */


body > header{
	background: none;
	padding: 1.6em 0 1em 0
}

body > header h1{
	font-size: 2.8em;
	padding-left: 20px;
	text-shadow: rgba(0, 0, 0, 0.8) 0 0 8px;
}

body > header h2{
	font-size: 0.5em;
	letter-spacing: 1px;
	margin-top: -1.4em;
	padding-left: 20px;
}

body > nav {
	padding-top: .15em;
	padding-bottom: .15em;
}

body > nav a{
	font-size: 1em;
	line-height: 1.4em;
}

body > nav form .search{
	padding: .2em .3em;
}


/* ----- Content ----- */


#content .blog-index article h1 {
	font-size: 1.8em;
	font-weight: normal;
}

#content .blog-index article h1, #content .blog-index article h1 a, article header h1, article header h1 a{
	color: #555555 !important;
}

h1 { font-size: 1.8em; }

h1 span{
	font-weight: normal;
	color: #E0841B;
}

article h2, article h3, article header h1{
	font-weight: normal;
}

.blog-index article h1 a:hover{ text-decoration: none; }

article p {
	text-align:justify;
	margin-bottom: 1em;
}


/* ----- Sidebar ----- */


aside.sidebar section h1 { letter-spacing: 0.1em; }

aside.sidebar a { text-decoration: none; }

.toggle-sidebar{display: none;}

ul#gh_repos > li > a{
	display: block;
	font-weight: bold;
	margin-bottom: 0.4em;
}

aside.sidebar{
	-moz-border-radius-topright: 0.4em;
	-webkit-border-radius: 0 0.4em 0 0;
	border-radius: 0 0.4em 0 0;
}


/* ----- Footer ----- */


body > footer{
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius:0;
	margin-bottom: 0;
}


/* ----- 404 ----- */


.notfound404 article{
	margin-left: 0 !important;
}


/* ----- Media queries ----- */


@media only screen and (min-width: 550px) {

	body > header h1{
		background: url("/favicon.png") no-repeat 0 8px;
		padding-left: 60px;
	}

	body > header h2 { padding-left: 60px; }

	body > footer { margin-bottom: 3em; }
}

@media only screen and (min-width: 1040px) {
 
	body > nav {
	  -moz-border-radius: 0.4em;
	  -webkit-border-radius: 0.4em;
	  border-radius:0.4em;
	  margin-bottom: 2em;
	}

	body > footer{
		-moz-border-radius-bottomleft: 0.4em;
		-moz-border-radius-bottomright: 0.4em;
		-webkit-border-radius: 0 0 0.4em 0.4em;
		border-radius: 0 0 0.4em 0.4em;
	}

	#main{
		-moz-border-radius-topleft: 0.4em;
		-moz-border-radius-topright: 0.4em;
		-webkit-border-radius: 0.4em 0.4em 0 0;
		border-radius: 0.4em 0.4em 0 0;
	}

	#content{
		-moz-border-radius-topleft: 0.4em;
		-webkit-border-radius: 0.4em 0 0 0;
		border-radius: 0.4em 0 0 0;
	}

	#content .blog-index a[rel="full-article"]{
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
	}
}