miklb / Habari_Hyde

A port of the excellent Jekyll theme by Mark Otto

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Habari Hyde

An elegant open source, mobile first theme originally designed for Jekyll and ported to Habari. It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time.

Hyde screenshot

Options

Hyde includes a few options, typically applied via classes on the <body> element.

Themes

As of v1.1, Hyde ships with optional themes based on the base16 color scheme. In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action:

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add anyone of the available theme classes to the <body> element like so:

<body class="theme-base-08">
  ...
</body>

To create your own theme, look to the Themes section of Hyde's CSS. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Hyde with reverse layout

Hyde's page orientation can be reversed with a single class.

<body class="layout-reverse">
  ...
</body>

Author

Mark Otto https://github.com/mdo https://twitter.com/mdo

Ported by: Michael Bishop https://github.com/miklb https://twitter.com/miklb

License

Open sourced under the MIT license.

<3

Habari Notes

Hyde currently supports 2 block areas:

  • Colophon - the area below the Title and tagline. Best suited for navigation using the Menus plugin and block. Note if using the Menus plugin, you should add the class colophon-links to the block setting “Custom class for the tree's ordered list element”.
  • Post Footer - the area directly below the post on single post view. Example content could be a Related Posts plugin. Custom CSS may need to be applied for other types of content.

The best way to customize your theme would be to create a child theme and apply your changes to the necessary files. So if you wanted to have the reverse layout and a different color, you could create your own header.php file in the child theme directory and add your body classes. Obviously you could modify the parent theme, but that would prevent from easily updating. Future versions may provide built in theme options if there were interest. Feel free to open an issue for feature requests and bugs.

About

A port of the excellent Jekyll theme by Mark Otto

License:MIT License


Languages

Language:CSS 59.1%Language:PHP 40.6%Language:JavaScript 0.3%