Can we have an official NodeBB-Stylish/userscript topic now?
-
@Choonster said in Can we have an official NodeBB-Stylish topic now?:
My CSS uses .card a[href="/user/tufty"] for that.
I was using your CSS, it definitely didn't work.
-
@Choonster i still havent figured out what's so bad about @tufty's avatar.
-
@darkmatter had to GIS that to figure out if it's even supposed to be bad, since it looks like someone photoshopped a creature's mouth onto a finger tip. And I'll be damned...
Someone photoshopped a lamprey's mouth onto a fingertip.
-
@NedFodder said in Can we have an official NodeBB-Stylish topic now?:
@Choonster said in Can we have an official NodeBB-Stylish topic now?:
My CSS uses .card a[href="/user/tufty"] for that.
I was using your CSS, it definitely didn't work.
I couldn't find a topic with tufty as the most recent poster, so I created my own and edited the URL of the last poster to tufty's. The avatar replacement seemed to work:
Are you using the most recent version of my CSS?
-
I feel somewhat honoured.
-
@Choonster said in Can we have an official NodeBB-Stylish topic now?:
To replace tufty's avatar with a "T" on a red background (like the standard letter avatars):
I can no longer edit my original post (reported here), so I'll post the latest version here until that's sorted out.
img[component="user/picture"][data-uid="291"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List and Topic -- ================== */ display: none; } .avatar a[href="/user/tufty"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List - Topic Creator -- ================== */ background-color: #990d10; width: 46px; height: 46px; } .avatar a[href="/user/tufty"]::before { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List - Topic Creator -- ================== */ content: "T"; height: 100%; width: 100%; line-height: 46px; font-size: 2.4rem; margin-right: 15px; vertical-align: middle; text-align: center; color: #eee; font-weight: normal; display: inline-block; } .card a[href="/user/tufty"] img.user-img { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List - Most Recent Reply -- ================== */ display: none; } .card a[href="/user/tufty"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List - Most Recent Reply -- ================== */ background-color: #990d10; width: 24px; height: 24px; display: inline-block; } .card a[href="/user/tufty"]::before { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic List - Most Recent Reply -- ================== */ content: "T"; height: 100%; width: 100%; line-height: 24px; font-size: 1.5rem; vertical-align: middle; text-align: center; color: #eee; font-weight: normal; display: inline-block; } .icon a[href="/user/tufty"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic -- ================== */ background-color: #990d10; width: 46px; height: 46px; line-height: 46px; font-size: 2.4rem; margin-right: 15px; display: inline-block; text-align: center; vertical-align: middle; color: #eee; font-weight: normal; } .icon a[href="/user/tufty"]::before { /* ================== Replace tufty's avatar with a "T" on a red background. -- Topic -- ================== */ content: "T"; height: 100%; width: 100%; } .avatar-wrapper[data-uid="291"] > img { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Avatar -- ================== */ display: none; } .avatar-wrapper[data-uid="291"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Avatar -- ================== */ background-color: #990d10; width: 136px; height: 136px; } .avatar-wrapper[data-uid="291"]::before { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Avatar -- ================== */ font-size: 7.5rem; vertical-align: middle; text-align: center; content: "T"; line-height: 128px; color: #eee; display: inline-block; width: 100%; height: 100%; } .post-info > a[href="/user/tufty"] img.user-img { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Posts -- ================== */ display: none; } .post-info > a[href="/user/tufty"] { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Posts -- ================== */ background-color: #990d10; width: 28px; height: 28px; display: inline-block; position: absolute; top: 50%; margin-top: -14px; margin-left: -14px; } .post-info > a[href="/user/tufty"]::before { /* ================== Replace tufty's avatar with a "T" on a red background. -- Profile Page - Posts -- ================== */ content: "T"; height: 100%; width: 100%; line-height: 28px; font-size: 1.5rem; vertical-align: middle; text-align: center; color: #eee; font-weight: normal; display: inline-block; }
Edit 3: Add support for the avatar in the profile page's posts list. Use inline comments because Stylebot likes to reorder blocks.
Edit 4: Actually use inline comments this time.
-
Some clown-vomit styles:
- A slight modification of @aliceif's omgrainbows stuff, I present rainbow mentions:
/* * Modified from: https://what.thedailywtf.com/t/how-can-this-be-so-wrong-aka-the-discopocalypse-thread/51117/1654 */ a.plugin-mentions-a { animation: omgrainbows 4.0s infinite; } @keyframes omgrainbows { 0% {color: hsl(0, 100%, 50%);} 25% {color: hsl(90, 100%, 50%);} 33% {color: hsl(120, 100%, 50%);} 50% {color: hsl(180, 100%, 50%);} 66% {color: hsl(240, 100%, 50%);} 75% {color: hsl(270, 100%, 50%);} 100% {color: hsl(360, 100%, 50%);} } /* Aliceif's rainbows @keyframes omgrainbows { 0%, 100% {color: #7ccdea;} 16% {color: #0074D9;} 32% {color: #2ECC40;} 48% {color: #FFDC00;} 64% {color: #B10DC9;} 80% {color: #FF4136;} } */
- And riffing on that, rainbow avatars:
div.user-icon { animation: omgrainbows 2.0s infinite; } img[component="user/picture"] { animation: omgrainbows 2.0s infinite; } @keyframes omgrainbows { 0% {-webkit-filter: hue-rotate(0deg);} 50% {-webkit-filter: hue-rotate(180deg);} 100% {-webkit-filter: hue-rotate(360deg);} }
Note: you'll have to replace
-webkit-filter
with the appropriate version for your browser:filter
general-webkit-filter
WebKit - Chrome, Safari-moz-filter
Firefox-o-filter
Opera?-ms-filter
IE
The rainbow mentions are actually pretty nice. Not so sure about the rainbow avatars.
-
what happened to topic titles... even with css i dont see them at all anymore :( couldn't find them hidden in the dom anywhere else either.
-
@darkmatter Wierd, I see them on some topics (like the status thread) but not on others (like this one).
-
@NedFodder From this topic:
From the Status topic:
Looks like it doesn't always fill in the title.
cc @ben_lubar
-
@RaceProUK said in Can we have an official NodeBB-Stylish topic now?:
cc @ben_lubar
He can't hear you. Will we all get a brazilian notifications when he turns them back on?
-
@NedFodder said in Can we have an official NodeBB-Stylish topic now?:
Will we all get a brazilian notifications when he turns them back on?
American notifications, mostly.
But no.
-
@NedFodder I know I won't; I keep clearing them (it's only the listing that's disabled, not the mechanism)
-
@RaceProUK
well notifications seem to be back.
@ben_lubar maybe now can explain why topic titles are iffy now?
-
-
well notifications seem to be back.
@ben_lubar maybe now can turn iframely back on?
-
@NedFodder You guys really want to turn all the things back on immediately before we have reliable metrics for current state?
-
Removing the padding from the mention emoji.
From:
To:
.topic .posts .content .img-responsive.plugin-mentions-emoji, .composer .preview .img-responsive.plugin-mentions-emoji { height: 20px; padding: 0; }
-
@Onyx We turned off a lot of shit trying to diagnose the cooties. I just want to make sure as much shit as possible gets turned back on. And if we can't turn something back on, that thing needs to be identified and fixed.
-
@NedFodder But if we turn 7 things on at the same time that will make finding the one thing that's a problem harder, shirley? I just meant let's leave it with just notifications on for a day and see if shit breaks.
-
@Onyx said in Can we have an official NodeBB-Stylish topic now?:
if we turn 7 things on at the same time
Yeah, that doesn't sound like a great idea. As long as we get back all of our toys, and soon. This forum was way more fun last week.
-
@NedFodder What toys are still off? The only thing that was turned off IIRC was the notifications, and those are back.
-
@RaceProUK I don't have a full list. I noticed iframely wasn't working on Monday, and Ben told me he turned it off because of cooties. Only he knows what else he shut off in the name of cooties. I would like to have iframely back, it rocks (when it works).
-
@Onyx yes. all of it. so we don't know which straw breaks the camels back again.
-
@Onyx it's no fun if you don't have to hunt
-
@ben_lubar Since there's got to be unit tests to ensure nothing broke from commits, I can only guess that your link is telling me that the removal of hidden topic titles from the header section is intentional?
-
@Kuro said in Can we have an official NodeBB-Stylish topic now?:
/* del/ins-fix */
del{
background-color:#C55;
}
ins{
background-color: #5C5;
}Needs to be:
.topic .posts .content ins, .composer .preview ins { background-color: #5C5; } .topic .posts .content del, .composer .preview del { background-color: #C55; }
-
a.plugin-mentions-a { font-family: "@mention" } @font-face { font-family: "@mention"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), url("https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2") format("woff2"); unicode-range: U+0-2C, U+2E-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } @font-face { font-family: "@mention"; font-style: normal; font-weight: 400; unicode-range: U+2D; src: url("data:font/woff2;base64,d09GMgABAAAAAAIwAA0AAAAABaAAAAHdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCShEIClRiCwoAATYCJAMQBCAFg0IHKhu5BMgeg+NuCcr488kUotRfL8uOh//2+/0+M3MF06QeOp7xkN4iRkKHRGR1otiXFH7Ta/X76b4g+cw8GbofZuMAyaWEtkaQ8K1xlSirqlsLof93E+kDHeKJrMak8MCO8F5A06R0DZAtEnieUKoJp25bSGdgMIiWg1zxUQyC7eAsBHzWjw3wtfTzW5YODGIaJCHLQkFCpNe4V2krr/SBmMPl8k+tZAISAAQAnN7kG0ghVOM/j9ULCEBGxgwGjogFZkhsgFoREna7Djxf9wMDiBoCEAkkePkcyHhGdJ0ECmhRYRTMAiigAkrGSzTq9vrNvtNT9Av6HuvrLG+kD0/iZgHSxnjIr36tP4pZ8TyKYoBA8Hq39JT1sT8FBexRvx7kDekLWgkEtXzM1ygRYPgnJV/rAeme+INAMUoKEkJgDwCDbgUItWEBksYqBrItRwIUw54xUBnwS4DacJghFkWJMEiBZNgUZJcIihlPUJn23qc249+5sZqxhTEEGlku0dS2NFA1g29hKHBibGRx50xbE+chcOEiuJGCBuhqFy834kU8XNwCEH4kqWDWbnKP4OIRvoBPE2kjvW7y0pUMD3MFuvKAa00zc13HgnO79PHeZOkWXGZBQmxX6xGFw3dGAQA=") format("woff2"); }
Before:
After:
This is kind of a joke post... @Lorne-Kates
Replacing
"-"
with" "
inside mentions started out as a "can you even do that in pure CSS", and it appeared that the commonly agreed upon answer was "no, you can't", but of course I refused to accept that...
-
(temporary fix for the stupid drag and drop overlay)
@anotherusername said in "Drag and Drop Images Here" overlay should cover entire viewport:
Adding this fixes it.
.imagedrop { top: 0 !important; height: 100% !important; left: 0; } .imagedrop > div { position: relative; top: 50%; transform: translatey(-50%); }
-
Dear Xaade,
What good are navigators if you don't know what the post number is....
Sincerely,
Frustrated user.
Dear Frustrated user,
I'm not sure why you'd ever have to use that navigation other than the short term, like temporarily remembering a post number while you navigate around. But if you do find this useful.... here's the following.
li[data-index]:before { content: attr(data-index); /* no quotes around attribute name! */ }
Unfortunately, I haven't figured out how to add one to our 0-based-index to get the "post number", but this will get you 80% there.
-
@xaade said in Can we have an official NodeBB-Stylish topic now?:
What good are navigators if you don't know what the post number is
-
Forum searching sucks... Sorry.
-
@xaade said in Can we have an official NodeBB-Stylish topic now?:
but this will get you 80% there.
IT'S THE 80/20 RULE YOU CAN'T ARGUE WITH THE 80 / 20 RULE!!!!!!!!!!!!!
-
@xaade the larger the thread and closer to the bottom of it that you are, the higher % of the way there it has gotten you.
Why, on the Likes topic, you'd be 99.998397% of the way there!
-
I feel I must be missing something obvious, but how would one change the background color of alternating posts? I found the ul.posts class, but nothing I tried beyond that worked.
-
@Erufael
The OP has a zebra-thing for the topic list. Changing that ever so slightly:ul.posts li:nth-child(odd){ background-color:#F00 !important; }
Filed Under: You want your own color in there, obviously
-
@Kuro I swear I tried that. Huh.
EDIT: Ohh I see. I thought you needed something between the li. and the nth-child part, like data-index.
Now to see how to do something about the padding between posts...
-
-
@Kuro You are correct again! Eventually I might start getting this. lol
I've come up with this:
/* Change header background to match posts */ .header { background-color:#f2f2f2; } /* Roundify posts and colorize them */ ul.posts li { background-color:#f2f2f2; border: 2px solid #4e5d6c; border-radius: 0.4em; margin-top:15px; margin-bottom:15px; padding:15px; }
To make this: http://prntscr.com/auog3a
-
Tired of not being able to see bold on Superhero?
/*Hard-to-see bold*/ strong { color: #65A7D4; }
-
Use text zoom? Ended up with HUGE NOTIFICATIONS?
Try this:
/*Giant toaster!*/ div.alert-window strong { font-size: 12px !important; }
Thanks to @Kuro for the mention spam
-
I think I know why on dark/custom themes certain notifications bubble things (at the bottom right) are screwed up!
I notice that all the notifications that don't have a success, warning, or error indicator on them (i.e. green, yellow, red) won't have foreground text be a sane color!Is this find enough to get a cookie?
-
So, as we all know, the humble
@
character can generate a mention inside a code block if the text following it is a valid username or group. Nobody seems to know why, because it's fucking dumb, but it does.E.g.:
// @administrators -- generates a mention........ // @*dministrators -- does not generate a mention
I don't know if it generates the actual notification or not; if it does, there's nothing much I can do about that. However, the mention is also a slightly smaller font size (especially notable in the difference of the size of the
@
), and it has the hand cursor and it does disastrous and unexpected things if it's clicked because yes, after all it is a link, and that can actually be fixed stylishly... hackishly... kind of..hljs a.plugin-mentions-a { font: inherit; pointer-events: none; } .hljs { cursor: text; }
(note: putting the
cursor
style on thea
element wouldn't work since it also haspointer-events: none
. Putting it on the container works well enough, at the cost of the whole container getting the cursor instead of just the actual text.)
-
@anotherusername said in Can we have an official NodeBB-Stylish topic now?:
I don't know if it generates the actual notification or not
-
@anotherusername said in Can we have an official NodeBB-Stylish topic now?:
Nobody seems to know why, because it's fucking dumb
Sent upstream:
-
@NedFodder I was kinda aware that it was in the stream somewhere, but the CSS fixes the possibility that clicking does wrong stuff in the meantime. Also that it looks ugly.
... my userscript was overriding the
font-family
in addition to thefont-size
, which was making it even worse because then instead of just being the wrong size it was also no longer monospaced text. I cleverly got both of them by settingfont
instead of just one or the other (or both, separately).
-
I don't like the fact that I can see posts I've made and then deleted, so here's CSS that replaces them with the "This post is deleted!" text like all the other deleted posts, only displaying the deleted post when you hover:
.posts .deleted .content:not(:hover) { color: transparent; } .posts .deleted .content:not(:hover):not(:empty)::before { content: 'This post is deleted!'; position: absolute; color: #333; } .posts .deleted .content:not(:hover)>*, .deleted *[component='post/edit'], .posts .deleted .divider:last-child { display: none; }
For bonus points, it fixes up the Tools menu to get rid of the Edit option and the extra divider that isn't necessary since there's no Bookmark option underneath it.
-
@anotherusername https://github.com/julianlam/nodebb-plugin-mentions/commit/1443fc5f3777b309318bc265382265873fbf1a55
-
A fix for the unread count being over the recent button in the "narrow window mode":
.unread-count:after { left: 50%; }
Top is before, bottom is after:
And, in full width mode, before and after:
cc @ben_lubar
Edit: This might be a bug.
-
Superhero no longer needs the notification fix: