Full Width Text as Logo?

ux
1

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;">ＡＷＥＳＯＭＥ <span>
    <span id="outp">ＬＯＦＴＳ</</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;">ＡＷＥＳＯＭＥ </span>
            <span id="outp">ＬＯＦＴＳ</span>
        </p>`
    }

How would I do this?

1 Like
2

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

image
image1239×355 21 KB

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

5 Likes
3

Thanks

I’m able to get text, however I’m not aware of a CSS way of changing text to “ｆｕｌｌ ｗｉｄｔｈ”, because “ｆｕｌｌ ｗｉｄｔｈ” is not a font, rather they are different characters.

4

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

5

Well, you need only to copy/paste “ｆｕｌｌ ｗｉｄｔｈ” in the site setting “title”…

4 Likes