Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
266 lines (202 sloc) 11.3 KB

Oscailte — An Octopress theme


Attention Latest version: 2.0.2


Oscailte (IPA: [ˈɔsˠkɪlʲtʲɪ] Gaeilge for "Open") is a light and clean theme for use on Octopress sites, released under the MIT Licence.

Oscailte Preview

Quicklinks

Installation

Attention! With the recent updates to Octopress to support Jekyll 2, if you are using the latest version of Octopress 2 (after June 21st, 2014), the paginate_path setting needs to be updated in your _config.yml file:

paginate_path: "blog/:num"

You can install Oscailte like so:

$ cd your_octopress_directory
$ git clone -b master https://github.com/coogie/oscailte.git .themes/oscailte
$ rake install['oscailte']
$ rake generate

Having problems when installing with zsh? Try rake install\['oscailte'\] instead.

Next, update your _config.yml with the following:

# Oscailte Theme Settings
oscailte:
    hire: # The "Available for Hire" widget
        visible:
            footer: false
            sidebar: true
        footer-cols: 6 # Number of columns available for the footer component, max 12
        available: true # Whether or not you're available for hire
        vibrant: false # Makes the widget much more noticeable
        message: "Available for new opportunities"
    social:
        visible: true
        title: # Defaults to "Follow me!" if not present
        adn: # App.net
        coinbase:
        dribbble:
        facebook:
            user:
            app_id: # For enabling Open Graph metadata
        github:
            user:
            show_profile_link:
        googleplus:
        hackernews:
        keybase:
        linkedin:
        pinterest:
        reddit:
        stackoverflow:
        twitter:
            user:
            widget: # Shows the Recent Tweets widget in sidebar
                is_shown:
                show_profile_link:
                widget_id:
        youtube:

Features

Homepage

Oscailte includes a clean page, separated from the blogging capabilities of Octopress. The theme can be modified to instead use just the blog index as the homepage.

Excerpts

While excerpts are not necessarily a theme feature, Oscailte contains styling to support them. In order to use excerpts on your site simply insert <!-- more --> somewhere inside your post content to trigger the break.

Excerpt Preview

Gravatar

Oscailte makes use of the site.email used in _config.yml (if present) to grab and display your Gravatar if you use one. Otherwise, the theme will instead display the default Gravatar logo, which can be changed by replacing the file locally.

If you make use of the Gravatar feature, please ensure you use an email address that you do not mind being publicly crawlable by bots/spiders.

Social Sidebar

Oscailte allows you to display links to your other online profiles in a quick and easy fashion. The links for each of these are handled within site.oscailte.social in your _config.yml. Please note that these are only required if you wish to display items such as Social Sidebar, Github Repos, Twitter Timeline, and Facebook OpenGraph Metadata.

Oscailte supports the above social sites out of the box, but more may be (infinitely) added as the user sees fit.

The colours for these are defined in _variables.scss as a key-value pair, with the key being used to create the class name. If you do add your own in and would like to colour it accordingly, you can create an entry in your own _variables.scss file. You can see the SCSS at work on L#65 of _social.scss

...
$sites:
    adn           #4A484C,
    coinbase      #3380D0,
    dribbble      #EA4C89,
    facebook      #3B5998,
    github        #333333,
    googleplus    #db4a39,
    hackernews    #FF6600,
    keybase       #FF8648,
    linkedin      #4875b4,
    pinterest     #CC2127,
    reddit        #5F99CF,
    stackoverflow #FE7A15,
    twitter       #00a0d1,
    youtube       #CC181E;

Facebook Open Graph (Preview)

Oscailte supports the use of Facebook Open Graph metadata to give that little umph when somebody shares a link to your site on somebody's Facebook timeline/wall. To enable this, you must first add the following to your _config.yml file:

...
oscailte:
    social:
        facebook:
            app_id: xxxxxxxxxx

