# Custom Author Box in Dawn Theme?

**URL:** <https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911>\
**Category:** Themes\
**Created:** [October 15, 2023, 7:06am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911 "2023-10-15T07:06:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![christhaefner](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/christhaefner/32/26836_2.png) [@christhaefner](https://forum.ghost.org/u/christhaefner)\
**Post date:** [October 15, 2023, 7:06am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/1 "2023-10-15T07:06:52Z")

</div>

I was wondering if someone successfully added some more information about the author in the author box below each post. Currently, there is only the author image shown. No name, no bio, nothing.

 ![Bildschirm­foto 2023-10-15 um 08.59.32](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/9/5/956c556e0cdf555fb0bc6b0eeaf43ad34d6119de.png)

Since Google is using the author’s [experience as ranking factor](https://developers.google.com/search/blog/2022/12/google-raters-guidelines-e-e-a-t), I would like to add more information here to make it easier for google to identify the author.

I have tried adding [author object attributes](https://ghost.org/docs/themes/contexts/author/) myself, but design wise, it doesn’t seem to be working well for me.

So if there is anyone who can help add **name** and **bio** of the author below each post and just the name on top of each post, **without** breaking the design - feel free to reach out. I’d also be happy to pay for a good code snippet.

---

<div class="post-metadata">

**Author:** ![jannis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jannis/32/39718_2.png) [@jannis](https://forum.ghost.org/u/jannis)\
**Post date:** [October 15, 2023, 7:49am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/2 "2023-10-15T07:49:24Z")

</div>

Here you go 🙂

Desktop:

 ![CleanShot 2023-10-15 at 08.45.09@2x](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/b/0/b0fdd0de9951efadabdfb15e9f8a98853c5e5dc7.png)

And mobile:

 ![CleanShot 2023-10-15 at 08.46.28@2x](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/8/88af536d40cda7e1c038f3f15123669e119190c6.png)

The modifications:

In the `partials/content.hbs` I have modified the div with class `single-footer-middle` to this, adding the author name and bio:

```auto
        <div class="single-footer-middle">
        {{#if @custom.show_author}}
            <div class="single-footer-top">
                <h3 class="single-footer-title">Published by:</h3>
                <div class="author-list">
                    {{#foreach authors}}
                    <div class="author-image-placeholder u-placeholder square">
                        <a href="{{url}}" title="{{name}}">
                            <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                        </a>
                    </div>
                    <div class="author-meta-info">
                        <h4 class="author-name">
                            <a href="{{url}}" title="{{name}}">{{name}}</a>
                        </h4>
                        <span class="author-bio">{{bio}}</span>
                    </div>
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
        </div>

```

Additionally, I have added this CSS via a code injection directly in the Ghost settings:

```auto
        <style>
            .author-list {
                display: flex; 
                flex-direction: row; 
                justify-content: flex-start; 
                align-items: flex-start; 
                gap: 2rem; 
                padding: 0 2rem;
            }

            .author-image-placeholder.u-placeholder.square {
                width: 8rem; 
                height: 8rem;
            }

            .author-meta-info {
                flex-grow: 1;
            }

            @media (max-width: 768px) {  
                .author-list {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
            }
        </style>

```

Hope this achieves what you were looking for 🙂

---

<div class="post-metadata">

**Author:** ![christhaefner](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/christhaefner/32/26836_2.png) [@christhaefner](https://forum.ghost.org/u/christhaefner)\
**Post date:** [October 15, 2023, 11:43am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/3 "2023-10-15T11:43:10Z")

</div>

Wow! Thank you so much @jannis! Looks great, thank you so much.  
Have you also added your name above the posts as part of the meta information?

---

<div class="post-metadata">

**Author:** ![jannis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jannis/32/39718_2.png) [@jannis](https://forum.ghost.org/u/jannis)\
**Post date:** [October 15, 2023, 1:08pm UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/4 "2023-10-15T13:08:17Z")

</div>

No, seems like I missed that part in your original post.

To add the author to the meta info above the post, just extend the div with the class `single-meta` as follows:

```auto
<div class="single-meta">
        <span class="single-meta-item single-meta-date">
            <time datetime="{{date format="YYYY-MM-DD"}}">
                {{date published_at}}
            </time>
        </span>
        {{#if reading_time}}
            <span class="single-meta-item single-meta-length">
                {{reading_time}}
            </span>
        {{/if}}
        {{#primary_tag}}
            <span class="single-meta-item single-meta-tag">
                <a class="post-tag post-tag-{{slug}}" href="{{url}}">
                    {{name}}
                </a>
            </span>
        {{/primary_tag}}
        {{#if @custom.show_author}}
           {{#foreach authors}}
               <span class="single-meta-item single-meta-author">
                   <a class="post-author" href="{{url}}">
                       by {{name}}
                   </a>
               </span>
           {{/foreach}}
       {{/if}}
</div>

```

For that part you wouldn’t need any additional CSS, though you could use the `single-meta-author` class to style it however you’d like 🙂

---

<div class="post-metadata">

**Author:** ![christhaefner](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/christhaefner/32/26836_2.png) [@christhaefner](https://forum.ghost.org/u/christhaefner)\
**Post date:** [October 15, 2023, 6:13pm UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/5 "2023-10-15T18:13:34Z")

</div>

Super cool! Thanks 🙏

---

<div class="post-metadata">

**Author:** ![lizaliza](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lizaliza/32/26860_2.png) [@lizaliza](https://forum.ghost.org/u/lizaliza)\
**Post date:** [October 16, 2023, 6:05pm UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/8 "2023-10-16T18:05:42Z")

</div>

thanks you for provide authorbox its cool[.](https://whatsappapkdownload.org/delta-whatsapp/)

---

<div class="post-metadata">

**Author:** ![timucin](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@timucin](https://forum.ghost.org/u/timucin)\
**Post date:** [November 22, 2023, 12:13am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/9 "2023-11-22T00:13:54Z")

</div>

1- I tried but it’s not working. Can you send content.hbs?  
2- And another question is where do you put to css in code injection module? To site header or site footer?

---

<div class="post-metadata">

**Author:** ![jannis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jannis/32/39718_2.png) [@jannis](https://forum.ghost.org/u/jannis)\
**Post date:** [November 22, 2023, 6:02am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/10 "2023-11-22T06:02:37Z")

</div>

Here is the entire file:

```auto
<article class="single {{post_class}}">

    {{#match @page.show_title_and_feature_image}}
        <header class="single-header gh-canvas">
            {{#is "post"}}
            <div class="single-meta">
                <span class="single-meta-item single-meta-date">
                    <time datetime="{{date format="YYYY-MM-DD"}}">
                        {{date published_at}}
                    </time>
                </span>
                {{#if reading_time}}
                    <span class="single-meta-item single-meta-length">
                        {{reading_time}}
                    </span>
                {{/if}}
                {{#primary_tag}}
                    <span class="single-meta-item single-meta-tag">
                        <a class="post-tag post-tag-{{slug}}" href="{{url}}">
                            {{name}}
                        </a>
                    </span>
                {{/primary_tag}}
                {{#if @custom.show_author}}
                    {{#foreach authors}}
                        <span class="single-meta-item single-meta-author">
                            <a class="post-author" href="{{url}}">
                                by {{name}}
                            </a>
                        </span>
                    {{/foreach}}
                {{/if}}
            </div>
            {{/is}}

            <h1 class="single-title">{{title}}</h1>

            {{#if custom_excerpt}}
                <div class="single-excerpt">
                    {{custom_excerpt}}
                </div>
            {{/if}}

            {{#if feature_image}}
            {{#unless no_image}}
                <figure class="single-media kg-width-{{width}}">
                    <div class="u-placeholder horizontal">
                        <img
                            class="u-object-fit"
                            srcset="{{> srcset}}"
                            sizes="(min-width: 1200px) 920px, 92vw"
                            src="{{img_url feature_image size="l"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                        >
                    </div>

                    {{#if feature_image_caption}}
                        <figcaption>{{feature_image_caption}}</figcaption>
                    {{/if}}
                </figure>
            {{/unless}}
            {{/if}}
        </header>
    {{/match}}

    <div class="single-content gh-content gh-canvas">
        {{content}}
    </div>

    {{#is "post"}}
    <div class="gh-canvas">
    <footer class="single-footer">

        <div class="single-footer-left">
        {{#prev_post}}
            <div class="navigation navigation-previous">
                <a class="navigation-link" href="{{url}}" aria-label="Previous post">
                    {{> "icons/arrow-left"}}
                </a>
            </div>
        {{/prev_post}}
        </div>

        <div class="single-footer-middle">
        {{#if @custom.show_author}}
            <div class="single-footer-top">
                <h3 class="single-footer-title">Published by:</h3>
                <div class="author-list">
                    {{#foreach authors}}
                    <div class="author-image-placeholder u-placeholder square">
                        <a href="{{url}}" title="{{name}}">
                            <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                        </a>
                    </div>
                    <div class="author-meta-info">
                        <h4 class="author-name">
                            <a href="{{url}}" title="{{name}}">{{name}}</a>
                        </h4>
                        <span class="author-bio">{{bio}}</span>
                    </div>
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
        </div>

        <div class="single-footer-right">
        {{#next_post}}
            <div class="navigation navigation-next">
                <a class="navigation-link" href="{{url}}" aria-label="Next post">
                    {{> "icons/arrow-right"}}
                </a>
            </div>
        {{/next_post}}
        </div>

    </footer>
    </div>
    {{/is}}

</article>

```

And you put the CSS into the header of the site.

---

<div class="post-metadata">

**Author:** ![timucin](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@timucin](https://forum.ghost.org/u/timucin)\
**Post date:** [November 22, 2023, 4:10pm UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/12 "2023-11-22T16:10:42Z")

</div>

I put that code in Header via injection but it didn’t work. Which CSS?

---

<div class="post-metadata">

**Author:** ![jannis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jannis/32/39718_2.png) [@jannis](https://forum.ghost.org/u/jannis)\
**Post date:** [November 22, 2023, 4:47pm UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/13 "2023-11-22T16:47:02Z")

</div>

No. The code I posted in my last post is the content.hbs. You need to download your theme, edit the content.hbs, and re-upload it.

You put the CSS into the code injection. I posted that here:

> [@Custom Author Box in Dawn Theme?](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/2):
>
> Here you go slight_smile Desktop: And mobile: The modifications: In the partials/content.hbs I have modified the div with class single-footer-middle to this, adding the author name and bio: \<div class="single-footer-middle"\> {{#if @custom.show\_author}} \<div class="single-footer-top"\> \<h3 class="single-footer-title"\>Published by:\</h3\> \<div class="autho…

---

<div class="post-metadata">

**Author:** ![timucin](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@timucin](https://forum.ghost.org/u/timucin)\
**Post date:** [November 23, 2023, 6:27am UTC](https://forum.ghost.org/t/custom-author-box-in-dawn-theme/41911/14 "2023-11-23T06:27:11Z")

</div>

Its worked, thank you.