Welcome to Casper WP!

logo

You’re live! Nice. :) This is the Casper WP theme, a port of the gorgeous default theme from the Ghost blogging platform. This is a short demonstration of the features. This blog post was written in Markdown, the language used by Ghost, and uses the Jetpack Markdown plugin for parsing (for demonstration, not required).

Getting Started

Ghost uses something called Markdown for writing. Essentially, it’s a shorthand way to manage your post formatting as you write! Writing in Markdown is really easy. In the left hand panel of Ghost, you simply write as you normally would. Where appropriate, you can use shortcuts to style your content. For example, a list:

  • Item number one
  • Item number two
  • A nested item
  • A final item

or with numbers!

  1. Remember to buy some milk
  2. Drink the milk
  3. Tweet that I remembered to buy the milk, and drank it

Links

Want to link to a source? No problem. If you paste in url, like http://ghost.org – it’ll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here’s a link to the Ghost website. Neat.

What about Images?

Images work too! Already know the URL of the image you want to include in your article? Simply paste it in like this to make it show up: The Ghost Logo Not sure which image you want to use yet? That’s ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and drag and drop the image in to upload:

Quoting

Sometimes a link isn’t enough, you want to quote someone on what they’ve said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when we introduce spellcheck! For now – it’s definitely a word.

Wisdomous – it’s definitely a word.

Ready for a Break?

Throw 3 or more dashes down on any new line and you’ve got yourself a fancy new divider. Aw yeah.


Working with Code

Got a streak of geek? We’ve got you covered there, too. You can write inline code blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there. .awesome-thing { display: block; width: 100%; }

 

Lacy Morrow

23 year old freelance professional and full-stack web and applications developer with a BS in Computer Science.

 

44 thoughts on “Welcome to Casper WP!

  1. Hey Lacy! Great work on this theme.
    Could you provide more guidance on how to get this code to display?

    [code]
    class User < ActiveRecord before_save :do_this def do_this # stuff to do end end [/code]

    1. It seems that WordPress really wants to sanitize any code you are publishing through it’s text editor. I’m trying to work out a better method but for the moment you’ll just have to guess-and-test.

  2. I love this theme. Looks good on BuddyPress too with a little tweaking.
    I just have one question, is there any way to not make the header so tall?

    1. In the CSS there is a snippet like:
      .site-head {
      position: relative;
      display: table;
      width: 100%;
      height: 60%;

      Change the height value from 60% to whatever percentage you like.

      1. I’m also trying to make the header image less deep. You say this can be done in CSS – changing the height to a lower figure. But I can’t find the CSS and assume this is because I am not paying for a premium version of Casper

        This is the only complicated thing I am trying to do. Can you help me at all?

        Many thanks

        Judy

    1. You would want to edit the style.css file. Check out the GitHub repo for information about working with the theme using grunt and LESS, or you can find an uncompressed style.css file for working on in the css folder. If you’ve never worked with CSS before, ask around or post here and I will try to find time to help.

  3. How do the menus work? If you add subelements into any of the main menu elements, only the first one shows up. Is this a bug or I am missing something?

    1. This is a bug, currently sub-menus do not work. This has been brought to my attention via github, I should have time to resolve it in a week or so. Thanks for your support!

  4. Is it possible to make images in the header fixed, I’ve tried to do it myself but it seems to change the size of the image.

    1. Hmm, that’s no good, could you open a ticket at github.com/lacymorrow/casper/issues and give me more info about the problem? What kind of videos, how were you embedding them, is there a url to see the issue live?

      Cheers!

  5. Hi Lacy,

    I have been trying to build a site for sometime and casper theme works pretty well.

    So I want to reduce the tallness of the black header by half or so, so that more text shows up when someone opens the site.

    Could you please help me with this?

    Thanks so much.

    1. Taking cue from one of your comments, have tried to reduce the value of height in the to 20% and with no luck.

      .site-head {
      position: relative;
      display: table;
      width: 100%;
      height: 60%;

    1. You know, I hadn’t really thought to track casper’s progress. Since they are on different platforms the structure is quite different and would be difficult to maintain between the two. For the time being, if there is a specific feature you would like to see incorporated, go ahead and create a ticket at https://github.com/lacymorrow/casper/issues/ and I’ll look into it.

      I have to install Ghost again to see, but I have a feeling the founder of Ghost may have made a few changes to his personal theme 😉

      As alway, don’t forget to rate: http://wordpress.org/themes/casper

        1. Hmm it doesn’t seem to be an issue in Casper, for example if you refresh the page, I’ve just changed the link color for this site to red. Silly but necessary question, are you saving the options after you change them? Can you see the colors change in the theme customizer when you change link color? It should preview live.

  6. Hello! Great theme. I am pretty familiar with the CSS and have made a nice child theme … but I cannot find (1) where to make the nav menu at the top wider (seems to wrap in Firefox if there are too many menu options, (2) How to center the nav menu instead of float right. Any help you can provide is appreciated. Thanks!

    1. Hi and thank you!

      I always recommend reading https://github.com/lacymorrow/casper to learn about editing the theme, and posting in https://github.com/lacymorrow/casper/issues if you’re having problems.

      1) There’s a setting called .main-navigation>div in the css which defines a max-width. You can play around with resetting this or you may have better luck with setting .menu-main-container to position: absolute.

      2) Since the width of the menu changes depending on the items, it is difficult to center the menu. Some fancy CSS can accomplish this, if you can make it happen I would welcome a pull request, otherwise, I will eventually get around to it. Until then, you’ll have to “get it close” after you’ve decided your menu items.

      Cheers!

  7. Hello;
    My blog is on your template. I love the design! I have left some purchased templates to have it on yours!
    Any plans to add sticky post? Would be pretty useful :)
    Are there any free sliders you would recommend to use on the theme ?
    Kindest Regards
    Jarek
    Poland
    Europe

  8. How can I change the navigation menu at the top right on the main page? Currently it says “Home”, but I would like to link it back to my website.

    Thanks,

  9. I precisely desired to appreciate you once again. I do not know the things I would have made to happen in the absence of the basics documented by you directly on such topic. This has been a very frustrating circumstance in my position, but seeing the very specialised style you handled it took me to leap over gladness. I will be grateful for your help and as well , hope you find out what a powerful job that you’re accomplishing training some other people all through your web page. I’m certain you have never met any of us.

Leave a Reply

Your email address will not be published. Required fields are marked *