/meta/ - Board Meta

[Make a Post]
[X]






nanochan Dark Theme Nanonymous No.3072 [D][U][F][S][L][A][C]
File: c81968d310e1ace36f4bb113eec8744a9cf2e29332b5556db2ea3bd17569d3dc.png (dl) (1.10 MiB)

I was bored, so i've made a simple dark theme userstyle.
Changes
>Now background is dark duh
>Most of the formatting is the same or similar.
>Inverted the image on the main page to fit the theme.
>Made the tables better in log and stats
>Made the posts in the catalog bigger and removed the scrollbars(so i can finally scroll in the catalog without getting stuck)
>Made the default size for the postform bigger(so i don't have to resize it every time)
Color coding
>Cyan is stuff you can click on.
>Red is titles/topic.
>Yellow is subtitles, replycount and date/time.
>Green is names.
>Purple is hapase/mods.
You're gonna need a userstyle extension to install it, then create new userstyle, paste the code and apply it to nano domain. Hope i didn't forget anything, code follows:

Code Part 1 Nanonymous No.3073 [D]

body {
background-color: #222;
color: #FFF;
}

hr {
background-color: #222;
color: #333;
}

/*Top bar*/

div#topbar > nav#topnav {
background-color: #333;
border-bottom: 1px solid #777;
}

h2.barheader {
background-color: #333;
}

div#topbar > nav#topnav a {
color: #03A9F4;
}

/*Main, Logs and Stats*/

div.container {
background-color: #333;
border: 1px solid #777;
}

div.container > img#front-page-logo {
filter: grayscale(100%) invert(82%);
}

div.container a {
color: #03A9F4;
}

th {
background-color: #333;
}

tr:nth-child(2n+1) {
background-color: #444;
}

td {
border: 1px solid #777;
}

/*Catalog*/

#content a {
color: #03A9F4;
}

div.catalog-thread {
width: 250px;
height: 250px;
padding: 0px;
margin: 5px;
border: 1px solid #777;
background-color: #333;
overflow-y: hidden;
overflow-x: hidden;
}

.thread-info-replies {
color: #FFC107;
}

div.catalog-thread > div.catalog-thread-subject {
color: #f44336;
}

/*Content*/

h1.redheader, h1#boardtitle {
color: #f44336;
}

h2#boardsubtitle {
color: #FFC107;
}

a#new-post {
color: #03A9F4;
}

/*Post*/

div.post {
background-color: #333;
border: 1px solid #777;
}

div.post:target {
background-color: #333;
border: 1px solid #777;
}

Code Part 2 Nanonymous No.3074 [D]

div.post > div.post-header > span.post-subject {
color: #F44336;
}

div.post > div.post-header > span.post-name {
color: #8BC34A;
}

div.post > div.post-header > span.post-name a {
color: #1565C0;
}

div.post > div.post-header > span.post-name > span.capcode {
color: #BA68C8;
}

time {
color: #FFC107;
}

span.post-number > a {
color: #03A9F4;
}

span.post-number > a:hover {
color: #03A9F4;
text-decoration: underline;
}

.thread-mod-links > a {
color: #03A9F4;
}

.post-file-info > a {
color: #03A9F4;
}

a.referee {
color: #03A9F4;
}

a.referee:hover {
color: #03A9F4;
text-decoration: underline;
}

/*Post comment*/

div.post > div.post-comment a, div.catalog-thread > div.catalog-thread-comment a {
color: #03A9F4;
}

div.post > div.post-comment > span.greentext, div.catalog-thread span.greentext {
color: #4CAF50;
}

div.post > div.post-comment > span.pinktext, div.catalog-thread span.pinktext {
color: #EC407A;
}

div.post > div.post-comment > span.redtext, div.catalog-thread span.redtext {
color: #F44336;
}

/*Post form*/

form#postform {
background-color: #333;
border: 1px solid #777;
}

form > label {
background-color: #333;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="checkbox"] {
background-color: #444;
border: 1px solid #777;
color: #FFF;
}

textarea {
background-color: #444;
border: 1px solid #777;
color: #FFF;
width: 1000px;
height: 500px;
}

form#postform > a.close-button {
color: #03A9F4;
}

/*Bottom links*/
#bottom-links a {
color: #03A9F4;
}

Nanonymous No.3076 [D] >>3077

Doesn't work for me.
Like, it's not your code, maybe it isn't supposed to be working with how webserver and my browser are set up.
>Content Security Policy: The page’s settings blocked the loading of a resource at self (“style-src http://nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion”)
If I disable CSP, I can get it to work, but I don't think that's a good idea.
I use Jewfox 52.9.0 and Stylus extension.

This style made me learn about CSP LMAO.

Nanonymous No.3077 [D] >>3078

>>3076
uhm yeah nano's CSP header is set to accept styles only from itself, i actually get that error too(Tor Browser 8.0.8 based on Mozilla Firefox 60.6.1esr and also Stylus) but it still works regardless on my end, sorry not sure if i know how to help, it's probably related to the browser configuration though

Nanonymous No.3078 [D] >>3079

>>3077
>it's probably related to the browser configuration though
I have everything about CSP set to default, therefore I don't think so.
I also use 1.4.23 Stylus, maybe that's a thing.
Also maybe NoScript messing with it.
That's why this shit is fucking nightmare.

Nanonymous No.3079 [D] >>3080

>>3078
My Stylus version is 1.5.3 and i'm using uMatrix with "* * script block" to block scripts for reference i don't have NoScript at all
>That's why this shit is fucking nightmare.
Yeah

Nanonymous No.3080 [D]

>>3079
>Firefox 59 finally fixed this bug so I don't think we should do anything. Users of the older Firefox can install a separate extension that alters CSP.
I think Stylus fucks just decided to not do anything.
I'll see if I can fix this.
Though I don't really know about this in general. It looks that earlier (mine) behavior was actually more sane: if userCSS is not from "self" (which it shouldn't have any problem faking, but still), then CSP should kick in and prevent styling. Not any other way.

