[Javascript] Neopets CSS Editing Question

[Shoyru]

Hi!

I want to be able to change my theme to something more tailored to myself (getting rid of borders on certain classes, changing background colors, etc etc) but I seem to be running into some issues getting my script to run successfully.

Huge warning though: I barely understand Javascript and a lot of things I write are frankenscripts from other scripts people write

I like w35l3y's "use any theme" script, but the 'blink' of the old theme before loading the replacement is... annoying. And I'd like it to be more accessible for me to change things from time to time, and looking at that code I feel lost, LOL.

I've been trying to set CSS rules with Run-at document-start but I guess the actual CSS loading after my script is overwriting it? I don't actually know the problem.



// ==UserScript==
// name Neopets Theme Fixes
[Only registered and activated users can see links]
// Description little adjustments to make Neopets suck to look at less
[Only registered and activated users can see links]
[Only registered and activated users can see links]
// Run-at document-start
// ==/UserScript==

function addStyleString(str) {
var node = document.createElement('style');
node.innerHTML = str;
document.body.appendChild(node);
}

addStyleString('.sidebarModule { border:0px !important; }');
addStyleString('.sidebarTable { border:0px !important; }');
addStyleString('.sidebarHeader { border:0px !important; }');

Like, this doesn't work at all. It DOES work, however, if I set it as document-end, but that causes a blink as I see the original CSS load first...

tl;dr is there a way to edit the way Neopets looks without waiting for the entire page to load first

[Bat]

If you're using GreaseMonkey, then the earliest time that your script can be injected is at document-start (per this guide ([Only registered and activated users can see links].40run-at)). TamperMonkey is a lot more flexible. You can inject at document-body, which occurs when the page's body element is loaded, but before its contents have been rendered (per this guide ([Only registered and activated users can see links]_run_at)). If you wanted to manipulate the page layout faster than your eye can perceive the change, then you'd have to use TamperMonkey.

[Shoyru]

If you're using GreaseMonkey, then the earliest time that your script can be injected is at document-start (per this guide ([Only registered and activated users can see links].40run-at)). TamperMonkey is a lot more flexible. You can inject at document-body, which occurs when the page's body element is loaded, but before its contents have been rendered (per this guide ([Only registered and activated users can see links]_run_at)). If you wanted to manipulate the page layout faster than your eye can perceive the change, then you'd have to use TamperMonkey.

I am using Tampermonkey! Had no idea about these additional starting points though.

document-body doesn't seem to actually fix my problem, unfortunately. Doesn't actually apply the change. Neither did document-idle. document-end is the only one that applies any sort of cosmetic change with what I have written.

Maybe it's my code?

[Bat]

I am using Tampermonkey! Had no idea about these additional starting points though.

document-body doesn't seem to actually fix my problem, unfortunately. Doesn't actually apply the change. Neither did document-idle. document-end is the only one that applies any sort of cosmetic change with what I have written.

Maybe it's my code?

Executing your script on document-body may give you trouble if you're trying to append style elements to the body. Have you tried GM_addStyle? It generates stylesheet elements without appending them to the body, which may allow you to override the page layout faster.



[Only registered and activated users can see links]

GM_addStyle("body { background-color: #ff0000; }"); //Red background color!

[Shoyru]

Executing your script on document-body may give you trouble if you're trying to append style elements to the body. Have you tried GM_addStyle? It generates stylesheet elements without appending them to the body, which may allow you to override the page layout faster.



[Only registered and activated users can see links]

GM_addStyle("body { background-color: #ff0000; }"); //Red background color!

Oh, wonderful! That worked. Thanks so much. Figures my issue had the simplest solution. :rolleyes:
I hope I can come up with useful things for the community as well as little edits for myself, too.