Discourse vs. Community Server

ben_lubar

What happened to breadnoseguy?

DoctorJones

@morbiuswilters said:

I still favour making our own fork called "Intercourse".

A fork of Discourse,
Intercourse of course

drurowin

I don't have a good scan of it any more.@ben_lubar said:

What happened to breadnoseguy?

Zecc

@HardwareGeek I seemed to have missed that you had already called it "this curse", sorry.

M_Adams

@morbiuswilters said:

If you really want custom CSS, that's what user stylesheets are for.

In re the post separators, if anyone cares... here's what I put into Stylish for what.thedailywtf.com:

.topic-body {
    border-top-width: 3px !important;
    border-top-color: #000000 !important;
  }

I like 'em thick and black. Discuss...

riking

New stylesheet:

a[href="#tag"] {
  background: lightgrey;
  padding: 3px;
  color: black;
  border-radius: 2px;
}
a[href="#tag"]:hover {
  color: black;
}
.topic-body {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}
.topic-avatar {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}
.gap {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}
.reply-to-tab {
  border-top: none !important;
}
.gap {
  border-top: 3px solid black !important;
  width: 832px !important;
}

Screenshot:

Filed under: stylesheet

M_Adams

@riking said:

New stylesheet:

Niiiice! It's a Stylish keeper.

error

Please don't use !important everywhere (or at all). Use specificity like CSS was designed for.

ben_lubar

User-Agent styles need !important to override webpage styles.

error

This post is deleted!

fatbull

Assigning property values, Cascading, and Inheritance

Zecc

I started making my own tweaks, although I didn't finish.
It was looking like this:

#main-outlet {
    background-color: #ddd;
}

article {
    margin-bottom: 2px;
    background-color: #F4F4F4;
}


article {
    border-top: #ccc solid 1px;
    border-right: #888 solid 1px;
    border-bottom: #888 solid 1px;
    border-left: #ccc solid 1px;
}

.topic-avatar {
    position: relative;
    margin-right: -12px;
}

.topic-avatar .avatar {
    position: relative;
    left: -12px;
    box-shadow: 2px 2px 1px #ddd;
    border-color: #ccc;
    background-color: white;
}

.topic-meta-data {
    /*background-color: #d7e3ed;*/
    border-bottom: 1px solid #ddd;
}

dhromed

You're doing God's work, son.

mott555

That looks awesome.

dkf

So… how exactly does the user override a CSS rule set by the page author via a style attribute? Or by putting it on an element with a specific ID?

If I've read the rules right (which is a big “if”; it's a W3C spec after all) then the only way for a user to override something that the page author has actually set is to use !important. Non-!important user rules can set things that the page author doesn't care about, but that's not that likely to be of much use in a major restyling of a Discourse-based site.

VinDuv

@dkf said:

So… how exactly does the user override a CSS rule set by the page author via a style attribute?

Yes, !important is needed in that case, but I think @error’s point was “Don’t abuse it”. If your stylesheet works without it, don’t put it.

@dkf said:

Or by putting it on an element with a specific ID?

I’m not completely sure, but I think something like body #id should work since it’s more specific than just #id.

Lee_Ars

@Zecc said:

I started making my own tweaks, although I didn't finish.It was looking like this:

You're sort-of kind-of approximating Discourse's original launch theme. It's tough to find it in the wild anymore, since most active Discourse sites got the current flatter Win8/O365-ish theme auto-deployed during regular upgrades, but here's one forum that's still rocking the 0.8 style. Lots more grays, with comments defined in bubbles. I like it a lot more than the flat style, but it's a pain in the ass to re-skin the whole site.

Zecc

Funny, I hadn't realized that. I suppose I can be unconsciously mimicking a style I saw somewhere once.

I'm glad you guys like it. I made a few more tweaks: changed the look of post header; fixed the avatars in expanded posts and made their shadows slightly darker; made the reply box stand up a bit more (you may have noticed I have a thing for box-shadow).

#main-outlet {
    background-color: #ddd;
}

article {
    margin-bottom: 2px;
    background-color: #F4F4F4;
}

article {
    box-shadow: inset 2px 4px 3px #ccc;
}

.topic-avatar {
    position: relative;
    margin-left: -12px;
}

.topic-avatar .avatar {
    position: relative;
    left: -12px;
    border: 1px solid #888;
    box-shadow: 2px 2px 1px #888;
    border-color: #ccc;
    background-color: white;
}
.topic-meta-data {
    background-color: #d7e3ed;
    border: 1px solid #888;
    box-shadow: 2px 3px 1px #ccc;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

#reply-control {
    box-shadow: 0px -5px 5px rgba(128,140,140,0.5);
    background-color: #D9E6F0 !important;
}

#reply-control .grippie {
    background-color: #d4e0ea !important;
}

#wmd-button-bar, .wmd-button {
    background-color: #acb6be !important;
}

.wmd-button:hover {
    background-color: #f1b423 !important;
}

I'm really enjoying the new look:

Filed under: FUCKING HELL WHY DOESN'T IT CAPTURE THE MOUSE POINTER

dkf

@VinDuv said:

Yes, !important is needed in that case, but I think @error’s point was “Don’t abuse it”. If your stylesheet works without it, don’t put it.

But you've also got the classic problem of how to keep the style working.
@VinDuv said:

I’m not completely sure, but I think something like body #id should work since it’s more specific than just #id.

