How do I change things like basic colours?


#1

Hi there!

I am trying Ghost Pro (hosted by Ghost) and the Casper theme. How do I change basic stuff like the colours across the site?

I’m coming from WordPress and expected it to be as easy. Oops!

Also, I want to remove the Ghost link in the footer. Do I have to download the theme, remove the link in the default.hbs file and then reupload it? Surely not…?!!

Any help would be amazing.

Thanks!

Jayke :blush:


#2

@schnooks You should be able to change most colours using the code injection. What specific elements do you have in mind?

To remove the attribution, you could put something like this in the site-wide code injection pane:

<style>
.site-footer-nav a[href="https://ghost.org"] {
  display: none;
}
</style>

#3

Thanks, @curiositry

That’s really cool of you to help our like that.

I was thinking the Injection pane was header and footer scripts only. Shall I add CSS in the header to change stuff like the link colours? I guess I can find the code using Firebug.

I have a few other questions if you don’t mind:

  • I note a lot of themes (been looking at the Ghost marketplace) don’t show recent posts (in a way WordPress would, for example) which makes it hard to find content. I guess Ghost relies on the Search and Tags functions to do find posts?

  • Is there a function in Ghost Pro’s hosting to create a staging site which can be worked on and then pushed to the live site when ready? I use Flywheel currently for my WordPress sites and they use Stagjng so I’m used to that. Maybe I’m spoilt!

  • I note a lot of themes just cut off the excerpts or use […], which looks a bit naff. Is it easy to add in something else like [more >]?

Sorry for the questions but I figured I’d ask. I hope you don’t mind.

Thanks again.

Jayke :slight_smile:


#4

You’re welcome Jayke. The site-wide code injection (the first pane) is where I would put little CSS tweaks. This gets injected into the head of very page, and will stay there even if you update the theme.

Regarding your other questions:

  1. Can you clarify? As far as I’m aware, although they may not have a ‘recent posts’ sidebar, most Ghost themes display posts on the homepage in chronological order, with most recent posts at the top. (With masonry layouts and low-key post date styles, the chronology is sometimes less clear than it is in a more traditional blog layout, of course.)

  2. I self-host, so I don’t know much about Ghost Pro, but I don’t think Ghost’s hosting offers a staging site. The Ghost @staff might know better. It wouldn’t quite be the same, but you can always export your content and import it to a local Ghost install to test theme changes, and use post previews on the live site to make sure you got the formatting on your posts right before you hit publish.

  3. None of *cough* my themes *cough* do that. But if you want to get something like that in Casper, the lazy way would be to put something like this in the code injection:

    .post-card-excerpt p::after {
      content: " … read more »";
      color: grey;
    }
    

#5

Hi @curiositry. Thanks again!

Re 1), I get that posts display chronologically (all good) but in addition to that I would like a list (for example - as per the Recent Posts widget function common to WP) of my recent posts, so that a user can quickly scroll a sidebar or a dedicated ‘list of posts’ page (for example), to see what I have been writing about.

Case in point, I spent days writing a 2000+ word blog post and want new users to my blog to see that weeks and months from now. I don’t want to make it featured/sticky, as I have other equally important posts - they all are equally important, hence I don’t want to have to rely on the user scrolling posts to find something, which would take ages (or searching, because they won’t know what they are searching for - this is a ‘user having a browse’ scenario).

Does that make sense?

If I look at the great theme Laminim (!) for example, I would be interested in glancing a list to see what posts have been uploaded and when. As it stands, I would have to scroll through the blog pages and wouldn’t want to do that as it is way too time consuming.

On a separate note, I am baffled as to why Ghost don’t include Instagram and other key social platforms in their Casper theme. Is Instagram available in other themes as a header, or does Ghost have something against anything other than Facebook and Twitter?!

Thanks!

Jayke


#6

Ah, I see what you mean.

It’s true: most Ghost themes seem to either list the posts as you would in a recent post widget as the homepage view (Crisp and Weblog come time mind as examples of Ghost themes that don’t have excerpts or images on the homepage) or else have some kind of teaser for each post. There aren’t many that have teasers for each post and a recent posts widget. Futura and WildBird are the two that come time mind with this kind of layout.

However, if you wanted to add either a “recent posts” widget or an archive page to the theme that didn’t have it by default, you could use something like this:

<section>
  <h2>Recent Posts</h2>
  <ol>
     {{#foreach posts limit="10"}}
       <li>
         <a href="{{url}}">{{title}}</a>
       </li>
    {{/foreach}}
  </ol>
</section>

This is just an example off the top of my head. I don’t have a Ghost dev environment running on this machine, so I haven’t tested it.

Hope this helps :+1:


#7

Thanks so much!


#8

See Additional social accounts in general settings

As you can see, there are lots of different social media accounts people want. From what I see, it’s not feasible to add every single one (from a UI/X perspective). I guess it’s not that Ghost hates everything else, it’s just not a simple problem to solve!


#9

Yes, fair point. Keeping it simple. Although Instagram is the most popular platform out there. Still, it is what it is.


#10

There are some themes that include an Instagram feed in a sidebar (requires theme file editing), for example Nubia:

Others include more social media icons (but you need to change the theme files to link it to your account). Se the footer on one of my blogs: