How To: Post Tracker with logo

Since I can’t post in any of the appropiate categories, I try my luck here.

This tutorial shows you how to achieve a custom logo and text for the tracker.

Note: You can achieve the same without logo and a custom name in the group settings!

However in our case we will customize both icon and title to a custom one.

Requirements:

  • CSS and JS knowledge
  • SVGs

Let’s start:
First off we create a group, name it as you wish. Later on the Name is important. In my case it is “Employee”
.

Now we move onto the JS part.

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

      I18n.translations.en.js.filters.employee = { title: "Employee Tracker", help: "topics made by employees"};

      Discourse.NavItem.reopenClass({
        buildList : function(category, args) {
          var list = this._super(category, args);
             list.push(Discourse.ExternalNavItem.create({href: '/g/Employee/activity/', name: 'employee'}));
          return list;
        }
      });

Notice the href tag in the ExternalNavItem? It is important for the CSS as it have to MATCH. The following JS code will add the item to the navigation bar. Yet without logo.

The CSS is much simpler

    li.ember-view>a[href="/g/Employee/activity/"]{
        
        &:before{
            content: "";
            background-repeat: no-repeat;
            background-image: url(https://cdn.pixelcatproductions.net/f/p/3d7734e603f0dddb7fd7176c44a5ccdf460f18074d1b22b889de4e39fcf1f72191e31b12f7a837b8dab850620f0ae1c66179/LogoOnly.svg);
            width: 26px;
            height: 20px;
            margin-right: 4px;
            display: inline-block;
        }   
    }

Now you’ll see why you need the href tag, else the browser wont recognize which navbar item to target.

For customization edit the translation line and the background-image tag

1 Like