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

support
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>

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?

1 Like
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

764Ɨ50 3.52 KB

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.

4 Likes
5

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

1 Like
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).

2 Likes
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 ?

1 Like
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