If you don't know how to get an App ID, you can pick one up by going to the Insights Dashboard and clicking the green button in the top-right that reads "Insights for your website". The App ID can be found in the modal that appears on the page. Make sure you add the App ID to your Octopress site, compile, and push to your hosting before proceeding with the modal on Facebook.

Some optional, yet useful options are also available to use on a per-page/post basis

---
layout: post
title: "Example Post Title"
date: 2014-02-18 11:35:55 +0000
comments: true
categories: [category 1, category 2]

# Provide an image thumbnail for Facebook OpenGraph
facebook:
    image: http://yoursite.com/image.jpg
    type: article
---
  • og:title will try to use the post.title, falling back to page.title, and then finally site.title
  • og:site_name uses the value of site.title
  • og:url will use the canonical link for the page, falling back to site.url
  • og:description will attempt to use the description from the post/page's own YML file, falling back to use content | raw_content if it doesn't exist.
  • If site.oscailte.social.facebook.user has been set, og:author will associate the post/page with that user.
  • If [page|post].facebook.image has been set in the post/page's own YML file, og:image will use its value as an image for that particular page/post

Big thanks to @zclancy's post, "Twitter Cards, Facebook Open Graph, and Octopress" from which I stole referenced the code! ;)

Twitter Timeline Aside (Preview)

Since the release of v1.1 of the Twitter API, Twitter removed support for unauthenticated API calls. Twitter does, however, offer a widget that integrates well with blogging platforms - including Octopress.

To get started, head over to Twitter's Widgets Configurator page and create a new Widget. Next, copy the code and look for data-widget-id="xxxxxxxxxxxx". Copy this widget ID and then update the social settings for Oscailte.

...
oscailte:
    social:
        twitter:
            user: username
            widget:
                is_shown: true
                show_profile_link: true
                widget_id: xxxxxxxxxxxx

Next, modify your default_asides within your _config.yml to include the Twitter Aside and you're good to go!

default_asides: [..., asides/twitter.html, ...]

(Un)Available For Hire

This feature displays a message within the footer or the sidebar, or both! It can be used to bring attention to your availability for taking on new projects. The settings for it should be placed within your _config.yml

oscailte:
    hire:
        visible:
            footer: false
            sidebar: true
        footer-cols: 6   # Number of columns available for the footer component, max 12
        available: true  # Whether or not you're available for hire
        vibrant: false   # Makes the widget much more noticeable
        message: "Available for new opportunities"

If oscailte.hire.available is set to true, then the displayed message will become a link, with a mailto: populated with your site.email.

Customising Oscailte

Site Colours

Many of the colours used throughout Oscailte can be fully customised and found within _variables.scss.

Default Dummy Text

You can modify the default 'Lorem Ipsum' text on the Hero Unit and homepage by editing the following files:

Default Icons on Homepage

You can modify and change the default icons which are above the grid items by editing the following file in the source directory:

  • index.html

You can edit the following class names with your preferred ones to change the left, middle, and right icons respectively.

<i class="fa fa-laptop"></i>
<i class="fa fa-search"></i>
<i class="fa fa-coffee"></i>

Using the Blog as the Homepage

By default, Oscailte comes with a homepage separate from the blogging capabilities. If you wish to use the Blog index as your default Hompage, you can run the following command from your root directory:

$ cp source/blog/index.html source/index.html

This will overwrite the default index with the contents of the Blog index. Be sure to update your source/_includes/custom/navigation.html file.

Modifying the Image and Related Text on Homepage

Modifying image

You can change the background image of the Hero Unit by replacing the following file: source/images/hero_background.jpg

Modifying text

For modifying the text, you can replace the following with your preferred text, or remove it entirely in source/_includes/site/hero_unit.html:

Cliffs of Moher, by <a href="http://www.flickr.com/photos/alfarese/2780612581/" target="_blank">Alessandro Farese</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en" target="_blank" class="licence"><small>(by-nc-nd)</small></a>