Nanonymous No.3081 [D]

>CSP should kick in and prevent styling. Not any other way.
I'm not sure if CSP was developed in regard to extensions, it's useful to avois cross-site attacks etc but for styles if you can see the code it's safe, this seems just like a bug of Stylus.
>I don't think we should do anything
lazy fucks

Nanonymous No.3082 [D][U][F]
File: 20007f06efe4463586d14009b7a7345d721e79f2473b87f810c8564ece90e424.jpg (dl) (306.73 KiB)

OK, I have installed this shit
https://addons.mozilla.org/en-US/firefox/addon/scriptfilteraddon/
And it fixes it by applying custom CSP on a per-domain basis. Basically, another powerful tool.

inb4
>bloat
>cianiggers
It does look pretty small and tame.

Your style is nice BTW. I took the liberty of changing body color to #DDD and input area colors to #EEE though. Why would I have an actual white color in my dark theme, like, WTF.

Nanonymous No.3088 [D][U][F]
File: df0eddeffae7729815e5ae92628099dea303272222033d33fbe5155c2210525b.jpg (dl) (48.16 KiB)

Glad you solved the problem somehow, even i still get the error until it works i'd rather not install more extensions.
>Why would I have an actual white color in my dark theme, like, WTF.
Yeah, i'm the kind of person that likes high contrast themes with bright colors.

Nanonymous No.3093 [D]

Great theme, thanks. Didn't have to change much, it's pretty much perfect.

Nanonymous No.3100 [D] >>3101

screenshots?

Main Nanonymous No.3101 [D][U][F]
File: 3487b9f348898f855619415158cbc527d1056b18be703805b578410da3fc1b87.png (dl) (111.23 KiB)

>>3100
There you go fren

Catalog Nanonymous No.3102 [D][U][F]
File: 32b49c519c328d4aeca1a0c49941eca3cea8f69b0149b0bfa9bbaa85c6747996.png (dl) (351.40 KiB)



Thread Nanonymous No.3103 [D][U][F]
File: b1606a167792124d8f2cca75b796953650084d0f97ff780d2119705e97555344.png (dl) (208.78 KiB)



Post Nanonymous No.3104 [D][U][F]
File: 69eddfeea5d16a42c888024efe4df6d607e3bb245991a532885f8b143a7ce9d1.png (dl) (211.87 KiB)



Log Nanonymous No.3105 [D][U][F]
File: 0a363a7a60edf228a5cf08a9b6256c09b12d31f948e933f2cedeb3993b4f6671.png (dl) (89.80 KiB)



Stats Nanonymous No.3106 [D][U][F]
File: 6e99dd956e8018244144a862dd7c3049afcf71dd8c685afbf6a7e34fdbb810a8.png (dl) (33.84 KiB)



plz do bully Nanonymous No.3113 [D][U][F] >>3114
File: c10843856cde1b84b523a52a9cbc77a3be67c0cddef2745c9e6f5665fdfef9b1.png (dl) (75.94 KiB)

How do I paste the code into scratchpad without it quarantining itself into one line?

Do I have to use an actual style extension instead of Greasemonkey in order to make this decently convenient?

Nanonymous No.3114 [D] >>3115

>>3113
Let me tell you that you should disable javascript globally while browsing the Tor Network, preferably using uMatrix, you should probably just use Stylus, anyway is it definitely possible to inject css using javascript, you can use this https://github.com/patcullen/injectCSS to add multiline CSS or use jQuery, or just create a new style element and append the style to it. You can find on stack overfow how to do it.
>>pls do bully
i won't bully you, i'll leave that to pic related

Nanonymous No.3115 [D][U][F]
File: a3976acd8e4810dc10a354a884e6cc355f73bb7462be90011ce2f88800ebfef1.png (dl) (50.02 KiB)

>>3114
forgot pic

Nanonymous No.3116 [D][U][F] >>3118
File: 2cb7f18d362b1fbce6d6cb592e512a8476cca743675fb4ae854344394673ac3c.jpg (dl) (4.70 KiB)

I don't know... Don't you find it... Creepy? Huh???

Nanonymous No.3117 [D][U][F]
File: 6363fcedb515113cde0a0fb911d2f6bc868fe0a6b4364b972eae5beb382f830a.jpg (dl) (3.30 KiB)

*see again in the dreams*

Nanonymous No.3118 [D]

>>3116
CSS bullshit is so powerful.
It can actually invert colors of pictures, AND (re-)colorize them.
I've learned that shit recently when I was trying to make a dark theme (I'm not the OP) and non-inline SVG pictures just wouldn't accept color properties, so I had to resort to that bullshit.
Or, rather, in fact, as soon as I learned it, I actually decided that I should just look some theme up, and I found one. I was looking for a dark theme for Wikipedia LOL.

Nanonymous No.3138 [D] >>3140

I think hapase color (capcode) does not apply correctly when hapase posts with email field. Like, it becomes nested into <a> "post-email" tag and it most probably fucks with what was written into style sheet about that. Like, strict hierarchy or something.
Proof: nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion/pol/3439.html

