Local Dischorse CSS
-
REAL Discoloading!
.spinner { border: 0; background-color: transparent; background-image: url('/uploads/default/21022/48fbe3ce94e233e6.png'); background-size: cover; }
Edit: corrected.
!important
wasn't needed.
-
I should make a version with a spinning Dreamcast logo for the Sega lovers ...
-
-
I just provided the template. Use at your own leisure. ;)
-
European version:
.spinner { border: 0; background-color: transparent; background-image: url('http://what.thedailywtf.com/images/emoji/emoji_one/cyclone.png'); background-size: cover; }
International version:
.spinner { border: 0; background-color: transparent; background-image: url('http://what.thedailywtf.com/uploads/default/21035/3b3e14c9cb0fa150.png'); background-size: cover; }
-
Is it possible to randomize which spinner image gets used?
-
In pure CSS? Nope. No variables, no functions.
In this case, unfortunately. For any seeming sanity of the web, fortunately.
A userscript could do it, of course.
-
Can you spin the page when loading?
some parent-level trickery perhaps
-
My CSS knowledge, and a bit of Googling to boot, would suggest no.
Again, JS required I'm afraid.
Fuck off Discourse, I'm answering a question, I'm making conversation. Take your damned toasters and stuff them somewhere where the sun doesn't shine, please.
-
somewhere where the sun doesn't shine
The dark side of the Moon maybe?INB4 'there is no dark side you silly hedgy'
-
Take your damned toasters and stuff them somewhere where the sun doesn't shine, please.
You know what you can do with CSS? F**k the toasters up their star-holes.
-
You know what you can do with CSS? F**k the toasters up their star-holes.
Just make sure you wear protection; don't want to get server cooties…
-
How about the basic functionality of the civilized discussion platform fixes it's shit that should be it's focus? That's what the toasters are for, yes? Promoting civilized discussion?
I'm done with fixing this shit. Now I'm just messing with it.
-
I think I have fallen in love with the Dreamcast swirlies CSS.
-
I tried to post this like a million times but the site was knackered.
.composer-popup.urgent { display: none !important; }
-
I think I have fallen in love with the Dreamcast swirlies CSS.
I'm using the European version - and yes, much improved!
-
It does make the waiting easier, doesn't it? At least because it's something DIFFERENT than that accursed spinner
Maybe we could even make it a themed thing in userscript form? As in, if you want it, install a userscript, it points to a constant URL but the image is changed... dunno weekly + special occasions? Kinda like Google startpage.
-
It's something I actually want to watch spinning around. I keep deliberately triggering it.
-
I take no responsibility for you potentially causing cooties.
-
I'm not doing it in the Likes topic, at least.
-
People mention Stylish like it's something obvious, but is that a browser extension or something else? Is there boilerplate that has to goo around what people add or can you just paste the snippets directly into Stylish, whatever that is?
ok, thanks. I should probably install it and start learning some of the basics of CSS. I don't do web dev, but at some point I'll probably have to learn...
Yes, it's an addon, like Adblock Plus. It'll put (or allow you to put) a button which has a menu. It's the [S] between ADP and Greasemonkey here:
You'll start by Write new style -> For what.thedailywtf.com... which gives you the boilerplate that you'll need:
Give it a Name
The stuff you copy/paste from here will go between the braces on lines 3 and 5 in that screenshot. Order rarely matters for implementation though you may want to group them; you can use that one for everything.
Mine looks like:
- html - Where I thought better of overriding the base font/size being used; it's commented out
- a.title - make stuff I've clicked on in New and Unread visible by turning them red
- #reply-control - make the text in the reply-box monospaced.
- article - highlight a particular user's posts
- outbound/inbound - leftovers from when I was testing re-adding the inbound/outbound arrows in the right gutter.
-
How about the basic functionality of the civilized discussion platform fixes it's shit that should be it's focus?
How about some CSS to set the toasters to display:none or something?
-
@loopback0 posted some above. Me, I'm done band aiding a gunshot wound.
-
REAL Discoloading!
Your solution works great for a static image, but not so well for an image that spins on its own. Here's how to fix that:
.spinner { border: 0; background-color: transparent; background-image: url('http://what.thedailywtf.com/uploads/default/21127/794df88d9c968667.gif'); background-size: cover; -webkit-animation: none; animation: none; }
-
Well not my fault you went through the extra trouble of making a gif while we have perfectly good CSS3 animations available...
-
the back of a volkswagen?
-
Well not my fault you went through the extra trouble of making a gif while we have perfectly good CSS3 animations available...
I wanted to see what it would take. Plus, now if you already have a GIF, now you know what to do. :P
-
Oh no, you're not getting me twice with that one!
-
I wanted to see what it would take. Plus, now if you already have a GIF, now you know what to do.
Leave it as is for double the spin, double the fun?
-
##Hatting the site logo
.logo-big { content: url('http://what.thedailywtf.com/uploads/default/21149/06720decda118961.png'); } .logo-small { content: url('http://what.thedailywtf.com/uploads/default/21151/648d6b692737fee5.png'); }
[Cite]
-
Didn't want to use the Unicode hat?
-
-
In which font?
Should fall back if you leave it at default? I mean, it's right there next to the logo in the screenshot!
Besides, I prefer using my own hats.
Fair enough.
-
-
Should fall back if you leave it at default? I mean, it's right there next to the logo in the screenshot!
Ooooh! I see what you're getting at. Not sure how to go about injecting a character into the contents of an image tag. A quick test indicates that it isn't as easy as overriding the
src
. I don't even know if it's possible with pure CSS.
-
Well, you'd have to compose it... Use
:before
or:after
and margins.Then again, no idea if
position: absolute
would work, depends on how other elements are set up...Yeah, ok, too much work
-
Well, you'd have to compose it... Use :before or :after and margins.
Then again, no idea if position: absolute would work, depends on how other elements are set up...
Ewww …
Just took a quick look. They have a span immediately before the logo with class
valign-helper
. I'm not sure how that would react to having an absolute element inserted:before
the logo. There are no sibling elements after the logo, so that seems the safer bet.Still: eeeewwww.
-
Yes, I hate
position: absolute
as well. But sometimes, that's the only way to skin a layout.
-
I found the US Dreamcast logo in the default emoji set!
Well, ok, not really, but close enough
-
<- and it's also available in brown!
<- this is closer
-
-
/me is curious
-
Hackery scheduled for when I get off work. Still working out some kinks. Hopefully it will be CSSable, but if not a new UserScript is coming.
-
Ok, so I got bored with the expanded replies and such being gray, so I added a touch of blue:
Sadly, this little change required an absurd amount of CSS:
/* Style expanded posts before the current one */ section.embedded-posts.top.topic-body.offset2 { background-color: #e2e9f1; } section.embedded-posts.top.topic-body.offset2 div.reply { background-color: transparent; } section.embedded-posts.top.topic-body.offset2 div.reply div.row { background-color: transparent; } section.embedded-posts.top.topic-body.offset2 div.reply div.row div.topic-avatar { background-color: transparent; } section.embedded-posts.top.topic-body.offset2 div.reply div.row div.topic-body { background-color: transparent; } /* Style expanded replies to this post */ section.embedded-posts.bottom { background-color: #e2e9f1; } section.embedded-posts.bottom div.reply { background-color: transparent; } section.embedded-posts.bottom div.reply div.row { background-color: transparent; } section.embedded-posts.bottom div.reply div.row div.topic-avatar { background-color: transparent; } /* Style the Show Replies button */ button.show-replies { background-color: #e2e9f1; }
-
Something I've been meaning to do for a while, got reminded by a post in T-1000.
Swap the silly relative date for an actual date.
span.relative-date:before { content: attr(title); font-size: 1rem; } span.relative-date { font-size: 0px; }
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; }
avoids:
-
-
Got to love how the class for the post body is
topic-body
-
Me either until recently.
IIRC it only works on:after
and:before
.
-
Yes, that is a bit
-
Got to love how the class for the post body is
topic-body
Ok, so this... Smeg, need another container.
Should I rename the classes now? Meh, fuck it!
IIRC it only works on
:after
and:before
.That's the limitation of
content
though, isn't it? I think the impressive part was extracting the attribute value, which is new to me as well.