Why the forum is called 'Community'

(Daniel Hollands) #1

Sorry for moving the conversation across to the forum, but I figured it would be a good demonstration of how /discourse post works, and help me explain within its own context.

If you take a look at the top of the site you’ll see a dark gray bar with the birmingham.io logo, and links to other network sites (such as the calendar, planet birmingham, etc…) This isn’t part of discourse, but is instead some custom html and css which I’ve injected via the admin panel. The idea is this banner was going to be present, and uniform, across the various network sites - but it didn’t really happen.

Anyway, because this is external to the main discourse system, if I was name the site birmingham.io, the second bar down (the blue one) would also say ‘birmingham.io’, which isn’t ideal:

The best solution I could come up with was to name the site ‘Community’, which solves the immediate issue of what gets shown at the top of the page, but has all the knock on effects you’ve just mentioned.

To be fair, it’s been a long time since I set this up, and discourse has seen lots of updates since, so I might be able to find a better fix - I’ll take a look.

(Alex Russell) #2

I wonder if you could inject some custom CSS that replaces “birmingham.io” with “Community” in that exact element. It appears to have an ID of site-text-logo so, as long as you are allowed to add your own CSS to the “theme” this is relatively easily done.

(Daniel Hollands) #3

That’s an interesting approach that I’d not thought of - feels similar to changing it via javascript (which just feels dirty), but I guess it’s not as bad.

I wonder how it’ll react with the fact the bar changes when you scroll down the page:

In any case, I’ll have a play - I’m guessing it would work something like this:

(Alex Russell) #4

Yeah something like that. In my quick testing I got it working like this (which does work as the header changes with scrolling, but haven’t testing it responsively):

#site-text-logo {
    /* Hide the existing text without having to use text-indent and overflow */
    color: rgba(0, 0, 0, 0) !important;
    /* For the after pseudo element, which is absolutely positioned */
    position: relative;

#site-text-logo::after {
    content: 'Community';
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;

But there are probably many ways to achieve the same thing.