#autism

Code Update 1 Nanonymous No.3140 [D][U][F] >>3150
File: 160329c1a68092bdcaf07c6226371050f3ce9dd5894d4f4a7183e48f939b3e57.jpg (dl) (31.61 KiB)

>>3138
Good catch, really easy to fix luckily.
This should preserve link color and style only the capcode, code follows(i recommend adding it after line 118 under the "Post" section):

div.post > div.post-header > span.post-name > a > span.capcode {
color: #BA68C8;
}

Code Update 2 Eyelets Edition Nanonymous No.3142 [D][U][F]
File: 9b8cdf46f1aa83f0978a9acc7daa0f6e83628b2bbba72753f12d0a686d6bb2a2.png (dl) (919.17 KiB)

Optional update that makes the referees and file link/info bigger(they're too fucking small by default), you can tweak size to your preference, code follows(i recommend adding it after line 139, linenumber includes previous update, under the "Post" section):

.referee {
font-size: 0.75em !important;
}

.post-file-info {
font-size: 0.75em !important;
}

Nanonymous No.3150 [D] >>3151

>>3140
I have a question.
Isn't it just better to say

span.capcode {
color: #BA68C8;
}

since capcode is used only in one certain place?
I don't know much about CSS, but it's an easy guess that it will just apply the rule globabally for all <span>s named capcode. Isn't it just fine and less prone to bugs like that?

Nanonymous No.3151 [D][U][F] >>3152 >>3153
File: 4144881943cf4c5be8d3e7d53c8fe774197502f4c12e489f8fe565be5d8e18bc.png (dl) (810.17 KiB)

>>3150
Yeah thats better, that's actually how it is in the original stylesheet.

Nanonymous No.3152 [D]

>>3151
*bullies you*

Nanonymous No.3153 [D] >>3154

>>3151
Anyway now I have another question.

Do you have an autistic urge to write down a page structure like that, or is there some CSS creating tool that made a rule like that for you automatically?

Nanonymous No.3154 [D][U][F] >>3158
File: d8ddaaa3d9339812c296551302d4780589949a67ae77dc71da1886c27624b560.png (dl) (1.53 MiB)

>>3153
Autism is the fuel of all good code. The entire nanochan codebase is built with an high level of autism and thats why we love it.

Nanonymous No.3158 [D] >>3159 >>3162

>>3154
You didn't answer the question you fucking weeb, Jesus Christ.

Nanonymous No.3159 [D][U][F] >>3166
File: 60c76185da3315d97ca37e53a7cc0618960f13fa1e8395965cf53a823a7a3214.gif (dl) (331.12 KiB)

>>3158
Yes he did, you just didn't understand because you're a normalfag brainlet.
<Do you have an autistic urge...
>Autism is the fuel of all good code.

Nanonymous No.3162 [D][U][F] >>3163 >>3166
File: 80ead05e2ccf34e1f1277fea662db89de6be6f3c01d9e10e0ae047f642a3c94b.png (dl) (356.19 KiB)

>>3158
>You didn't answer the question
I don't use any tool, yes i like to write a strict hierarchy cause i like it that way(and the nanochan stylesheet itself uses a lot of child combinators).
>you fucking weeb
Chigau onii-chan! Weeb janai >.<

Nanonymous No.3163 [D]

>>3162
>Chigau onii-chan! Weeb janai >.<
It's cute but it also proves you are a fucking weeb

Nanonymous No.3166 [D] >>3167 >>3168 >>3181

>>3159
I prefer to get an exact direct answer usually.
You may be surprised how wrong you might get after assuming a lot.

>>3162
>I don't use any tool
Shame, I was kinda hoping you did.
Makes sense when dealing with WYSIWYG bullshit.
>cause i like it that way
Imagine hapase changes some ids or overall page structure now.
An unlikely event, but imagine the pain.

Nanonymous No.3167 [D] >>3171

>>3166
Since the post referencing was added, Hapase hasn't changed anything except for captcha mechanics, spam filters and other "back end" stuff. I think it's pretty stable for now. Not much to improve except for maybe some minor css things.

Nanonymous No.3168 [D] >>3171

>>3166
I'm gonna mantain this theme as long as i use nano(since i use it), if something breaks report it and i'll fix it, with this said you can rewrite and make better the theme however you want(it's not like i've put that much effort in it either).

Nanonymous No.3171 [D]

>>3167
That's cool, I guess.

>>3168
Good job sonny xD

Nanonymous No.3181 [D]

>>3166
I don't know of any graphical tools, but http://lesscss.org/ is a small time-saver.

Nanonymous No.3405 [D][U][F] >>3406
File: 5588c5e795c7a29ac0c0c410d34356eb3703091b209fa20371c3ab8eea314804.png (dl) (417.02 KiB)

Hello again fellow darkthemed nanochanners!
Today i come with a reworking of the navbar(i always hated the order of the boards), this come down to my own preference but you can modify everything from the order of the boards to the separators and the message.
Code follows(add after line 25):

div#topbar > nav#topnav > ul {
display: flex;
flex-direction: row;
}

div#topbar > nav#topnav > ul > li:nth-child(1) {
order: 1;
}

div#topbar > nav#topnav > ul > li:nth-child(1):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(2) {
order: 2;
opacity: 0.5;
}

div#topbar > nav#topnav > ul > li:nth-child(3):before {
content: "- ";
}

