This is an old post. It may contain broken links and outdated information.
I’ve been wanting to modify Octopress’s default layout for a few days, and had time this afternoon to sit down and puzzle it out. I’m about as facile with CSS as I am with German—I can ask for directions to the closest schnitzelhaus and possibly apologize for accidentally spilling beer on someone’s wife—so this was a process involving a lot of trial and error. Changing around the background colors was easy, and I’ll touch on that first, but what sent me down an entire series of rabbit holes was trying to figure out how to stuff an image up in the title bar area; or, rather, how to stuff up an image into the titlebar area that could be styled by CSS and reflow as the page is resized. Fortunately, by staring intently at the source for both the official Octopress page and also Angelo Stavrow’s blog, I was able to piece together some results that I’m happy with.
Colors!
First, the easy part: changing the colors. Brandon Mathis, Octopress’s maintainer, thoughtfully packaged Octopress in such a way that any of its styles and elements can be easily overridden by editing customization files; the customizations cascade over the defaults as needed when the pages are generated (“baked”, to use the trendy phrase). I’ve changed the default Octopress colors to something that more closely matches the light scheme I use on the main Bigdinosaur.org web site, and I did it by adding the following lines to ~/octopress/sass/custom/_colors.scss.
$page-bg: #ffffff;
$main-bg: #ffffff;
$header-bg: #ffffff;
$title-color: #000000;
$subtitle-color: #000000;
$text-color: #000000;This overrides the post and page backgrounds with white (#fffff), and then changes the text color for most of the blog text to black (#000000).
Fonts!
I also change the typeface, taking advantage of Google Web Fonts, an awesome repository of more typefaces than any human could tastefully use at one time. Google Web Fonts lets you poke through a few hundred typefaces, find the ones that really tickle you, and then embed them into your own web site. Octopress already uses two Google Web Fonts, PT Sans and PT Serif, for its default layout. I added a third to the mix, a slab-serif typeface called Arvo, which has fun bold edges and which makes, I think, for intellectual but playful-looking headers and titles.
After you’ve chosen the fonts you want to use, the Google Web Fonts picker gives you two separate code snippets to insert into your site. We need to stuff those codes into two separate files, and again, Brandon has made this a painless process. First, add the font-family CSS to ~/octopress/sass/custom/_fonts.scss thusly:
$header-title-font-family: "Arvo", serif;
$header-subtitle-font-family: "Arvo", serif;
$heading-font-family: "Arvo", serif;There are several other web fonts already populated in there, ready to be uncommented for use. The file also contains a note instructing us where we need to make our second edit, to ~/octopress/source/_includes/custom/head.html:
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>NB. Since this post was originally written, I’ve abandoned PT Sans in favor of Lato, but more importantly I’ve also switched from Google Web Fonts to instead using local fonts served via @font_face. Here’s the entry on how I did it.
Pictures!
Now the big one: a CSS-styled header image. Unlike the addition of fonts and colors, the method for adding a CSS-styled header image isn’t immediately obvious—at least, not to web-tards like me. My first inclination was to do a bunch of surgery on ~/octopress/source/_includes/custom/header.html and stuff an image in there; that worked, but it didn’t take more than a glance at the CSS behind the Octopress default site to see that the method used there didn’t involve any additional code going into the header section. Plus, just adding an image in there didn’t really fit with the HTML5 fanciness of Octopress and Jekyll—it didn’t resize or reflow as the page was changed.
The key ended up being the realization that the header styling and its reflowing was coded in ~/octopress/sass/base/_layout.scss. True to form, that file has an override in ~/octopress/sass/custom/_layout.scss, and to that I made the following changes:
body > header h1 {
padding-left:2.5em;
text-align:right;
@media only screen and (min-width: 432px) {
text-align:left;
}
@media only screen and (min-width: 768px) {
padding-left:3em;
}
@media only screen and (min-width: 992px) {
padding-left:2em;
}
}
body > header h2 {
padding-left:5.62em;
text-align:right;
@media only screen and (min-width: 432px) {
text-align:left;
padding-left:3.9em;
}
@media only screen and (min-width: 768px) {
padding-left:5em;
}
@media only screen and (min-width: 992px) {
padding-left:2.9em;
}
}
body > header h1:before {
content:"";
position:absolute;
left:0em;
right:0;
top:1.5em;
height:110px;
width:110px;
overflow:hidden;
text-align:right;
background-image:url('/images/bigdino-blog-head3.png');
background-repeat:no-repeat;
@media only screen and (min-width: 432px) {
top:.32em;
}
@media only screen and (min-width: 768px) {
left:.75em;
}
}For those of you who are even dumber about CSS than I am, I’ll go through the above in detail. The changes are divided up into three sections: the first part styles the main title (“Bigdinosaur Blog”), the second styles the subtitle (“Tales of hacking and stomping on things”), and the third places and styles the background image. Each section also contains instructions on how the styles should change as the browser window’s width changes (the lines beginning with @media only).
The most important thing, and the thing that wasn’t obvious to me at first but is actually really obvious in hindsight, is that the initial parameters for each section describe how the thing should look at its smallest, and then each min-width section describes how the thing should look starting at when the browser window is that wide or wider. So, look at header h1. This is the styling applied to the main title in the header. When the browser window is anywhere from 0 to 431 pixels wide, the title should be right-aligned with a bit of padding on its left to keep it from overlapping with the background dinosaur (more on overlapping in a bit). This is how things get displayed on, say, an iPhone.
The instant the browser window is 432 pixels wide—which is the point at which the “Bigdinosaur Blog” text wraps to a single line—the text switches to left-aligned and the amount of padding changes, again to keep it from overlapping with the background dino. Another shift comes again at 768 pixels of width, and then final shift to the title’s most sprawling layout happens at 992 pixels.
The subtitle, styled in the header h2 section, has similar directives—it starts out right-aligned, shifts to left-aligned at a certain point, and the amount of padding around it shifts as the browser window moves. The challenge with the subtitle is that I wanted it to maintain a consistent position relative to the main title, and since I’m doing my spacing using em values (which are themselves relative units), each new width setting required tuning by hand.
The last section places the background image itself. In order to have the most control about where the image appears and where it reflows to, I’ve given it a position:absolute tag, which means that other styled elements ignore the background when figuring out their own layouts—hence all the fiddling about with padding for the header text. Instead of standard image floating behavior, an absolutely positioned image can sit on top of other page elements. This can be used to creative effect, like on the Octopress home page titlebar, but you do have to be mindful with the spacing and padding of your other elements so that they don’t get eaten.
In its most narrow configuration, the background image sits on the far left of the page, with 1.5 ems of space from the top of its section to ensure that it doesn’t poke up past the main title, and with background-repeat:no-repeat set so that it only displays once rather than tiling or repeating itself. I also found that if I didn’t explicitly declare the height and width of the image, it wouldn’t display at all. Finally, there are two width settings that reposition the image as the page widens so that it maintains a visually pleasing position relative to the title.
I mentioned it above, but it’s worth repeating: the values above are what work for my typeface choice and image size, and you will have to tweak your own to taste. Once I had decided exactly what I wanted to do and figured out what files to edit, it took probably an hour of making small changes and previewing and making small changes and previewing over and over again before I was happy with the way things lined up. I spent so much time fiddling, in fact, that I elected to abandon the idea of having the dino pic resize itself. Dinosaurs, I suppose, are meant to be displayed as large as possible, all the time, and would never consent to any funny-business resizing.
RAAHR!