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.

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

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>
        </p>`
    }

How would I do this?

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.

3 Likes

Thanks

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”…

4 Likes