div#topbar > nav#topnav > ul > li:nth-child(3) {
order: 3;
}

div#topbar > nav#topnav > ul > li:nth-child(4) {
order: 4;
}

div#topbar > nav#topnav > ul > li:nth-child(4):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(5) {
order: 5;
}

div#topbar > nav#topnav > ul > li:nth-child(5):after {
content: " |";
}

div#topbar > nav#topnav > ul > li:nth-child(9) {
order: 6;
}

div#topbar > nav#topnav > ul > li:nth-child(9):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(6) {
order: 7;
}

div#topbar > nav#topnav > ul > li:nth-child(8) {
order: 8;
}

div#topbar > nav#topnav > ul > li:nth-child(8):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(12) {
order: 9;
}

div#topbar > nav#topnav > ul > li:nth-child(11) {
order: 10;
}

div#topbar > nav#topnav > ul > li:nth-child(11):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(14) {
order: 11;
opacity: 0.5;
}

div#topbar > nav#topnav > ul > li:nth-child(15) {
order: 12;
opacity: 0.5;
}

div#topbar > nav#topnav > ul > li:nth-child(7):before {
content: "- ";
}

div#topbar > nav#topnav > ul > li:nth-child(7) {
order: 15;
}

div#topbar > nav#topnav > ul > li:nth-child(7):after {
content: " -";
}

div#topbar > nav#topnav > ul > li:nth-child(13) {
order: 17;
opacity: 0.5;
}

div#topbar > nav#topnav > ul > li:nth-child(10) {
order: 16;
opacity: 0.5;
}

div#topbar > nav#topnav > ul > li:nth-child(13) {
order: 17;
opacity: 1;
}

div#topbar > nav#topnav > ul > li:nth-child(13):after {
content: " ----- Let's all love Lain";
}

Nanonymous No.3406 [D][U][F]
File: 5755306b7e1e29aa69e1ed1293800b697672d09fbb3901b90652887407431095.png (dl) (120.24 KiB)

>>3405
Forgot screenshot

Nanonymous No.3407 [D][U][F] >>3408
File: 56fe990bcb9639c64d1dfcde9930a3f9a563462dc0805066a62a07e1fa98d4c6.png (dl) (1.32 MiB)

For simplicity i collected all changes and put them together.
nanochan Dark Theme v1.0.0

Mozilla format(save file and import in Stylus) - http://zerobinqmdqd236y.onion/?7a1ca560535f640f#xqDgsLWffJKnzIrmuRSl8HXw3mZooQMSZxByT1+6D88=
Source - http://zerobinqmdqd236y.onion/?406c8faaea9d23e1#ntyyoKTj6HC49L1EknqLaGopSqf7ois0SHIob1xv7jo=

Nanonymous No.3408 [D] >>3409

>>3407
>Javascript is required for ZeroBin.net to work.
What's the point of setting up Tor when they don't even test it...

Nanonymous No.3409 [D] >>3410

