Code Monkey home page Code Monkey logo

nihilanth-ghost-theme's Introduction

Nihilanth

A simple, clean and responsive theme for Ghost, inspired by Coding Horror.

showcase

##Installation 1. Download the theme right here from the "Releases" section (it's always the name with "nihilanth").

2. Upload the theme. If you have any questions just check the Ghost Documentation.

##Sidebar Here's a guide about how to customize your sidebar:

1. Open the index.hbs and the post.hbs files and look for this:

<aside class="sidebar">
  <div class="box-side" style="width:240px;height:200px;">
    <img src="http://placehold.it/240x200"/>
  </div>
  <div class="box-side" style="width:240px;height:200px;">
    <img src="http://placehold.it/240x200"/>
  </div>
  <div class="res-side">
  <h3>CONTACT ME</h3>
  <ul>
  <li><a target="_blank" href="{{@blog.url}}">Link 1</a></li>
  <li><a target="_blank" href="{{@blog.url}}">Link 2</a></li>
  <li><a target="_blank" href="{{@blog.url}}">Link 3</a></li>
  <li><a target="_blank" href="{{@blog.url}}">Link 4</a></li>
  </ul>
  </div>

If you are familiar with HTML and CSS, editing this will be childs play. If you're not, here are some instructions:

2. You can change the size of the first two boxes by editing the width:240px;height:200px; part. It's pretty obvious that width stands for the width of the box, and height... I think you can figure this one out. But I do NOT recommend changing their widths, since they were chosen to have the best look on both 1080p and 768p resolutions, but you can set them up to 290px.

3. You can change the boxes' content by writing whatever you want on the space between <div class="box-side" style="width:240px;height:200px;"> and </div>. Remember that you will need to edit things like text and image centering by yourself. You should also remember to always respect the box sizes that you've defined.

4. For the "Contact Me" section, the customization process is a lot easier. Just look for <h3>CONTACT ME</h3> (on index.hbs and post.hbs) and change whatever you want there. You can change "CONTACT ME" to whatever title you want and and the links to whatever you want too - just change the link on href="{{@blog.url}} to href="your_link_here" and Link 1, 2 3... to the text you want these links to have.

5. Remember to edit BOTH of the files (index.hbs and post.hbs).

6. If you're completely lost, I recommend checking out some tutorials. You can also contact me (check my GitHub bio).

##How to add Disqus comments

Open the post.hbs file, look for <!--Nihilanth Disqus configuration-->. Replace the EXAMPLE link with your forum's link, as it says in the comments.

If you have any questions about how to do this, check out Disqus instructions.

##Changing Syntax Highlighting

Nihilanth features syntax highlighting (yay)! But you might want to change the highlighting style, and doing this is very easy:

Open your default.hbs file and look for {{!Code Highlighting (highlight.js)}}. Then follow the instructions on the comments and you're done!

##Credits

This theme was heavily inspired by Jeff Atwood's Coding Horror, so thank him for the awesome style! I've also used this theme as a "guide" for creating my sidebar. So, I'd like to thank Jeff Atwood and Gergely Orosz!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.