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


#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?


(Daniela) #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?


(Daniela) #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:


(Tom Wrench) #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.


(Daniela) #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).


(Daniela) #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.


(Mittineague) #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.


(Daniela) #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?)