>>3408
I've tried a bunch and they mostly doesn't work.
DeepPaste - http://depastedihrn3jtw.onion/index.php captcha doesn't work for me
BlackHost - http://blackhost5xlrhev.onion/?id=pst doesn't work
The others that i found needs JS :(
Give me a link if you have a good one.

Nanonymous No.3410 [D] >>3411

>>3409
https://pastebin.com/

Nanonymous No.3411 [D][U][F] >>3412
File: 6badabc3e7aa319c957f2f75fcac592ab5dfb550a27c466b4706f40c187335a6.png (dl) (517.22 KiB)

>>3410
When a clearnet botnet website is more private than darknet ones <.<
nanochan Dark Theme v1.0.0

Mozilla format(save file and import in Stylus) - https://pastebin.com/FtUJ1FEp
Source - https://pastebin.com/d1ShyxyS

Nanonymous No.3412 [D][U][F]
File: 343c2820e636d7bd523ab70a31b1b4d7de41119fb883972215cebb70d510bcb0.png (dl) (536.20 KiB)

>>3411
even better:
https://pastebin.com/raw/FtUJ1FEp
https://pastebin.com/raw/d1ShyxyS

nanochan Dark Theme v1.1.0 Nanonymous No.3413 [D][U][F]
File: 327cec93fb29ef1e6bd414218b68505eafca4b2ad3014e0bbc002a0f83f15b69.png (dl) (490.80 KiB)

So here i am again, so today i was thinking of ending my existence but in the end i decided to update a theme for a board that nobody even uses anymore :D
I'm gonna start with saying that this will probably break some stuff and it's optimized for 1080p screens, report bugs in case.
Anyway i got some new cool features today, first i reworked how catalog worked, now it's all more compact and more information fits, i've hidden the board title and subtitle, the update button(why is that even a thing you have the one on your browser) and i've moved the new thread/new post button in the navbar, plus since now catalog threads are smaller i've added an animation that gets triggered when you hover that will expand the thread showing the entire thread comment inside the catalog(i think this is the best solution between fucking hapase scrollbars everywhere and cropped threads like in previous version), i also removed mod buttons since nobody else than hapase can use them and also a line that was stealing space before the thread comment, i also made minor changes that i'm too tired to remember.
I'm actually really satisfied with this version, i've implemented every feature that i wanted and now i'm out of ideas, i might make a userscript next since you can only do so much with CSS, but nano is kind of dead so that probably won't happen.
Post feedback.

Mozilla Format:
https://pastebin.com/raw/JfR6BizR
Source:
https://pastebin.com/raw/h4ygRdgK

Nanonymous No.3414 [D][U][F] >>4867
File: 3201c0a128bd1633ee7132134663528e1b0013921b6c2c4a7204f96ecefb3c21.png (dl) (594.67 KiB)

<-- New Catalog design

nanochan Dark Theme v1.1.1 Nanonymous No.3415 [D][U][F]
File: 3f541a2e68b526ddb09bd30305ab37df310bd2e1b8728919da287849389ec1ef.png (dl) (695.69 KiB)

Small update, i was reading this thread: https://nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion/meta/1088.html and after testing, maybe having the [Update] button makes sense, it's back, this time in the navbar.

Mozilla Format:
https://pastebin.com/raw/s1i62hg8
Source:
https://pastebin.com/raw/RLaH4i8j

nanochan Dark Theme v1.1.2 Nanonymous No.3416 [D][U][F] >>3418
File: 8227776bbe8b783e91d194ff99dd120bc03e5997d5e59654de34824ab420901e.png (dl) (1.70 MiB)

So hapase in all her wisdom deleted /test/ without any warning and that broke the theme, women and tech amirite, anyway i fixed it, note that it will still be broken on old static pages until they get updated, annoying but i can't do much there... i also made the navbar more compact for mobile/small screens.

Mozilla Format:
https://pastebin.com/raw/NZxSBRZL
Source:
https://pastebin.com/raw/uKvQeb05

Nanonymous No.3418 [D][U][F]
File: 9a156372479692af18ec4b187f66e8f5fa53b3e99392d7c41d778800ec514f5d.jpg (dl) (71.29 KiB)

>>3416
>adding or deleting a board breaks the theme
who's the woman in tech huh?

Nanonymous No.3419 [D][U][F]
File: c66f2f592a2d41f9a61597a57b170c55ada8e8ca6af3cfb1e18b425608e62c09.png (dl) (545.22 KiB)

The theme breaking on UI changes is natural and not really the problem, the real issue are old static pages lingering around after changes, after updating stuff you should regenerate at least all last month html pages and all boards catalogs, look at the mess in /ar/ with the old announcement, it shouldn't be that hard to implement.

nanochan Dark Theme v1.1.3 Nanonymous No.3421 [D][U][F] >>3423
File: 1ea28939bf053e7dabdbf49a092a6a6909dc7770a9f4492315f9d251040554c8.png (dl) (370.51 KiB)

I know that i said that i was satisfied with how the catalog worked in v1.1.0 but i had a pretty cool idea today, since v1.1.0 if you hover on a thread in the catalog it will expand showing more information, this is fine but the problem is that since catalog is implemented with flex it moves the next row(sometime out of the screen) and it's annoying, so instead of changing it's size i figured out i just had to make it's position fixed and the flex would rearrange itself, in the end it ended up being kind of like a modal, since the :hover pseudo-class would make the catalog unusable i also changed it to use the :active pseudo-class.

Mozilla Format:
https://pastebin.com/raw/ERUn2ZNS
Source:
https://pastebin.com/raw/dWyj7CXg

Nanonymous No.3422 [D][U][F]
File: 59f35cccc9fdc097b3baa4129926afbd52d1d92c6ddfe72ed4cf805d98dd8c0c.png (dl) (559.86 KiB)

<-- This is how an activated thread in the catalog looks like

How to use: click and hold on a thread in the catalog.

Nanonymous No.3423 [D] >>3424

>>3421
>pastebin.com
>Attention Required
Upload it here.
Using a text editor, put "%PDF" in its own line before everything else, and then nanochan will think it's a pdf.

Nanonymous No.3424 [D][U][F]
File: 26dd158a63d7dbab878435a30a475569aac48c0fa8994b1a64235e73f4c9756b.pdf (dl) (6.66 KiB)

>>3423
there ya go

nanochan Dark Theme v1.2.0 LTS なのにもうす No.3803 [D][U][F]
File: 9ee2c393e29f44f8ff6ac81db58041e1d65ff52467d13fd988c7a0658b57be25.pdf (dl) (6.72 KiB)

Hey lot of stuff happening lately on nano, anyway, new release of th dark theme, yay, as the subject implies this is gonna be a more stable version, my objective with 1.1.* was experimenting, now on 1.2.* i'm gonna consolidate, list of changes:
>fixed a bug on the main page, with the z-index on the navbar
>fixed the boards order on the navbar after /b/ was added
>the board title and subtitle are back
>moderation links are back
>added a surprise on the navbar just to trigger the anti-japan faggot
>removed the catalog modals, cause they create more problem than they solve IMO, if you want them the code is still in there commented

I'm gonna release code only via nano from now on.
Instructions:
Download the attached PDF, open with a text editor, remove first line(the one with %PDF), intall a userstyle add-on(like Stylus, Stylem ...), create new style, paste code, apply only to nano URL, you're done.

Would be cool if admin would add feature to upload code.

nanochan Dark Theme v1.2.1 なのにもうす No.3804 [D][U][F]
File: cbda9734b5352f47db7d513a4d2c9a085293b480337b2a0ca372370770e92cc4.pdf (dl) (6.73 KiB)

Changing the z-index of the navbar as a consequence hided the replycounter, the new thread/post and update elements, since the are positioned on the navbar in a fixed way, sorry about that i fixed it now.

tldr; too many hacks fucking with eachother

nanochan Dark Theme v1.2.2 Desktop なのにもうす No.3827 [D][U][F]
File: a1b0e4fdbe45ee506d96aa477d4cca7c64c0800ad5fed5afce82a5e75f4518e9.png (dl) (2.46 MiB)

Quick fix to navbar.
Nano does not want to upload my file so back to pastebin...
https://pastebin.com/raw/TWLqCW4r

nanochan Dark Theme v1.2.2 Mobile なのにもうす No.3828 [D][U][F] >>3830
File: 053cb208385e7e4e5a9ed1314a1d88502af06fcface675e43ab670f3528ad99c.png (dl) (2.29 MiB)

Branch optimized for mobile devices.
https://pastebin.com/raw/zEx4XNA8

Nanonymous No.3829 [D]

div#content {
margin-top: 28px !important;
margin-bottom: 28px !important; /* having last post sticked to browser's bottom border is very irritating */
}

