tryghost / casper

The default theme for Ghost

Casper

The default theme for Ghost. This is the latest development version of Casper! If you're just looking to download the latest release, head over to the releases page.

 

 

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full theme API documentation which explains every possible Handlebars helper and template.

The main files are:

• default.hbs - The parent template file, which includes your global header/footer
• index.hbs - The main template to generate a list of posts, usually the home page
• post.hbs - The template used to render individual posts
• page.hbs - Used for individual pages
• tag.hbs - Used for tag archives, eg. "all posts tagged with news"
• author.hbs - Used for author archives, eg. "all posts written by Jamie"

One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:

• page-about.hbs - Custom template for an /about/ page
• tag-news.hbs - Custom template for /tag/news/ archive
• author-ali.hbs - Custom template for /author/ali/ archive

Development

Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:

# install dependencies
yarn install

# run development server
yarn dev

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

# create .zip file
yarn zip

PostCSS Features Used

• Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
• Color Mod

SVG Icons

Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs - use {{> "icons/rss"}}.

You can add your own SVG icons in the same manner.

Copyright & License

Copyright (c) 2013-2023 Ghost Foundation - Released under the MIT license.

casper's Issues

Search Engine Friendly Microdata ?

Should add microdata properties on the elements to make it friendly for the search engines.

Images does not "center" on some mobile devices

On mobile devices, embedded images in blog posts may not be "centered", like they do on desktop PC/Mac browsers.

Here's a screenshot of the "image center" issue.

What is shown on my desktop PC:

What is shown on my smartphone (Nexus 4):

Add Social Media tags

Right now Casper doesn't seem to have any tags that let social media sites such as Facebook or Twitter easily parse the content for their previews; thus sharing Ghost articles requires manual work to provide as much information as possible at a glance. (See this forum post for a user reporting problems with Facebook sharing and pre-filled information)

Implementation of these tags would improve sharing and encourage theme developers to include them as well.

Information on various tags:
Open Graph Protocol (Facebook)
Twitter Cards

There is no role="pagination" in ARIA 1.0

This line has role="pagination" for

https://github.com/TryGhost/Casper/blob/master/index.hbs#L37

Output is incorrect, gives error in W3C validation of homepage.

You can change it to role="navigation"

http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element

Update jquery.fitvids.js

The currently used version of fitvids can break layouts in Chrome 33.

See: davatron5000/FitVids.js#159

iPhone Emoji Girl

Not sure if this is an issue but when running Casper 1.0.0 and you're in a post there is a link to 'Home' but there is also an emoji to the left of this. I did take a screenshot but can't seem to attach it from my iPhone.

Casper should use published_at instead of created_at in output

Replace all instances of created_at with published_at

Use asset helper to generate correct paths for assets

This is a follow up on TryGhost/Ghost#1577 to make Casper ready for sub directory support.

Assets like CSS/JS should use the asset helper to generate correct paths.

Droid Sans font does not support all languages

First of all, I wanted to say that I absolutely love Ghost, it is swesome! I also really like Casper theme, but it uses Droid Serif font, which does not support all the letters in my language (e.g, ā, ē, ī). I replaced it with Noto Serif, which is very similar, but I wanted to address this issue, because Casper is the default theme.

certain links do not respect subdomains

<a class="blog-logo" href="{{@blog.url}}"> doesn't include the subdomain, if the blog is hosted on a subdomain

Should this be href='/'? I notice in index.hbs that the URLs are absolute from /

Same behaviour appears in the footer

Live example: http://blog.echoplex.us/2014/01/25/firefox-applications-are-easy/

Better support for full-bleed responsive images

It would be nice if large images could break outside the width of the post content, but small images stayed centered, and all images went full-bleed on smaller screens. BUT CAN IT BE DONE?

Overflowing shadow in Firefox

Reported by Sven Seebek

Bug: If a Tag is Really Long, the Title CSS is Messed Up

Originally raised as TryGhost/Ghost#3668 by @dbalders

---

Issue Summary

If you have a really long tag, the whole header is messed up and bleeds in with the rss feed making it un-clickable.

Steps to Reproduce

1. Create a really long tag on a post
2. Go to that tag's page

Technical details:

• Ghost Version: 0.5.0-rc2
• Client OS: Mac 10.9
• Server OS: Mac 10.9
• Browser: Chrome
• Database: SQLite
• Local

http: missing in casper's default.hbs

Line 18,

Header renders differently on posts and pages

Found by @AJ-Acevedo

The Ghost text in the header with the class blog-logo looks different on a post page than it does on a static page.

The header of static pages look like this:

The header of post page looks like this:

Mac OS X 10.9.1
node 0.10.24
ruby 2.0.0p353
Sass 3.2.12
Dev Mode
DB: SQLite

