Full Width Text as Logo?

I want to replace the image logo with a text version, specifically a full width text version.
Here’s an HTML version.

    <span id="outp" style="font-weight: bold;">AWESOME <span>
    <span id="outp">LOFTS</</span>

I’m new to Discourse.

I’ve tried creating a new component and even inject some Javascript, however it does run on window.onload.

Here’s some example Javascript that should reproduce the goal.

    var o = document.getElementById("site-text-logo")
    if(o.outerHTML) { //if outerHTML is supported
        o.outerHTML = `<p>
            <span id="outp" style="font-weight: bold;">AWESOME </span>
            <span id="outp">LOFTS</span>

How would I do this?

1 Like

If you delete the image in the site setting logo, the text of the site setting title will appear:

Then you need to customize it with CSS and add some media queries for other devices.



I’m able to get text, however I’m not aware of a CSS way of changing text to “full width”, because “full width” is not a font, rather they are different characters.

I think it would be similar if I wanted to insert special unicode characters into the text title

Well, you need only to copy/paste “full width” in the site setting “title”…