Is it possible to format the font used for custom navigation links?

Support

AI-generated summary

The discussion revolves around customizing navigation links in Discourse. ron_jeremy wants to format a custom link called Slideshow differently from other navigation links. dax suggests using CSS, providing an example of how to change the font, color, and add icons.

dax helps ron_jeremy by providing a specific CSS code to add italics to the Slideshow link. The issue of the custom link not being visible on mobile devices is also discussed. dax explains that on mobile devices, the link is hidden in a dropdown menu.

tomwrench asks about specifying the style of a link when it is active, and dax provides a CSS solution.

A separate issue arises when ron_jeremy confirms that his custom link does not appear on mobile devices. dax and Mittineague discuss possible reasons, including the version of Discourse and the customization settings. dax shares his experience of adding custom links and icons that work on both desktop and mobile devices without requiring additional mobile CSS.

1

I have added a new navigation link called Slideshow by customizing the following code that I found elsewhere on this forum:

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  if(!category) {
    list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
    list.push(Discourse.ExternalNavItem.create({href: 'https://google.com', name: 'google'}));
  }
  return list;
}
});
</script>

slideshow-link.jpg636×135 13.7 KB

What I’d like to do is format Slideshow differently from the other navigation links, like maybe a different color, italics, etc. Is this possible? If so, where exactly do I make these changes?

2

Use CSS for this.


E.g.:

/* Add a fontwesome icon*/
a[href="/category/assistenza"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\f0fa";
  margin-right: 3px;
}
/*Change background only for my custom button*/
a[href="/category/assistenza"] {
    background: #0000B3 !important;
    color: #fff !important;
    border-radius: 15px;
}

You can use Google font to change characters if you want.
Or you can simply change the color (e.g red) and add a font-style (e.g italic)

color: red !important
font-style: italic !important;

So, you can do everything with CSS

In the same stylesheet where is your code, in the CSS tab.

OFF-topic:
Great avatar BTW, just finished to watch Ash Vs Evil Dead!

3

Thanks for offering to help, but I cannot get it to work.

There must be an easier way to simply add italics to the link. This is the code I am using:

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.en.js.filters.slideshow = { title: "Slideshow", help: "View homepage slideshow" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  if(!category) {
    list.push(Discourse.ExternalNavItem.create({href: 'http://www.singletrackbc.com', name: 'slideshow'}));
  }
  return list;
}
});
</script>

I also noticed that my custom link is not visible on mobile devices (whether I’m logged in or not). That kinda sucks. Is there a way to fix that?

4


Look in your Admin > Custom > Html/CSS, copy and paste this code in CSS tab

a[href="http://www.singletrackbc.com"] {
    font-style: italic;
}

On mobile device there is only one button. It is a dropdown menu, click on Latest and you will see Slideshow too.

5

That worked perfectly! Thank you very much! :grinning:

6

I’ve got a CSS question related to this which I hope is simple for you answer.

I’ve added the ‘Bookmarks’ link to the topnav and have styled it differently to stand out from ‘latest’, ‘top’ etc. However, I’m having trouble specifying the style of this link when the link is active. I.e. when the user has clicked the bookmark link. What CSS would I use to specify ‘current page’?

The code I have used so far for styling is:

a[href="/bookmarks"] {
    background: #ebebeb !important;
    color: #000 !important;
    border-radius: 0px;
    border-bottom: 0px solid !important;
}

/* mouse over link */
 a[href="/bookmarks"]:hover {
    background: #B9B9B9 !important;
    color: #fff !important;
    border-radius: 0px;
    border-bottom: 0px solid !important;
}

Many thanks.

7

I don’t know if this is the better way (but it works):

.list-controls .nav-pills .active a[href="/bookmarks"] {
    font-style: italic;
}

However you can remove those lines from CSS:

border-radius: 0px;
border-bottom: 0px solid !important;

you don’t need them (they are relative to my specific case).

8

Just confirmed that the custom link I created does not appear when viewed on my phone, only on desktop (will have to confirm tablet later today).

9

Yep, I don’t see your custom link too. But I can see mine on mobile device.
What version of Discourse are you running?

I’m on v1.6.0.beta7 +134.

10

Did you put yours under the Customize that shows when you click the “mobile device” icon above right ?

11

Can’t remember the version # but I’m on latest version as of today.

12

I put only the fontawesome icon here

a[href="/category/assistenza"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\f0fa";
  margin-right: 3px;
}

and only for the Assistance button. I add the Chat icon right now.
BTW I can see them without adding anything on mobile CSS.
(I delete all the mobile CSS in that stylesheet and I can still see the links on mobile and they are ok.)

They works on mobile only with the script that I add in body (in which tab you add the script @ron_jeremy?)

784×525 20.6 KB