Nanonymous No.3830 [D]

>>3828
>optimized for mobile devices(TM)
absolute cancer
nanochan's stock css is already better than every other imageboard for mobile.

nanochan Dark Theme v1.2.3 なのにもうす No.3868 [D][U][F]
File: 8d680fd5f6d74cac02a1e15d852ba1765b5a79c1bb85baa7a68f93174d031d68.jpg (dl) (248.23 KiB)

Changelog:
>Added space at the bottom of the page
>Themed latest post in catalog
>Added commented code for mods/admin to restore mod links in catalog(line number 267)
>Fixed a z-index bug on the postform
>Fixed the size of the postform(applies only to mobile version)

Desktop version:
https://pastebin.com/raw/s4EKEzfq

Mobile version:
https://pastebin.com/raw/b6zgGFFJ

nanochan Dark Theme v1.2.4 なのにもうす No.3989 [D][U][F]
File: bb1989d86724f23922dec402fdffc45e841d98c07b04c7c030f9fc0b2cb43d57.gif (dl) (887.56 KiB)

Akariin~ edition!

Changelog:
>Usual navbar fix
>Added visible sage
>Added the hidden and forgotten Akariin~ mode! line ??? test it on >>>/a/1180
>Font size SHOULD be more normalized(need feedback though cause different OS and devices fuck it up)
>Postform is even better on mobile now

Desktop version:
https://pastebin.com/raw/UHrFbGHf

Mobile version:
https://pastebin.com/raw/LAzmQRS9

nanochan Dark Theme v1.3.0 Nanonymous No.4542 [D][U][F]
File: c35bb4b5e41b7dbfa1e41292024a0fcac8c7daaaaf4e1f298351b3036b6c8f55.jpg (dl) (353.86 KiB)
im doing dis edition

Changelog:
>Removed the "im doing this" thing
>removed mod links from threads for consistency with catalog
>reworked how navbar works, now it won't break every time the board order changes(it uses the href attribute selector and identifies element by their relative url and then position then in a fixed way, so it's independent from order), if you use different fonts or font sizes it might look messed up, just adjust horizontal positions accordingly or disable modded navbar completely(comment from line 70 to line 203)
>i've put all the optional stuff at the top so it's easier to find
>fixed a bug with catalog modals and last reply date

Desktop version:
https://pastebin.com/raw/jB13MDAT
Mobile version:
https://pastebin.com/raw/fwmWeUC8a

nanochan Dark Theme v1.4.0 Nanonymous No.4720 [D][U][F] >>5040
File: 3c7982b5a5ced3bc3384df535e09bff6878fc7cc204c41eee7c11f67c74b09b3.pdf (dl) (14.40 KiB)
See you space cowboy edition

I've finally found some time to finish working on this theme and now it's done, i've rewrited and reorganized most of the theme so i'm not even gonna try to make a complete changelog, i will list the major changes only.
I have finally made a better effort in documenting and organizing the code, now there are a lot of comments describing every sub-section and the code is divided into more clear sections with a NAVIGATION index at the top, this should make editing and forking the theme more easy.
Now all the colors are organized into CSS variables at the top in the VARIABLES section, this should make it extremely easy to make color variations of the theme, just edit the variables with your preferred colors.
I won't port the mobile version cause it's not really worth it, but if somebody cares about it just comment out the TOP BAR sub-section regarding the boards order override, then resize catalog threads and resize the postform textarea accordingly to your screen size and you should be done.
I've also made lot of small changes like some styling modifications to forms, a clickable logo on the navbar, a footer like it was in origin, a completely different style for tables and i resized the postform so it doesn't overlay with long posts.
I will post a bunch of mirrors and also upload using the PDF trick cause pastebin took down one of the links in the past.

NO JS required, clearnet, text, raw text
https://pastebin.com/raw/Nj3uupMR
JS required, clearnet, encrypted, text
https://0bin.net/paste/hLemndMA0leFjAfd#OILP7Bu+9dV1o0NFXeo6I-zqQ5FNb2X9iWSHHeta6dT
JS required, darknet, encrypted, text, raw text(recommended)
http://zerobinqmdqd236y.onion/?967696a129acf58d#jQiu3dNZRdYzXg+z/NEbQcWpVkTbolGFInVrGYBN6aU=
No JS required, clearnet, file
https://anonfile.com/08E8S419nf/nanochan_Dark_Theme_v1.4.0_css
JS required, clearnet, file, text
http://ge.tt/2UfpaMx2

So this marks the end of this little project, when i find the time i will start working on a userscript(maybe).

Nanonymous No.4721 [D][U][F]
File: 2c25816ce0b8cf77487dc46f54eef39a2c99aaa2e90e511982233d6adfd1d64f.png (dl) (127.21 KiB)
Navbar, postform and footer in version 1.4.0

