Local Dischorse CSS
-
Continuing the discussion from Poll: Circular Avatars:
@RaceProUK said:What other stuff are you running for here? I might have a play
@tar said:FWIW I'd be interested to see that as well...
@PJH said:If there's stuff that you think everyone else would appreciate, share.
As requested.
Most of this was done by others, I've added credit where I remember who it is but if I missed someone or got it wrong let me know.
####Styled quotes (@abarker)
aside.quote { background-color: white; border: solid 1px #0088cc; border-left-width: 5px; border-radius: 5px; } aside.quote > blockquote { background: none; border: none; } aside.quote div.title { background: none; border: none; } blockquote { background-color: white; border: solid 1px #0088cc; border-left-width: 5px; border-radius: 5px; }
####Remove padlock from 'restricted' category in category/topic view (@PJH, I think)
From:
To:
.badge-category i.fa.fa-lock:before { content: ""; }
####Restores highlighting of visited URLs on topic list (@PJH)
.topic-list a.title:visited:not(.badge-notification) { color: #919191; } .topic-list.categories a.title:visited:not(.badge-notification) { color: #38bdff; }
####Adds arrows to gutter links to show inbound vs outbound (@ChaosTheEternal)
DEPRECATED - added to TDWTF Default 28 Apr 2015
.gutter .track-link { padding-left:0; } a.outbound::before { content: "\f061\00a0"; font-family: FontAwesome; } a.inbound::before { content: "\f060\00a0"; font-family: FontAwesome; }
Left out anything which has since been added into the site CSS here (widescreen+min, square avatars).
Anyone with anything else useful share away!
-
-
Here's some others I put together:
Add background color to category slugs to clearly tie the text to the color bar(s)
a.badge-wrapper.bar { background-color: #eaeaf0; padding-left: 0; }
And to get a color that looks a bit better in the header:
div.extra-info-wrapper a.badge-wrapper.bar { background-color: #cadce6; border-radius: 4px; }
Make Chrome implement a more complete unicode set
Note the frist: This requires installing the Symbola, Wakor, and Andgagii font sets. The CSS below is based on the default font-family already used by Duckhorse.Note the second: Credit to @Choonster for expanding on my original implementation.[Cite]
/* Base style */ html { font-family: Helvetica, Arial, Symbola, Wakor, Andagii, sans-serif; } /* Code blocks */ body code, body pre { font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Symbola, Wakor, Andagii, monospace; } /* Post editor */ textarea#wmd-input { font-family: "Helvetica Neue", Helvetica, Arial, Symbola, Wakor, Andagii, sans-serif; }
-
New one I just created (I've heard it spoken of, but never seen samples, so I'm not giving anyone else credit):
Alter font for editor text box
This specific version sets up to use monospace.textarea.wmd-input { font-family: monospace; }
Edit: Updated to reflect changes required after Discourse 1.4.0 beta6.
-
Ah, good point. T'was a joint effort.
SCSS
http://what.thedailywtf.com/t/is-link-highlighting-now-broken-in-topic-lists/9107/15
CSS
http://what.thedailywtf.com/t/is-link-highlighting-now-broken-in-topic-lists/9107/31
-
so you can see all the posters' avatars in the OP, including the ones that get cut off thanks to duckwhores' fixed height:
.topic-map .avatars { height:auto; }
Or has that been fixed by duckwhores main branch / @PJH already?
For awesome use
[code]
button.like,button.has-like{
width:45px;height:34px;overflow:none;
text-align:center;padding-top:4px !important;
}
button.like .fa-heart:before {
font-family:Segoe UI Symbol;
content: "\1f494" !important;
}
button.like:hover
{
padding-top:3px !important;
background: none !important;
-webkit-animation: animatelikes 1s infinite; /* Chrome, Safari, Opera /
animation: animatelikes 1s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
button.has-like:hover .fa-heart:before {
font-family:Segoe UI Symbol;
content: "\1f494" !important;
}
button.has-like:disabled .fa-heart:before {
font-family:fontawesome;
content: "\f004" !important;
}
button.has-like:hover
{
background: none !important;
-webkit-animation: animatelikes 1s infinite; / Chrome, Safari, Opera /
animation: animatelikes 1s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
button.has-like .fa-heart:before {
font-family:fontawesome;
content: "\f004" !important;
}
button.like:hover .fa-heart:before {
font-family:fontawesome;
content: "\f004" !important;
}
/ Chrome, Safari, Opera /
@-webkit-keyframes animatelikes {
0% {opacity: 1.0;font-size:10px;}
20% {opacity: 1;font-size:14px;}
40% {opacity: 1;font-size:20px;}
50% {opacity: 1;;font-size:25px;}
60% {opacity: 1;font-size:20px;}
80% {opacity: 1;font-size:14px;}
100% {opacity: 1.0;font-size:10px;}
}
/ Standard syntax */
@keyframes animatelikes {
0% {opacity: 1.0;font-size:10px;}
20% {opacity: 1;font-size:14px;}
40% {opacity: 1;font-size:20px;}
50% {opacity: 1;;font-size:25px;}
60% {opacity: 1;font-size:20px;}
80% {opacity: 1;font-size:14px;}
100% {opacity: 1.0;font-size:10px;}
}
[/code]
-
I'm going to this thread in the naïve hope that I'll be able to find it again, after noting that a discosearch for motherfucking
CSS
wasn't able to...
-
interesting...
bold code!
is bold.not bold code!
is not bold.
[spoiler] interesting...bold code! is
bold.[/spoiler][code]
bold code!
[/code]
[code]bold code!
[/code]bah does not render as previewed ;(
-
I'd forgotten about that - I have it in Stylish at work, but not here at home.
-
When i visit meta.d, it is off-putting to see those sad lifeless hearts. I much prefer the pulsating hearts. I refuse to implement my style on meta.d because I feel it is appropriate that their hearts are pitiful.
-
There's also this, which keeps the blue highlight on the most recent poster in a topic list.
Makes no difference here, until the next Discoupdate™.
a.latest img.avatar.latest:not(.single) { box-shadow: 0px 0px 6px 1px #4eabda; }
-
This thread:
+ฒ
-
Off topic: TIL there's a goalpost Unicode character...
⑂
-
There's a racecar one too: 🏎
Doesn't show on my machine though
-
-
[b]Non-blurry Spoilers[/b]
.spoiled { background-color: rgb(0,0,0) !important; color: rgb(0,0,0) !important; cursor: auto !important; text-shadow: none !important; } .spoiled * { filter: none; visibility: hidden; } .spoiled:hover { color: rgb(255,255,255) !important; } .spoiled:hover * { visibility: visible; }
I opted for white text on black background, I know @abarker went for a bit different choices. Obviously not mobile friendly, and probably can't be due to the Discodevs doing the "unspoiled" content as inline styles, not a class change.
It does have some minor hiccups when spoilering some elements, like <kbd> that I'm not too worried about correcting.
[b]There are no such things as "coldmaps"[/b]
[b]Also, no more heatmaps or greymaps[/b].heatmap-high a, .heatmap-med a, .heatmap-low a, body .heatmap-high, body .heatmap-med, body .heatmap-low, body .coldmap-high, body .coldmap-med, body .coldmap-low { color:#919191 !important; }
-
Non-blurry Spoilers
I opted for white text on black background, I know @abarker went for a bit different choicesYeah, mine starts as a dark gray area, and then goes to light gray with black text on hover. I've also added a small corner rounding just because I can.
.spoiled { background-color: #888888; color: #888888; cursor: auto; text-shadow: none; border-radius: 3px; } .spoiled * { filter: none; visibility: hidden; } .spoiled:hover { background-color: #cccccc; color: Black; } .spoiled:hover * { visibility: visible; }
-
-
I Jeffed 20 posts to an existing topic: Discosearch and/or @tar's failings
-
Anyone got any kind of dark(ish) theming done? I don't mean black background necessarily, I'd actually prefer dark grey.
I'd do something myself, but time constraints..,
-
Someone on meta.d is doing that. He found a few bugs while doing so, too.
-
+1
-
-
* { background-color:dimgray !important; color:whitesmoke !important;border-color:black !important;}
DARK ALL OF THE THINGS.
Doesn't work 100% because they also battle you with !important csses of their own on some of the backgrounds.
-
To customize topic summary area:
div.topic-map { background-color: #E4EEF4; border-radius: 5px; border: solid 1px #0088cc; } div.topic-map nav.buttons button.btn { color: #0088cc; background-color: #cce7f5; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } div.topic-map nav.buttons button.btn:hover { color: White; background-color: #0088cc; } div.topic-map section.links table.topic-links span.clicks { color: #0088cc; background-color: #cce7f5; }
Collapsed:
Collapsed with hover:
Expanded:
-
You're making it look like GTK3 now.
Not sure how I feel about that.
-
It's up to you to implement or not. I'm just putting it here for reference.
-
As someone who's never touched CSS, how does one apply these changes? 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?
-
It's a browser extension indeed - you can just paste the CSS in as it's listed here, configure the URLs to apply the style to, and that's about it.
-
People mention Stylish like it's something obvious, but is that a browser extension or something else?
Yes, it's an extension. You should be able to find it in your browser's extension manager.
Is there boilerplate that has to goo around what people add or can you just paste the snippets directly into Stylish, whatever that is?
You can just paste things. The only thing you might want to set up is which pages it applies to.
-
words
the same words but differently
I almost wanted to say the same things, now I'm glad that I didn't get 'd
-
words
the same words but differently
reason for not saying words
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...
-
-
You can always hack around in the inspector of your favorite browser's dev tools until the CSS looks pretty enough ...
-
-
Names need moar orange on usernames.
Also, pls email me teh codez for wrench icon that does evil stuff to posts!
-
TODO:
Open a GitHub repository for a Ubuntu-style Discourse CSS collection.
-
I'd do an Amiga Workbench styled one if I had the time.
-
-
Yes, that's where the idea came from
Filed under: BBS reader worked at least!, Where's that NTTP interface now?
-
Filed under: Where's that NTTP interface now?
I got it out of the freezer, it's thawing as we speak. Once that's done, I'll resume working on it.
-
-
As someone who's never touched CSS, how does one apply these changes? People mention Stylish like it's something obvious, but is that a browser extension or something else?
As @loopback0 and @Onyx have metnioned, Stylish is a browser extension. I personally use Stylebot for Chrome. I like the backup method, which makes it really easy to share changes between my home and work systems. Stylebot also has a live preview, which is nice because you don't need to hack around in dev tools and the n copy the finished work over to your local CSS extension.
-
I tried Stylebot for the backup feature, but the same CSS that works in Stylish doesn't all work in Stylebot?Fixed it.
-
Stylish applies immediately after clicking save, too. So.. close enough.
Also, one time when you'd want your shortcuts overrridden, they are not. CtrlS in Stylish I mean. ViolentMonkey overrides it though. I'd assume TamperMonkey does as well.
-
Also, one time when you'd want your shortcuts overrridden, they are not
Overridden to what? Ctrl + S saves in Stylish.
-
So it does. Weird. I'm sure one of those plugins didn't do that. I am confuse now.
-
I'm not sure it's always done it. I only realised it did it a few days ago.
-
CTRL+S didn't save in stylish the last time I used it.... it tried to save the stylish editor page as a file to my harddrive.
*goes to try it now...
oh hey, it got fixed. wonder if it was a Chrome update or Stylish update that did the fixing.
-
oh hey, it got fixed. wonder if it was a Chrome update or Stylish update that did the fixing.
Pass - like I said, was only recently I noticed.