I was under the impression that specificity only distinguished between styles within the same importance level, which is what !important modifies. (I may be way wrong though, and the W3C spec isn't very clear here. They are TRWTF, now and forever.)

ben_lubar

There's a white line right above my post in that picture which is bothering me.

VinDuv

@ben_lubar said:

There's a white line right above my post in that picture which is bothering me.

Fix:

.topic-body, .topic-avatar, #topic-closing-info {
	border-top: 0 !important;
}

(not sure why the code highlighter puts a #selector in bold red but does nothing for .selectors…)
@Zecc: Feel free to integrate it to your stylesheet (which is very nice BTW)

@dkf said:

I was under the impression that specificity only distinguished between styles within the same importance level, which is what !important modifies.

You’re right (I tested it while writing the above snippet — looks like my browser puts any user-defined custom CSS between its internal one and the ones provided by the page, so its priority is indeed very low…). And yes, the whole thing is a mess. Having multiple levels of priority would probably be better (although debugging priority problems would be even more frustrating…)

M_Adams

In re @ben_lubar and @dkf: exactly!

And since this is a user style. ⸘Who the hell gets to tell me what I can or can not put in it‽

Is this not exactly a subspecies of the issues here?

Filed under: Try to keep up

dkf

Of course, what we need to do is to implement a “management” mode for CSS. In management mode, everything is !important, all the time and equally, and it is up to the software to figure out what order to do things in while being under the threat of summary dismissal if it gets it wrong (even if figuring out what that means involves time-travel, clairvoyance and a ouija board).

Filed under: bringing modern office practices to modern office tools

M_Adams

I like the "management mode" idea! It's probably awful enough to even get the W3C to sign off on it :)

I tend to work under that mode most of the time... and the board members and my boss don't seem to find the "If there is no blood, there is no emergency; If there is a large amount of blood, it's cleanup and still not an emergency…" speech amusing. Especially when it was preceded much earlier by the ".…always time to do it over…" speech.

dhromed

@Zecc said:

I'm really enjoying the new look:

Fuck me that's hideous. Stop using all those dropshadows. It's like you just discovered Photoshop. Also the fugly plethora of greys, borders and hardly any padding at all. Are you a programmer? This is how programmers "design" things.

Where's the dislike button?

I haven't had enough sleep so I'm taking it out on you.

Zecc

@dhromed said:

You're doing God's work, son.

@dhromed said:

Fuck me that's hideous.

I detected a slight change of heart.
In any case, these are my tweaks. Get your own!

I see you got a trophy. Good.

@VinDuv said:

Fix

Thanks. I was having trouble finding the culprit.

dhromed

@Zecc said:

I detected a slight change of heart.

You started out good, but then you went off the deep end in a fantastic twist of style.

Zecc

@dhromed said:

You started out good, but then you went off the deep end in a fantastic twist of style.

Not so much a twist of style as going overboard with what I already had.
I was the first to admit my excessive use of shadow, but for the record it was already there in the first screenshot, albeit much more toned down.

I'm not as much designing as I'm messing about with properties seeing what comes out of it. I like the 3D look, but yes, it needs improvement.

Since then I've added border: 1px solid #444; to some elements to avoid the blurriness and increased the padding before the username a bit. I also (hopefully) improved the shadows somewhat.

It's looking like this at this time:

As for the colors, I reused colors from Discourse and CS for the most part. It lacks terribly in the contrast department, I'm aware of it. The baby blue in the reply box I copied from DC's header, and while i find it tolerable, it has got to go.

I haven't got time for this right now, but — it goes without saying — feel free to send me your feedback/insults.

flabdablet

@dkf said:

I was under the impression that specificity only distinguished between styles within the same importance level, which is what !important modifies. (I may be way wrong though, and the W3C spec isn't very clear here. They are TRWTF, now and forever.)

Absolutely. I still can't help reading "!important" as "not important".

dhromed

@Zecc said:

Since then I've added border: 1px solid #444; to some elements to avoid the blurriness and increased the padding before the username a bit. I also (hopefully) improved the shadows somewhat.

YOU MADE IT WORSE, YOU BLIND MOLE RAT.

dhromed

@Zecc said:

The baby blue in the reply box I copied from DC's header, and while i find it tolerable, it has got to go.

Yeah that's my fault.

Daniel15

@Lee_Ars said:

You're sort-of kind-of approximating Discourse's original launch theme. It's tough to find it in the wild anymore, since most active Discourse sites got the current flatter Win8/O365-ish theme auto-deployed during regular upgrades, but here's one forum that's still rocking the 0.8 style.

That looks much nicer than the current Discourse theme.

darkmatter

@Nagesh said:

With discourse we are on bleeding age of technology.

The only thing bleeding is my brain.

@Nagesh said:

Anytime you go on the bleeding age, it is bound to cause some hick-ups.

Is that what you call it when country farmer boys can dunk a basketball?

Nagesh

@darkmatter said:

The only thing bleeding is my brain.

Obvious, you're feeling weak as a result. Take break from internet. Go and spend time with your family.

WTF

WTF is this fucking discourse bullshit? Good god it's fucking painful.

Arantor

Welcome to our world.

Onyx

sam

Infinite scrolling is a barrier to complaining about Discourse ... just sayin...

Arantor

Wait wut?

Infinite scrolling is fine all the time you don't have to do it. Now I'm keeping up with posts pretty frequently, I never really see more than a page's worth (10-15) of posts behind so for me I never see it.

Until last night I tried it on an iPad 3 still running iOS 6 and I think I must have accidentally pressed the home button up top of a long thread and watched it try to dial back 30 or so posts at a time. It was painful.