Overriding Styles

If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade.

Changing the Color Scheme

For help choosing colors check out HSL Color Picker, an easy to use web based color picker.

# In /sass/base/
_theme.scss      # All colors are defined here

# In /sass/custom/ - Change these files for easy customization
_colors.scss     # Override colors in base/_theme.scss to change color schemes
_styles.scss     # Easly Override any style (last in the cascade)

All of the colors for Octopress are defined as Sass variables in /sass/base/_theme.scss. To customize your color scheme edit sass/custom/_colors.scss and override the colors in sass/base/_theme.scss.

The official Octopress site is using the default 'classic' theme with a few minor color changes to the custom colors file. Take a look at this file and you'll see some lines of sass code that have been commented out.

$header-bg: #263347;
$subtitle-color: lighten($header-bg, 58);
$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
$sidebar-bg: desaturate(#eceff5, 8);
$sidebar-link-color: saturate(#526f9a, 10);
$sidebar-link-color-hover: darken(#7ab662, 9);

The custom colors file has some commented out colors you can use. The theme file is broken up into sections to make it easier to read through. Here's a look at the navigation section of sass/base/_theme.scss.

/* Navigation */
$nav-bg: #ccc !default;
$nav-color: darken($nav-bg, 38) !default;
$nav-color-hover: darken($nav-color, 25) !default;
...

The !default rule lets the variable be overridden if it is defined beforehand. is imported before the _theme.scss it can predefine these colors easily. There are comments to help out with this in the source.

Many of the colors in the theme are picked using Sass's color functions. As a result you can pick a new background color for the navigation by setting the $nav-bg variable and the other colors will derived for you. This isn't perfect, but it should do a decent job with most colors.

Changing the Layout

# In /sass/base
_layout.scss     # Responsive layouts are defined here

# In /sass/custom - Change these files for easy customization
_layout.scss     # Override settings for base/_layout.scss to change the layout

Just like with colors, widths in /sass/base/_layout.scss are defined like $max-width: 1200px !default; and can be easily customized by defining them in sass/custom/_layout.scss. Here's a look at the layout defaults.

$max-width: 1200px !default;
 
// Padding used for layout margins
$pad-min: 18px !default;
$pad-narrow: 25px !default;
$pad-medium: 35px !default;
$pad-wide: 55px !default;
 
// Sidebar widths used in media queries
$sidebar-width-medium: 240px !default;
$sidebar-pad-medium: 15px !default;
$sidebar-pad-wide: 20px !default;
$sidebar-width-wide: 300px !default;
 
$indented-lists: false !default;

These variables are used to calculate the width and padding for the responsive layouts. The $indented-lists variable allows you to choose if you prefer indented or normal lists.