Code injection - remove post date and reading time

Developer help
1
  • What version of Ghost are you using? Last version of Ghost with Casper theme, selfhosted with docker on a Synology NAS (and the domain is behind SWAG reverse proxy running on a raspberry pi, if it matters ;-)

Hi, I’m new to Ghost, but have already use some code injection to hide the author (I’m the only one on this website) and the Subscribe button on the header, using this injected code :

<style>
    a.gh-head-button {
        display: none;
    }
</style>
<style>
.author-list,
.author-name,
.post-card-byline-content span:first-of-type {
    display: none;
}
.post-card-byline-content {
    margin-left: 0;
}
</style>

Is there a similar way to also hide the post date, and the reading time text (everywhere on the website, home, post, pages…).

Thanks for your help.

2

Hi, no one to give me a tip ?
I’ve looked in the doc, without success…
I’ve tried .post-time, .publishedAt, .post-meta time etc. and every sort of keyword I’ve seen in the source code or elsewhere. I’me sure I just have to found the right “label”, but as I’m not a developper, I don’t know where to look (I’ve past a few hours looking in the github source file, but same failure).

Please, a nice guy/girl to help me ? :slight_smile: Best regards.

3

Below CSS works for me.
I have not updated Casper for a long time, so if the classes changed recently, this CSS may not catch those sections you are looking to hide

<style>
.post-card-byline-date{
    display:  none;
 }
.byline-meta-content {
	display:  none;
}
</style>
1 Like
4

Hi kose_mark,
Thank you, it works perfectly.
Best regards, Eric

5

This also works for Edge theme:

<style>
.post-caption-meta-date {
        display: none;
}
</style>
1 Like
6

This works for Basho:

<style>
.post-meta-content{
    display:  none;
 }
.post-item-author {
	display:  none;
}
</style>

Basically, if you ‘inspect’ the elements you want to hide, you can grab the ‘meta’ and the ‘author’ parts from there - then just swap out as needed

1 Like
7

Thanks for explaining how you found the CSS class to hide, because that method will work for any theme.

1 Like
8

Just to add a couple of things I found useful;

If you only want to hide things on individual pages or posts, then paste your code into the “header” on the admin panel (where you set your url, meta data etc) for that page/post

If you want to do sitewide, paste the code on the global code injection (main admin panel)

Also…you can add additional items to the code…just repeat the same format. I found this really useful, as it saves messing about with .hbs files and way less potential to break stuff.

Also, if you decide later on you want to reinstate the “original” setup, all you need to do is remove the code you pasted into the header / code injection

11

Was having a hard time finding code injection that removed all author information site-wide for Casper theme (name, avatar, publish date), but after inspecting the theme’s code and finding some suggestions that worked partially, I was able to frankenstein a few things together and got it to work. I also included my process at the very bottom in case the code below doesn’t work with other themes. Hopefully it’s helpful to someone digging around for answers like I was.

Cheers,
Ruby

Go to settings → code injection → paste into site header

<style>
.article-byline, /* removes date */
.author-list, /* removes author avatar */
.author-name, /* removes author name */
    .post-card-byline-content span:first-of-type {
    display: none;
    }
    .post-card-byline-content {
    margin-left: 0;
    }
</style>

Process

I found suggestions in a few other threads that hid the author name and avatar, but unfortunately didn’t remove the publish date. (below)

(only removes author avatar + name)

<style>
.author-list, /* removes author avatar */
.author-name, /* removes author name */
.post-card-byline-content span:first-of-type {
display: none;
}
.post-card-byline-content {
margin-left: 0;
}
</style>

After confirming that the code injection removed the author name and avatar, I inspected the theme (using Chrome, go to a published page, right click and selected Inspect) to find what code the publish date was attached to.

I located the code that successfully hid the author name

<h4 class=“author-name”>

then I hovered over each bit of code until the publish date on the page was highlighted. I went to the top-most piece of code for the publish date

<divided class=“article-byline”>

and kinda just figured I’d try and apply the same logic from the author code to the publish date to see if it worked and it did. Not sure if I was just lucky but hopefully this helps someone else!