Link and link icon get separated with long URL

Originally reported by @andyboutte here: TryGhost/Ghost#3514

---

Summary of Issue

With a long Website the link and link icon fall on separate lines

Steps to reproduce

• go to http://127.0.0.1:2368/ghost/settings/users/
• fill in a long URL for website
• go to some post

Observed result

The link icon stays on the line with the Location but the URL falls to the next line

Desired result

The link and the link icon should stay together

Additional Information

Client OS: Mac OS X 10.9.4
Server OS: Mac OS X 10.9.4
Node Version: v0.10.21
Ghost Build Number: 0.5.0 rc1
Latest Commit:
Ghost Database: SQLite3
Browser: Chrome 36.0.1985.125

Can't read header text on light background images

From an email;

There is just one thing though, if I uploaded a picture for the Cover with a lot of white color, the blog title and description can't be read. I advice it is best if both the title and description have tiny shadows on them.

Email Warning Message Hides Edit and Settings Icons Iphone5

I think the responsive theme hides edit/settings when displaying a warning message on the iPhone5 when holding the phone in portrait mode.

Clean up facebook share

When you try to share a post on facebook and your blog is using the the Casper theme, the result is the below. I think with a few meta tags we could clean that up real nice.

Bug: Go back to home page

When you are on tags template and dont have a {{blog.logo}} you cant go back to home page, because the {{blog.title}} doesn`t have a link on it.

Date wrapping to multiple lines

I believe this can be fixed with .post-meta {display:inline} rather than inline-block. Needs testing

invisible text

very weird but sometimes text becomes invisible... when i inspect elements and change some style causing browser to redraw then it appears. still many people end up seeing blank page when they visit 😿

Images break out on refresh rather than load

This was originally raised on Ghost.

In 0efa582 @JohnONolan added a new feature to Casper, where images break out and become wider than the text.

However, that only seems to be happening on refresh, or second load, it never happens the first time. I have reproduced this on Firefox, so it doesn't seem to be part of the same issue as the big-font rendering issue which happens in Chrome/Safari?

For an example, visit hannah.wf and click on 'Spring Reflections'. Here it is in gif form:

It breaks out after I hit Cmd + R.

Height of blog cover is smaller on page 2 vs. on the homepage

The height of blog cover is smaller on page 2, etc. compared to the homepage.

Screenshot of blog cover on homepage (in the latest Firefox):

Screenshot of blog cover on page 2:

You can see a "live" version of this bug on my blog here. Please note that I tweaked the capser theme so that the blog cover height is 38% instead of 60%, but I checked and this does not affect the bug in any way.

Upon further investigation, I have found that on blog homepage, the html source contains:

<body class="home-template">

But on page 2, page 3, etc., the html source contains this instead:

<body class="archive-template">

If you look in "content/themes/casper/assets/css/screen.css", search for "archive-template" yields the following:

.archive-template .site-head {
    height: auto; 
    padding-bottom: 5rem;
}

Note that the height is "auto". If you look at the main theme section, however, you will see:

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

And you see the height is "60%" here. This explains why the blog cover is much less in height on page 2. Is this "by design"? Or is the "archive-template" incorrectly used on page 2, etc.?

Thank you for looking into this.

Sexier typography for posts

Currently the typography on posts could use some love.

• Headings are not clearly relating to their correct content (closer to the paragraph above or simply sitting in the middle with no clear relation)
• Line-height could use some adjusting, perhaps with a baseline grid to make sure a reading experience isn't tiring

Some helpful posts to better the typography overall beyond just the above:
Grids from typography
Between the lines
Fluid Type

Post Title must be URL-encoded

On file post.hbs the title variable passed to http://twitter.com/share must be URL-encoded otherwise a # character will truncate the string.

For example try to create a post with title "Foo #bar".

Bug: "400 not found" error on page 2

My blog has two pages. When I navigate to the second page I see an error in the console that the request to http://local.tryghost.org/page/2/assets/js/index.js returned "400 not found".

Helper name changes

As per TryGhost/Ghost#381

{{paginate}} => {{pagination}}

{{dateFormat}} => {{date}}

Needs to be done on Casper else master is broke :)

Inline code / <kbd> blocks look a little weird

In my opinion ;)

Standard code blocks look really nice.

Problem with the asset path

I downloaded the repo directly and made some changes on the post.hbs. After the compressed zip file is uploaded, the rendered page shows an error for the asset path of CSS/JS files:

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />

=>

<link rel="stylesheet" type="text/css" href="&lt;link rel=" stylesheet"="">

Update Casper Date to be Dynamic

@TryGhost You could add {{date format="YYYY"}} to the bottom of the default.hbs theme file. This will keep the year up to date.

https://twitter.com/eclarian/status/390935095218929664

Author formatting incorrect

Please see screenshot.

Ensure that the data used on the frontend comes from the backend

I think this is pretty much done, but needs double checking after #112 - make sure that the title, description, and any other data used to render the frontend is definitely what is expected

Embedded Gists Styling

Someone on twitter has reported that the styles of embedded gists look a little wonky.

You can include this tag in a post to test it out for yourself.

<script src="https://gist.github.com/jgable/6598091.js"></script>

Really long post title does not display correctly

From @aboutte:

Summary of Issue

Really long post title does not display correctly
  

Steps to reproduce

• crate a new post

• Title it: "a REALLY LOOOooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo title!"
    
  Observed result

Desired result

Smaller font size?

Additional Information

Client OS: Mac OS X 10.8.4
Server OS: CentOS 6
Node Version: 0.10.16
Ghost Build Number: 0.2.1
Latest Commit: e765af4
Browser: Chrome 28.0.1500.95

Feature should be first post

Casper was never intended to have the concept of featured posts, but the first post on the homepage should always be displayed in full.

At the moment we have 2 different templates (partials) for displaying a post, the list one you see on the homepage, and the the "feature" one which you see when you click through to a post

As per http://john.onolan.org/, it was intended that the first post on the home page would be displayed in full.

Originally, I interpreted this as a post marked as a feature. But this is incorrect. Rather, it should just be the very first post in the list.

• - Remove the concept of features, including renaming the feature template to something else
• - Always display the first post on the homepage in full, using what is currently the "feature" partial template.

Add author website to Casper

Casper does not make any use of author.website - it probably could/should

Pagination

Use the pagination helper from TryGhost/Ghost#196 along with the additional work to wire it up in TryGhost/Ghost#197 to output working pagination on the homepage, and subsequent pages of posts.

Add "tag.hbs" and "package.json"

I thought it might be helpful if I add in a "tag.hbs" file and a "package.json".

I've just styled the tag archive page to look much like the single post page.

I've also set the version number to 0.2.0 but I'm not sure if that's correct?

Will submit a pull request shortly.

The user location in small size screen is ugly! See the image!

After setting user location, it is ugly in small size screen such as iphone. You can just resize your browser to test. I think the location shoud be in the middle of the line which will be better. See the image!

Then I dig into the css code, at line 687 of the assets/css/screen.css, I found the code below:

.author-meta li {
    float: left;
    margin-left: 10px; /* space to the left of the bullet */
}

After I detele float: left, everything is ok. I wonder anyone has the same feeling.

Settings naming

Related to #11

I actually meant to raise a naming issue about this - potentially better as "blog" rather than "settings" ? as in blog.title or blog.logo or blog.globalthingrelatingtotheblog

Rename "settings" to "blog". We may have other types of setting exposed to the frontend soon.

default.hbs meta tag is invalid

On line 5:
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />

should be:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Add cyrillic support

Droid Serif doesn't support cyrillic, may be need to replace this font?

Links outside posts aren't obvious

I have to think about which items on the page might be links. They might be more noticeable on better monitors, but it makes for bad UX for everyone else.

[Change Request] Stop using Google Font API.

Casper is currently using the Google Font API in order to retrieve fonts. Due to the fact that these fonts are hosted on Google's servers, this presents a privacy risk to all viewers of blogs that use this theme and could cause additional downtime.

The fonts in question, Open Sans and Noto Serif, are both under the Apache License version 2.0 meaning that it would be acceptable to include them with Casper.

Error in CSS syntax

Ghost v0.3.2

screen.css

321 line. not correct hierarchy:
table.plain {
tbody > tr:nth-child(odd) > td,
tbody > tr:nth-child(odd) > th {
background: transparent;
}
}

and 414 line. Invalid value:
break-word

Background color is not set

I just got this comment on my blog using Ghost 0.3.3-azure.

"Your blog's theme is not dark-background-friendly at all. Apparently the text is defined as gray, but the background is not defined. My default background is gray so it looks... not great!"

This seems to cause some issue on Firefox where you can set the preferred background color to e.g. dark. Probably other browsers have the same features too.

Fixup un-scoped IDs

Any id's such as #ghost need to be removed or scoped to the part of the page they apply to

In post.hbs section "share" is being blocked by "Adblock Plus" while it's not an advertisement.

https://github.com/TryGhost/Casper/blob/master/post.hbs#L42

See if you can do something.

https://ghost.org/forum/installation/4063-why-share-this-post-is-not-working-on-my-blog/3/

Hide away anything which doesn't work in Casper

Casper currently has quite a few bits and pieces in it which don't work, these should be removed so that deployed blogs don't look weird or act broken.

Please hide (comment out) the following, and anything else you can find

• - Post footer content
• - Picture of John