Nanonymous No.4722 [D][U][F]
File: 87beafe3f022a90b5ca4aae9119b08b84d9eb41f89bbd6c17d63cf464c0e2973.png (dl) (140.23 KiB)
Tables in version 1.4.0

Nanonymous No.4723 [D][U][F]
File: 54f7135cc84b48f8cde7a4755746a746010d6a3b2ff9e1954f53f15bdbcb9f83.png (dl) (144.50 KiB)
Futaba theme based on version 1.4.0

Nanonymous No.4724 [D][U][F]
File: e5afb6394b911c0d3200ff96e265798f080d9fd3b71fd5d6591dd66460037be7.png (dl) (128.21 KiB)

Nanonymous No.4725 [D][U][F]
File: eed299f81f1dbd68b0f99ae93068cff7a8efd954ec6fee96b202a7a5f4451110.png (dl) (531.27 KiB)

Nanonymous No.4726 [D][U][F]
File: df055f82bdc78d2c6dd41d20dec7410cbbc652a577c152e5645ee95daad3d2d8.png (dl) (114.05 KiB)

Futaba Nanonymous No.4727 [D]
Change VARIABLES section to:

:root {
--primary-color: #FFFFEE; /*Background, table headings*/
--secondary-color: #F0E1D7; /*Navbar, catalog threads, page containers, posts containers, forms*/
--tertiary-color: #e3d2c9; /*Form elements, table alternate table rows*/
--selection-color: #FFFFFF; /*Selected text background*/
--border-color: #D9BFB7; /*Borders*/

--text-color: #9B0000; /*Text*/
--link-color: #0000EE; /*Links, clickable elements*/
--dead-color: #FF002C; /*Dead links, dead boards*/
--title-color: #9B0000; /*Board titles, page titles*/
--subtitle-color: #9B0000; /*Board subtitles*/
--subject-color: #9B0000; /*Post subjects*/
--data-color: #9B0000; /*Timestamps, replycounts*/
--name-color: #117743; /*Names*/
--capcode-color: #FF223B; /*Capcodes*/
--greentext-color: #789922; /*Greentext*/
--pinktext-color: #AA6666; /*Pinktext*/
--redtext-color: #FF002C; /*Redtext*/
}

Change 2nd subsection of the MAIN, MOD, LOG, STATS AND ERROR PAGES section to:

#front-page-logo {
filter: hue-rotate(250deg) brightness(92%) saturate(76%);
}

Nanonymous No.4728 [D][U][F]
File: 973f92554000309bd26e7f75c6de9e1f244508b3396cb48cfec8d92cb508c5e1.png (dl) (145.83 KiB)
Burichan theme based on version 1.4.0

Nanonymous No.4729 [D][U][F]
File: af89b3ad772bdb87d8cfa5b0cf2221c5f9c90240aafa8ebdae58a3660b6aa72a.png (dl) (129.83 KiB)

Nanonymous No.4730 [D][U][F]
File: 8ff64ba04df397e9b5e9c55d02143302ef0e11a2648aec8dab5c24a8d196f3db.png (dl) (540.72 KiB)

Nanonymous No.4731 [D][U][F]
File: e03ae9afeac6a82b64d57bc01aeac572ae1f806714db33b02580c32e8e77e316.png (dl) (87.18 KiB)

Burichan Nanonymous No.4732 [D]
Change VARIABLES section to:

:root {
--primary-color: #EEF2FF; /*Background, table headings*/
--secondary-color: #D6DAF0; /*Navbar, catalog threads, page containers, posts containers, forms*/
--tertiary-color: #c4caeb; /*Form elements, table alternate table rows*/
--selection-color: #FFFFFF; /*Selected text background*/
--border-color: #B7C5D9; /*Borders*/

--text-color: #000000; /*Text*/
--link-color: #34345C; /*Links, clickable elements*/
--dead-color: #AF0A0F; /*Dead links, dead boards*/
--title-color: #AF0A0F; /*Board titles, page titles*/
--subtitle-color: #AF0A0F; /*Board subtitles*/
--subject-color: #AF0A0F; /*Post subjects*/
--data-color: #000000; /*Timestamps, replycounts*/
--name-color: #117743; /*Names*/
--capcode-color: #FF223B; /*Capcodes*/
--greentext-color: #789922; /*Greentext*/
--pinktext-color: #AA6666; /*Pinktext*/
--redtext-color: #FF002C; /*Redtext*/
}

Change 2nd subsection of the MAIN, MOD, LOG, STATS AND ERROR PAGES section to:

#front-page-logo {
filter: hue-rotate(95deg) brightness(89%) saturate(85%);
}

Nanonymous No.4733 [D]
>using Links
>Menu > View > Color
>Text: d5c4a1
>Link: d5c4a1
>Background: 151515
>[x] Ignore document color
Done. No CSS bullshit.

Nanonymous No.5021 [D] >>5040
div.post:target {
background-color: #333; /* :target is not matched by this rule */
border: 1px solid #03A9F4;
}
div.post-container:target .post {
background-color: #222; /* and matched by this */
}

