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
To customize your color scheme edit
sass/custom/_colors.scss and override the colors in
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.
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
!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
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
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.
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.