Adding logo to main page

[jnx-02]

Adding a publication logo on the branding page does not work. I wanted to try adding an image to this part.

Would this need code injection?

[eddiesigner]

The logo appears only in the navigation bar at the top, if you want to add it in that section you have to do the following:

1. Unzip the theme folder and open the file index.hbs with a text/code editor.

2. Find the following code:

<div class="m-hero__content" data-aos="fade-down">
    <h1 class="m-hero-title bigger">{{@site.title}}</h1>
    {{#if @site.description}}
      <p class="m-hero-description bigger">{{@site.description}}</p>
    {{/if}}
    <a href="{{@site.url}}/newsletter" class="m-button filled js-newsletter">{{t "Subscribe"}}</a>
</div>

3. Replace it with this code:

<div class="m-hero__content" data-aos="fade-down">
    {{#if @site.logo}}
      <a href="{{@site.url}}" class="m-logo your-own-class">
        <img src="{{@site.logo}}" alt="{{@site.title}}">
      </a>
    {{else}}
      <h1 class="m-hero-title bigger">{{@site.title}}</h1>
    {{/if}}
    {{#if @site.description}}
      <p class="m-hero-description bigger">{{@site.description}}</p>
    {{/if}}
    <a href="{{@site.url}}/newsletter" class="m-button filled js-newsletter">{{t "Subscribe"}}</a>
</div>

4. Save your changes, zip the theme folder and upload it again.

5. If you want to change the size of the logo or something else you can inject your styles in the Ghost Admin:

<style>
.your-own-class {
    /* Your own styles */
}
</style>