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:
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.
>>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
>>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.
>>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
>>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.
>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
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.
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.
>>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
>>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.
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
>>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):
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):
>>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?
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?
>>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.
>>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 >.<
>>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.
>>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.
>>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).
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):
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.
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.
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.
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.
>>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.
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.
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.
div#content {
margin-top: 28px !important;
margin-bottom: 28px !important; /* having last post sticked to browser's bottom border is very irritating */
}
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)
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
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
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.
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.
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?
>>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
>>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.
>>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 ^_^
>>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.
>>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
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: