I am using the Source theme and am really struggling to add the Bluesky icon to my nav.
There is conflicting code in this forum between this post below
and the Ghost tutorial page
… which has not even got the Bluesky code in it yet … (which would help immensly if they updated it) but I’ve followed the code close enough but still not working. ;(
Can someone please clarify what’s needed because they are different and neither work on my site. I just get a rectangular box with an X through it (which is different to the X logo which does show correctly).
I watched a Buffer video on Bluesky and after that it’s a no brainer to switch from Twitter, so keen to update my site.
Question – I missed this the first time around, so am going to dig into it later. But, the final example shows the icons on the menu row, with no other menu choices. If you already have navigation set up, what happens to the rest of the menu if you add the icons to your navigation?
Well, I gave it a shot. I noticed that the “Choose your theme” was no longer part of the code generator, which turned out to be a problem for me, even though I’m not using one of the official themes.
The code references each individual channel in the CSS, but in using Inspect, I found that all my menu items use the same class name. Don’t see a way to differentiate them without doing some hard-coding in the theme itself, which I frankly don’t have time for.
Thanks to the support team for the code generator, though. It’s a helpful tool.
@BruceInLouisville , you should be able to code something like nav-{{label}} into the classes for the theme, if it isn’t already there. That should get you a set of classes you can use. :)
I’m just a little bemused as to why things like this are not built into the themes themselves, given that social is a key driver for blog traffic. Other platforms manage it.
I’m just lucky to be using the theme in the tutorial. A different story otherwise which I can appreciate. However, it’s a good learning curve and whilst it cost me some time, I’ve gained a better insight into how it works.
I can put them into the CSS without a problem. What I can’t figure out is how to tie those classes to the individual menu items. The code in navigation.hbs just walks the array of menu items (which makes perfect sense). How would I get that code to realize that THIS item in the array is the Facebook menu item, and associate it with the Facebook class?
In navigation.hbs. You need to add something like nav-{{label}} to the class for each item. (And label gets replaced with facebook or home or whatever when the page renders.)
Sorry to be so dense, but I don’t see a good way to assign additional classes to certain items without some sort of IF test going through the #foreach loop again. (And if that’s what you meant, again sorry for being so dense. )
If that’s the only way, then fine, I can do that … if I can find the time. ;-)
When Ghost renders the handlebars to HTML, it’ll loop through the menu items and replace the {{label}} in the classes for the ‘li’ with the link’s name, so you’ll get things like nav-x, nav-facebook, etc, that the css above will target.
Okay, I’ve finally got it (mostly) working. Yes, I was unaware that I could pull the {{label}} out of the nav item. If I had known that, I might have been able to figure it out myself. (If its and buts were candy and nuts …)
I had to keep playing with the style assignments, but finally got it simplified to the point that it actually applied them.
Now, the only thing I need is to get rid of the social media channel name in the menu. Right now, I’ve got the icon and the name side by side. Thoughts?
.nav-Facebook a,
.nav-YouTube a,
.nav-BlueSky a,
.nav-Threads a,
.nav-Mastodon a, { /* Get rid of the comma on this line! */
font-size: 0 !important;
}
With the comma, the entire rule is considered invalid and ignored