0

Today we got the new design at TeX - LaTeX Stack Exchange and I'd like to change the logo of the site (the red TEX at the top left) because it has the wrong colour and does not fit the other elements.

Furthermore, I'd like it to link to https://tex.stackexchange.com/questions instead of https://tex.stackexchange.com.

I already have a script to change the background image:

// ==UserScript==
// @name        StackExchange, replace background
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    .site-header .site-header--container {
        background-image:url("https://i.stack.imgur.com/1d1sg.png") !important;
     }
` );

Can this somehow be extended to replace:

<a class="site-header--link d-flex fs-headline1 fw-bold mln6" href="https://tex.stackexchange.com">
<img src="https://cdn.sstatic.net/Sites/tex/img/logo.svg?v=406da02f2f16" alt="TeX - LaTeX">
</a>

with:

<a class="site-header--link d-flex fs-headline1 fw-bold mln6" href="https://tex.stackexchange.com/questions">
<img src="https://i.stack.imgur.com/jd5iY.png" alt="TeX - LaTeX">
</a>

(Note the change of both URL and image)

1

Several things:

  1. You run at document-start; this is good because it helps reduce annoying flicker associated with the style change. BUT...
  2. This means that the code must now wait before it can effect the HTML of the page. Use the DOMContentLoaded event, or similar, for this.
  3. The new image is considerably bigger than the old image, so you must size it with CSS to avoid busting the layout (since the page did not do this).
  4. You should also trim/size/adjust the image in an image editor -- for better and more performant results.
  5. Since the script uses GM_ functions, it must now @require jQuery, if it wishes to use it.

Putting it all together, here is a complete working script:

// ==UserScript==
// @name        StackExchange TEX, replace background and adjust logo
// @match       *://tex.stackexchange.com/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    .site-header .site-header--container {
        background-image:url("https://i.stack.imgur.com/1d1sg.png") !important;
    }
    .site-header--link > img {
        width:  137px;  /* Sizes taken from default/native logo*/
        height: 47px;
    }
` );

document.addEventListener ("DOMContentLoaded", tweakLogo);

function tweakLogo () {
    var siteLogo = $(".site-header--link");
    if (siteLogo.length === 0) {
        console.error ("TRB userscript: Site logo not found. Page structure changed?");
        return;
    }
    //- Change link
    siteLogo.attr ("href", "/questions");
    //- Change image
    siteLogo.find ("img").attr ("src", "//i.stack.imgur.com/jd5iY.png");
}
  • Thank you very much! You are again a lifesafer - this works perfectly fine! – samcarter Aug 9 '18 at 23:33
  • You're welcome; glad to help! – Brock Adams Aug 9 '18 at 23:34
  • And I'm really sorry for all my noob questions. Your explanations about the different issues are really good and I give me the good ideas about which topics to read up! – samcarter Aug 9 '18 at 23:47
  • No problem, and your questions may help others as well. (But I wonder what is up with the so-and-so who's downvoted both of your questions here.) – Brock Adams Aug 9 '18 at 23:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.