Local Dischorse CSS
-
That's the limitation of
content
though, isn't it?
As far as I can tell, yes. I'm far from a CSS expert though.
-
Should probably have usedOr not - just being an idiot. Remembered why I did it that way originally.div.post-info
- added that
-
@PJH can we get this in TDWTF default please?!
-
I thought the whole point of Discourse Default was that it doesn't have any fancy CSS overrides?
-
corrected. whoopsies.
i meant the default for the site.
-
Now, if only we could get this in a proper date format...
-
Interesting, I didn't know you could do this.
It's what I use for
abbr
anda
to show the title on mobile:/* Show abbr and a title contents on mobile */ abbr[title]:after { content: " [" attr(title) "]"; } .cooked a[title]:after { content: " [" attr(title) "]"; } /* Hide the quote button text */ .cooked .quote-controls a[title]:after { content: ""; }
@PJH can we get this in TDWTF default please?!
I'll look into it later.
-
@PJH can we get this in TDWTF default please?!
Seems somewhat obtuse to me. The days-ago indicator is fine*, and it avoids timezone confusion.
I vote no.
*Mostly. There's nearly no differentiation between "May, 15" and "May, 2015", and it loses a bit too much info on older threads.
-
I'm pretty happy with it within a 24 hour period:
x hours ago
is easier to read and put into context than a timestamp.For everything older than that the usefulness of relative offset becomes debatable.
-
Seems somewhat obtuse to me. The days-ago indicator is fine*, and it avoids timezone confusion.
Seems to be your own timezone in the mouseover.
To me, the current status seems fine, and the incorrect date format would annoy me greatly.
-
Interesting. Not directed specifically at you, @PleegWat, but it seems there is a certain amount of bikeshedding here too.
Jeff's work is done. He can lean back and watch us bicker into oblivion over Discourse Cosmetics.
-
Interesting. Not directed specifically at you, @PleegWat, but it seems there is a certain amount of bikeshedding here too.
The proper date format is not a bikeshedding issue, it's a matter of life and me strangling people for using the stupid ones.
-
Hmm…
-
Damn it @riking! Couldn't you just Do It Right™ instead of using silly workarounds?
-
It's not in the main branch, or whatever branch we're on now, but it's there… somewhere; whether we'll see it here or not… who knows?
-
ISO 8601 4lyfe
-
Or, to not break the topic list (see below):
div.topic-body span.relative-date:before { content: attr(title); font-size: 1rem; } div.topic-body span.relative-date { font-size: 0px; } ```</blockquote> @Onyx <a href="/t/via-quote/47600/109">said</a>:<blockquote>I'm pretty happy with it within a 24 hour period: x hours ago is easier to read and put into context than a timestamp.</blockquote> How about both?
a.post-date > span.relative-date:after {
content: " [" attr(title) "]";
}Appears to solve the topic list 'problem' by leaving them as relative: <img src="/uploads/default/original/9/7/97be15216ee7160f214b209c0064c0853329b6e9.png" width="267" height="206"> <img src="/uploads/default/original/4/f/4f2f49899cc030426713e17f46641afc4ed0b48a.png" width="243" height="228">
-
I like that.
The only problem now is that I get avatars getting lowered a lot for people who have long titles.
I admit I don't have a good solution for that, though.
Well, kinda. The date could move over above the right gutter links... Which van both sound stupid and make a modicum of sense at the same time: it's still a "button" that does stuff after all.
-
I think I'll just leave the site alone and people can use Stylish to sort it out if they want the date visible rather than as a tooltip.
-
How about both?
I tried that originally, but it looks a bit daft (IMO) after it reverts to the actual date and you end up with "14 May - May 14th, 2015 00:00:00" etc.
Leaving it out of the site CSS seems best.
-
As silly as it is:
CSS, could probably be simplified but I'm failing at it today:
.gutter { padding-top: 2em; } .row:hover > .topic-body > .topic-meta-data > .post-info > .post-date > span.relative-date:after { opacity: 1.0; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; } a.post-date > span.relative-date:after { position: absolute; content: "\1f517\a0" attr(title); margin-right: -100%; padding-left: 20px; color: #919191; font-size: 14px; opacity: 0.5; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; } a.post-date:hover > span.relative-date:after { color: #08c; opacity: 1.0; }
-
Add background color to category slugs to clearly tie the text to the color bar(s)
beta10 broke my previous version of this one. The latest working version is:
Edit: Thanks to @boomzilla, the category style has been reverted, rendering the below correction unnecessary. But let's keep it around, just in case.
/* Covers 95% of the category tags */ a.badge-wrapper.bullet { background-color: #eaeaf0; padding-left: 0; } a.badge-wrapper.bullet span.badge-category-parent-bg { height: 16px; } a.badge-wrapper.bullet span.badge-category-bg { height: 16px; } a.badge-wrapper.bullet span.badge-category { display: inline-block; margin-top: 3px; margin-right: 3px; } /* Slightly different color for the tag in the header, includes slight rounding */ div.extra-info-wrapper a.badge-wrapper.bullet { background-color: #cadce6; border-radius: 4px; }
@PJH, @boomzilla: is there an admin setting to switch the category style? That might fix it so that my previous CSS works, otherwise, this new CSS will need to replace it.
-
beta10 broke my previous version of this one
You'd think changing the "default" would mean it didn't then change every existing instance, but then again, that's Discourse.
-
@PJH, @boomzilla: is there an admin setting to switch the category style?
Not that I'm aware off. There are places where we can put custom CSS stuff in, but no other dials or whatever to spin.
-
What's that set to here?
-
You'd think changing the "default" would mean it didn't then change every existing instance, but then again, that's Discourse.
Not that I'm aware off. There are places where we can put custom CSS stuff in, but no other dials or whatever to spin.
Of course not. Why should an existing site have its style respected? The discodevs obviously know better.
Belgium asshats.
-
You can fix that with some custom CSS. Nothing more to discuss here. Topic closed.
-
And yes - that's a free text field to choose between "bar" and "bullet".
If there are other options, they're undiscoverable because it's not a dropdown.
-
And yes - that's a free text field to choose between "bar" and "bullet".If there are other options, they undiscoverable because it's not a dropdown.
-
Oh...wait...
I see it now. Didn't even try to filter. Set it to bar. It's a dropdown now.
-
Set it to bar. It's a dropdown now.
Oh... it's still a free text field over on @riking's instance
-
Ah, good! That renders my updated CSS unnecessary!
Still a that the update changed that setting.
-
Can somebody here with sufficient CSS knowledge tell @PJH a way to enable category zebra stripes without removing the blue glow that appears when you click
"X New or Unread posts. Click here"?
This still confuses me greatly and I would love to see it fixed.
Alternatively you can suggest another highlight method that does not change the background (outline/border?). I just want a way to tell what elements were reloaded.Thank you very much
Filed Under: I am now misusing this topic for almost the right thing
-
Can somebody here with sufficient CSS knowledge
I'll give it a look. It might not work the same due to how the Discodevs do it (they use inline styles and a jQuery animate to fade the glow out).
-
-
And if it's done using inline styles, the
!important
added recently would override that, wouldn't it?
-
table.topic-list tbody tr { transition: background 3s; } table.topic-list tbody tr.highlighted { background-color: rgb(209, 240, 255) !important; }
Drawback is, that also makes the tiger stripes transition when a row that was odd now becomes even. And if you put the
transition
in with the.highlighted
, it fades into blue, then jumps straight to the tiger stripe.
-
if it's done using inline styles, the !important added recently would override that
Yeah, the
!important
is to workaround a Discourse bug, and the workaround breaks the "here's what updated" highlighting.Though their "here's what updated" highlighting was likely the cause of having to do inline styles for the row colors. There probably is a way to do it with just CSS without the stripes also transitioning, but I don't know it off the top of my head.
-
Can somebody here with sufficient CSS knowledge
Here we go (also, bite me toaster, I'll reply as many times in a row as I want):
table.topic-list tbody tr td { transition: background 2s; } table.topic-list tbody tr.highlighted td { background-color: rgb(209, 240, 255); transition: background 0s; }
That gives the blue highlight when it comes in immediately, then fades it out when they remove the
.highlighed
class and doesn't have any issues with our tiger striping.Might want to play with the time on the transition. I had 3s, that seemed a bit long, so I tweaked it to 2s.
If the Discodevs want to use that, they owe me $50.
-
If the Discodevs want to use that, they owe me $50.
I think the Discodevs owe all CSS contributors in this thread a chunk of money if they choose to use any of our efforts.
-
Thank you very much.
Now if @boomzilla or @pjh could just include this in the TDWTF default so I don't have to run plugins to use a freaking website, that'd be dandy.
Filed Under: Dandy.... is good word, I guess
-
Added (TDWTF default / Widescreen):
/* fixes blue highlight when updating a topic list */ table.topic-list tbody tr td { transition: background 2s;} table.topic-list tbody tr.highlighted td { background-color: rgb(209, 240, 255); transition: background 0s;}
-
-
2 seconds seems a bit long to me, anyone else?
Filed under:
-
It does linger somewhat…
-
like the bad aftertaste of a sugar-free caffeine-free coke.
-
The problem is, the class is removed at the end of their JS animate, so it probably sits for 1½ to 2 seconds while the animate is happening, then 2 seconds for the CSS transition.
No workaround is problem free when Discourse is involved.
-
Restoring replies and reply-to context to grey:
section .embedded-posts { background: rgb(233, 233, 233); } section .embedded-posts .reply:first-child div { border-top: 0px; }
Paging @boomzilla and @PJH: do we want this back in defaults?
-
-
Restoring replies and reply-to context to grey:
section .embedded-posts { background: rgb(233, 233, 233); } section .embedded-posts .reply:first-child div { border-top: 0px; } ```</blockquote> Done. And looks like fenced code in quotes is borked now...