Attempting to follow the "how to add social networks" but don't have referenced .hbs files

josephjwilk · June 26, 2021, 1:07am

Hi all,

I have a Droplet on DigitalOcean currently running Ghost 4.8.3 with Casper 4.0.5 installed as the theme. I am attempting to follow the How to add social networks to your Ghost site tutorial in the developer docs (so that I can add additional social icons to the navigation bar), but I am running into a major issue—namely, that there is no site-nav.hbs partial in the downloaded Casper theme directory.

I’m relatively new to Ghost after being a recreational Wordpress user for years. I’ve enjoyed how streamlined it is in comparison (and the integrated sign-up opportunities for readers is great), but the social media link limitations have really left me scratching my head.

If anybody can help direct me to an updated tutorial, I would be very grateful! So far, everyone on this forum has been really kind and patient, and I really appreciate it.

Kind regards,
Joseph

brightthemes · June 26, 2021, 2:45pm

Hi @josephjwilk,

In the latest version of Casper that file doesn’t exist and the {{navigation type="secondary"}} is added directly in the default.hbs (footer section).

Here is the link to the code:

github.com

TryGhost/Casper/blob/main/default.hbs#L73


      
                                  <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
                              {{/unless}}
                          </div>
                      {{/unless}}
                  </div>
              </div>
          </header>
          
          
<div class="site-content">
              {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
              {{{body}}}
          </div>
          
          
{{!-- The global footer at the very bottom of the screen --}}
          <footer class="site-footer outer">
              <div class="inner">
                  <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
                  <nav class="site-footer-nav">
                      {{navigation type="secondary"}}
                  </nav>
                  <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>

josephjwilk · June 26, 2021, 5:08pm

Thank you so much, @brightthemes! It seems that to get the navigation icons in the header of the site (like they outline in the tutorial), I would then just use the {{navigation type="secondary"}} code from that tutorial in the header section of the default.hbs file.

Two (hopefully) quick clarifying questions for you:

Am I still creating a new navigation.hbs template file in the partials folder, like they do in the tutorial?
Occasionally, there will be code in the tutorial that says <figure class="kg-card kg-code-card">. Is it safe to assume that is just code for the tutorial page itself, being improperly rendered—or should I be including it in the .hbs files?

Thank you again!

brightthemes · June 26, 2021, 5:26pm

Yes, the navigation.hbs should be created in the partials folder.
That seems to be a formatting issue to me, should not be included in the .hbs file.

You’re welcome.

josephjwilk · June 26, 2021, 6:59pm

Alright, it “worked” technically, but there must be some changes in the CSS classes that scramble the formatting when copying and pasting the tutorial code. I really appreciate the help nonetheless!

Topic		Replies	Views
Instagram icon Casper Themes	1	380	February 19, 2022
Duplicated default.hbs but only footer content displaying? Themes	0	777	November 23, 2018
Casper floating-header is gone. How to replace the functionality of FB/twitter share Themes	4	873	November 7, 2020
Ghost V3 Can't create custom homepage Themes	2	1193	October 26, 2019
Modifying Signup Form in Casper Theme to add Labels Developer help	0	425	October 6, 2021

Attempting to follow the "how to add social networks" but don't have referenced .hbs files

Related topics