First Official Post

03/24/2013, Sun

Categories: #Ruby

Tags: #octopress

Customizing Octopress Default Theme

Change Default Theme CSS

In your sass/custom/_colors.scss file, define the values for the items below. I'm using the following colors for my theme, but feel free to change them to whatever you want them to be.

Header Colors

/* Header Background and Subtitle Color */

$header-bg: #1a1a1a;
$subtitle-color: #c4c4c4 !default;

Text Colors

/* Text Regular and Text Light Colors */

$text-color: #fafafa !default;
$text-color-light: #919191 !default;

Link Colors

/* Link State Colors */

$link-color: #fffffa !default;
$link-color-hover: #c4c4c4 !default;
$link-color-visited: #a8a8a8 !default;

Nav Background Colors

/* Nav Foreground and Background Color */

$nav-bg-front: background-color(none) !default;
$nav-bg-back: background-color(none) !default;

Cut Out Google Fonts

Reduce the number of requests that you make to get your site to load faster. Follow the directions on the big dinosaur blog.

Removing Default Javascript

In the /source/_include/head.html file, remove any unwanted javascript. I decided to do this because having dom manipulation or feature detection javascript libraries were not critical to consuming the information on my blog.

Adding a Custom Favicon

Navigate to source/_include/custom/head.html and insert these lines:

/* Adding Favicon in Ico and Png Format */

<link
  href="{{ root_url }}/favicon.ico"
  rel="shortcut icon"
  type="image/x-icon"
/>
<link
  href="{{ root_url }}/favicon.png"
  rel="shortcut icon"
  type="image/x-icon"
/>

Make sure to include the favicon.ico and favicon.png to source/_includes directory for this to work. Before including the lines below, be sure to open the ico file in a couple of different browsers to check if the ico is loaded properly and there are no visual defects on your ico file.

I used an online tool to convert my png file to an ico over at rw-designer.com. The default settings should work ok.

On another note you may also want to include additional icons for Apple devices.

Settings in _config.yml

# Some Changes to _config.yml

# change the date format for posts to mm/dd/yyyy
date: "%m/%d/%Y"

# remove the recent post sidebar on the right
# recent posts will now appear on the bottom
sidebar: collapse

Minifying Content

Install jekyll-press to minify your html, css and javascript. Detailed instructions are on the github page.

Use Monokai Syntax Highlighting Scheme

Go to https://github.com/sanukcode/Monokai-Sublime-Text-Octopress and follow the instructions.

WH