Both style a website and Replace an image and a link? [closed]

Question

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.sstatic.net/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.sstatic.net/jd5iY.png" alt="TeX - LaTeX">
</a>

(Note the change of both URL and image)

Answer 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.sstatic.net/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.sstatic.net/jd5iY.png");
}