Change destination of logo link

Support
1

I’ve got a site where a bunch of groups have their own categories, and there is a desire to have these categories branded with the group owner’s logo.

For each category there is code like

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

The trick is that when you click the logo, you’re taken to the site home rather than the category. This is (mostly) solved by the following:

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // don't navigate to base url
    event.preventDefault();
    
    // get category active from div id
    div = $("body[class*='category-']")[0];

    // extract slug from class that startswith category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // set the href to be the slug url
    document.location = "/c/" + slug + "/";
  })
});
</script>

If you click on the logo on either a category or topic page, you go to the category page. Hooray!

BUT if you click in the tiny space between the logo and the bottom of that header, you go to the home page rather than the category page. It’s pretty much impossible to distinguish when you’ll get which action. When you mouse over the URL at the bottom of Chrome has the site home page rather than the category URL regardless of where you’re going to go.

(I used Custom Header Links to add a link to the home page. I don’t believe that it has anything to do with the above behavior.)

And I can’t share the site because the per-unit categories are visible only to group members.

1 Like
2

I think what’s happening is that you’re clicking on a little sliver of the link that contains #site-text-logo?

The structure is: div.title a #site-text-logo and you’re catching clicks on #site-text-logo specifically, but not the a that it’s wrapped in)

You can probably event.preventDefault(); the .title a link within your JS, or possibly try .title a {pointer-events: none;} in the CSS?

2 Likes
3

You rock. I totally appreciate it. Get me to solve a duplicate key in postgres, sure, but the only the simplest CSS makes sense and I only barely even understand the syntax of javascript.

BUT Wait.

On a completely unrelated note, I just made it so on my wife’s Kanban site clicking the site logo goes to the TODO category. I made theme component that allows setting the home page to an arbitrary URL. I did it like this:

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

Maybe I should just do something like that instead? Though I’m not sure how to know which categories want their home page remapped. Maybe a site setting with an array of category IDs? I think I can google my way through getting the current category and seeing if that ID is in an array in a site setting.

EDIT: Hmm, but I can’t tell how in a <script type="text/javascript"> to tell what the category of the current . . . page? . . . is to selectively change the setDefaultHomepage.

Does that seem easier?

But back to the original solution

I think that sounds right to me, but that doesn’t mean much.

I think it’s that somehow the<h1> does the Right Thing, but that the <a> is going to the site home?

I’m just a caveman. I don’t quite know what that means. There’s some stuff that seems a lot like that in the javascript already. Would I make a whole-nuther one of those $(document).ready(function() { things? or add just another $(".title #site-text-logo").click(function(event){ in there somehow?

The thing I tried didn’t seem to do anything different.

I sort of understood this one better and did this:

/* keep tiny bit near logo from linking to home page */
.title a {pointer-events: none;}

This one changed something! And I see that it worked because now none of the logo will do anything.

1 Like