Hacking the Logo Link

UaMV

I had need of directing a forum logo to an alternate URL (the parent site). Here's a quick script to do so. Add this to your custom footer under appearance.

<script>
(function() {
  var homeLink = document.getElementById("home-link");
  homeLink.setAttribute("href","https://…");
  homeLink.setAttribute("id","alt-home-link");
})();
</script>

HasanMerkit

UaMV after using this, site warns. Any idea? I need change logo url.

Zedd

thank you 😃

hrvoje_hr

HasanMerkit that happened to me too after upgrading to 1.2

luceos

We would need the error in the browser console. Otherwise it will be hard to trace.

HasanMerkit

luceos
Before adding script:

After:

Valeyard

That's not going to work because your script is executing before the webapp has a chance to actually render the header. You need to hook the function onto an element that changes when the app loads the page like this:

function setheaderlink(){
  let homeLink=document.getElementById("home-link");
  homeLink.setAttribute("href","https://example.com/");
  homeLink.classList.add("alt-home-link");
}
let appFlarum=document.getElementById("app"),ob=new MutationObserver(function(){setheaderlink();});
ob.observe(appFlarum,{attributes:true,attributeFilter:["class"]});

You then just put that in the footer or anywhere below the element you hooked onto (in this case the app div).

Braden

Also how can we add width and height elements for seo to look good?

Valeyard

I don't understand your question. You don't need to hack everything with Javascript though, you can use CSS in most cases.

#app.scrolled .alt-home-link a {
  width: 36px;
  height: 36px;
  background: url(/images/icon36x36.png) top left/contain no-repeat;
}

If that's what you mean? I add my own class "scrolled-title" so I have more precise control over when the scrolled CSS triggers, but if you can't code it yourself you probably are best off just using the supplied .scrolled class on the app div and going from there. If you're not careful with Javascript you'll end up introducing unwanted bugs - that's why for example I removed the homeLink.setAttribute("id","alt-home-link") because that will break the code the moment you let the app navigate into a new page, you'd have to do this...

function setheaderlink(){
  let homeLink;
  try{
    homeLink=document.getElementById("home-link");
  }
  catch{
    homeLink=document.getElementById("alt-home-link");
  }
  homeLink.setAttribute("href","https://example.com/");
  homeLink.setAttribute("id","alt-home-link");
}
let appFlarum=document.getElementById("app"),ob=new MutationObserver(function(){setheaderlink();});
ob.observe(appFlarum,{attributes:true,attributeFilter:["class"]});