Theming & Customization - Octopress. Shortly after the 2.0 release Octopress added the source/_includes/custom directory. If you don't have this, you'll want to update because it's really nice. source/ _includes/ # Main layout partials custom/ # <- Customize head, header, navigation, footer, and sidebar here asides/ # Theme sidebar partials post/ # post metadata, sharing & comment partials _layouts/ # layouts for pages, posts & category archives Landing Page vs.
Blog Index By default Octopress generates your blog's post index at your site's root directory. If you'd rather publish your blog index somewhere else like blog/index.html do this in your terminal. Next you'll want to update your Rakefile to be sure your new blog index is preserved when you update Octopress. Remember to update the main navigation for your site, since currently the blog link points to /.
Finally, source/index.html can become the landing page of your wildest dreams. Changing the <HEAD> Changing the sidebar Changing the Header, Navigation & Footer. Styles - Octopress. 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.
The official Octopress site is using the default 'classic' theme with a few minor color changes to the custom colors file. The custom colors file has some commented out colors you can use. The ! Many of the colors in the theme are picked using Sass's color functions. Changing the Layout. How to install a custom theme on octopress - DBTV Dev Blog. Octopress is an awesome blogging framework built on top of Jekyll. This post will show you how to add a custom theme to your Octopress blog. The Default Classic Theme When you launch your octopress blog it will look like this: The classic theme has been used for so many octopress blogs it’s a good idea to customize the look to stand out from the crowd. Find a new custom theme The first step is to find a custom theme that you like. How to install a new theme With a few quick steps you can install a new theme to drastically improve the look and feel of your blog.
Note: there will always be a theme already installed and saying “yes” to overwriting it is nessasary to install the new theme. A few of my favorite themes Below are screenshots and installation instructions for three of my favorite themes. BlogTheme BlogTheme is a bold white theme that highlights pages in one easy to read column. Slash Slash is a grey minial blog theme that highlights your posts by removing the sidebar.
Villainy. Blogs - Is it necessary/advisable to remove the default theme in octopress when installing a new one? Lea, making things: Making an Octopress Theme. This blog is generated with Octopress. While I was happy using Octopress more or less out-of-the-box for my Hacker School blog, I wanted a bit more control over the layout for this one. As this helpful blog post points out, your available themes reside in a .themes subdirectory of Octopress. A theme consists of information for the Liquid template engine to generate the HTML pages (in layouts) and for Sass to generate a CSS stylesheet (in sass). When you install a theme (rake install[themename]), those files are copied over into the corresponding parts of your Octopress source and sass directories.
When you are working on a new theme, you fiddle with the files right in source and sass and later bundle it up, drop it in .themes, and install it. (And of course, you can always reset by re-installing the “Classic” theme.) layouts is your chance to add, rearrange, or remove entire elements. From there, it’s all up to the Sass. Lastly, package that theme up! Jekyll, Bootstrap, and Octopress - blog.kitchen.io. Write Octopress Themes - Chymeric Tutorials. Octopress is a fast and clean blogging platform which advertises itself as “a blogging framework for hackers”.
Here we provide the first comprehensive documentation on how to best create new Octopress themes by hacking the default theme (or any theme based on it). We base our instructions both on general tools which you can use for better hacking and on solutions to popular use cases. This documentation assumes that you are somewhat aware of how Octopress generates your site.
The key concepts here are that all theming should be done exclusively in the /sass (mainly for CSS) and /source (mainly for HTML) directories (as relative to your blog root); and that generating your blog via $ bundle exec rake generate processes styles and layouts defined in those directories and creates a slightly differently formatted static output exported to /public. General Tools This should get you started wherever use case approaches fail. Change Fonts Change Colors Center Elements Keep Your Theme Hackable. Our experience with Jekyll and Octopress. We recently moved from WordPress to Jekyll for our website because we found it harder to maintain our site with WordPress. We also hit performance bottlenecks with WordPress and were clueless on how to fix those. Jekyll made a lot more sense as it uses Ruby, which we are very comfortable with as compared to PHP.
And hardly any performance bottlenecks because the entire site is static, and so no DB tuning required What is Jekyll? Jekyll is a simple, blog aware, static site generator created by Tom Preston-Werner, founder of GitHub. A semantic HTML5 templateA Mobile first responsive layout (rotate, or resize your browser and see)Built in 3rd party support for Twitter, Google Plus One, Disqus Comments, Pinboard, Delicious, and Google AnalyticsAn easy deployment strategy using Github pages or RsyncBuilt in support for Rack servers There are lot of 3rd party themes available with Octopress which you can chose. How does it work? “Aha” Moments Responsiveness Asides for Featured posts Contact Us Form.