In dark CSS target post (the one you go to when clickin' on reflink) still have default background. Pls fix if not already.
Your shi-es-esu is sugoi btw :3
What have you used to develop it? Besides kawaii mahou-shoujo magic.

Nanonymous No.5031 [D] >>5038 >>5039
Did anyone manage to get the CSS working on qutebrowser?
User CSS on qutebrowser works on other websites in the form of greasemonkey scripts like this:
[code]
// UserScript
// @match *://something.org/*
// @run-at document-end
// /UserScript

GM_addStyle (`

/* CSS rules... */

`);
[/code]
I'm only having trouble with nanochan, supposedly because of the CSP thing they were talking about earlier.
Anyone got any ideas about how to get around that on qutebrowser?

Nanonymous No.5038 [D] >>5041
>>5031
Never used qutebrowser before, but if there isn't a stylish equivalent for it, you could try disabling csp if possible, or switch to tampermonkey if you're okay with it, since the last time I tried injecting css with userscripts it never worked with greasemonkey for some reason

Nanonymous No.5039 [D][U][F] >>5041
File: abcd1a86222568657c050034bae79d72c1822aa4db92c0cecaa6f270f4fc34a0.png (dl) (1.24 MiB)
>>5031
If i remember well greasemonkey dropped support for GM_addStyle in API version 4, i suggest you switch to tampermonkey(closed source, lot of features, good CSP override methods) or violentmonkey(open source, simple, needs exra header to bypass CSP).
I can't test this on qutebrowser, but also try adding these 2 lines to the userscript header.

// @grant GM_addStyle
// @inject-into auto

The first grant authorization to use the GM_addStyle function, all GM function need authorization to be used.
Second is to make violentmonkey bypass CSP.
During my various experiments ricing nanochan, i noticed it's inline styles that are blocked by CSP, this means that adding HTML <style> elements it's not an option, so that only leaves you two options, GM_addStyle and direct property editing with JS, example:
document.querySelector("class_name").style.color = "#FFF";
If you can't make GM_addStyle work use direct property editing for simple CSS ricing.

Nanonymous No.5040 [D][U][F]
File: b9e57ee68536fbbbd4a8584ca058e073fc550dc67a0af53705ceb4878d0a0cad.png (dl) (401.51 KiB)
>>5021
>In dark CSS target post (the one you go to when clickin' on reflink) still have default background. Pls fix if not already.
I am pretty sure that i fixed that in one of june versions. Are you using last version? see: >>4720
Or just wait some days until i release the huge userscript i'm working on, since that will superseed all the features in this theme by a long shot.
(i know that i keep posticipating release, i'm optimizing the code right now)
>Your shi-es-esu is sugoi btw :3
t-thanks?
>What have you used to develop it? Besides kawaii mahou-shoujo magic.
I've used a simple text editor, tor browser dev tools and lot of kawaii mahou-shoujo magic, that's it ^_^

Nanonymous No.5041 [D] >>5042
>>5038
>you could try disabling csp if possible
It's not possible (I asked on their IRC).
>or switch to tampermonkey
Even though it uses chromium code in the backend, qutebrowser doesn't support chrome extensions.
It supports userscripts with greasemonkey syntax, but it's not actually running greasemonkey itself.

>>5039
>try adding these 2 lines to the userscript header
Doesn't help.
>direct property editing with JS
Yep, this works.
Guess I'll convert the theme into JS when I find some time to kill.
I'm not very familiar with webshit, if there's an easier way to go about this, please let me know.

Nanonymous No.5042 [D][U][F]
File: 5b4c3aaa9fd58db57719108ba46a85474000745fe1cb4a7b0fd602b2407c57f5.png (dl) (307.11 KiB)
>>5041
I actually didn't know qutebrowser had native userscript support, cool!
>I'm not very familiar with webshit, if there's an easier way to go about this, please let me know.
There a bunch of ways of doing it, each one is appropriate for different situations.
1. Edit single property on single element:
document.querySelector("a").style.textDecoration = "none";
Note that property names are transposed from kebab-case to camelCase and remember that querySelector only selects the first matched element, so this will change the style only of the first <a> element found.
2. Edit single property on multiple elements:
var a = document.querySelectorAll("a");
for(let temp = 0; temp < a.length; temp++) {
a[temp].style.color = "#FFF";
a[temp].style.textDecoration = "none";
}
This will iterate through all the <a> elements in the DOM and change color and remove underlines to each of them, problem with this is that you are changing styles 2 times each iteration, that means styles have to be recalculated two times for iteration.
3. Edit multiple properties on multiple elements:
var element = document.querySelectorAll("a");
for(let temp = 0; temp < element.length; temp++) {
element[temp].style.cssText = "color: #FFF; text-decoration: none;";
}
When you need to modify lot of properties this is better than previous method cause you can apply all the styles you want in one function and styles are recalculated once, but you are still limited to apply the style only to one selector...
4. Edit multiple properties on multiple elements with different selectors, AKA emulating CSS classes behavior:
// First add your new custom class to the interested elements, in this case all <p> and <a> elements.
var multiple_selector = document.querySelectorAll("p, a");
for(let temp = 0; temp < multiple_selector.length; temp++) {
multiple_selector[temp].classList.add("custom_class");
}
// Then when you want to apply the style to all the elements, you can just iterate the class and add the properties to the class.
var custom_color = "#FFF";
var custom_class = document.querySelectorAll(".custom_class");
for(let temp = 0; temp < custom_class.length; temp++) {
custom_class[temp].style.cssText = `color: ${custom_color}; text-decoration: none;`;
}
For lot of different styles that needs to be applied to different selectors this is most efficient method with plain JS, basically it is same as using CSS classes, you can insert whatever you want in the string of course, for example i changed the color with a variable and template literals expressions.
Some useful basic documentatiom:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals