Results 1 to 5 of 5

Thread: [Javascript] Neopets CSS Editing Question

  1. #1

    Shoyru's Avatar
    Joined
    Jan 2019
    Posts
    278
    Userbars
    5
    Thanks
    126
    Thanked
    610/149
    DL/UL
    20/0
    Mentioned
    12 times
    Time Online
    21d 15h 32m
    Avg. Time Online
    16m

    [Javascript] Neopets CSS Editing Question

    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 @(you need an account to see links)-at document-start but I guess the actual CSS loading after my script is overwriting it? I don't actually know the problem.

    Code:
    // ==UserScript==
    // @(you need an account to see links)         Neopets Theme Fixes
    // @version      0.1
    // @(you need an account to see links)cription  little adjustments to make Neopets suck to look at less
    // @author       Nerkmid
    // @include      (you need an account to see links)
    // @(you need an account to see links)-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

  2. #2
    *squeak*
    Bat's Avatar
    Joined
    Nov 2012
    Posts
    4,037
    Userbars
    153
    Thanks
    2,147
    Thanked
    46,342/3,558
    DL/UL
    34/1
    Mentioned
    1,751 times
    Time Online
    644d 29m
    Avg. Time Online
    3h 42m
    If you're using GreaseMonkey, then the earliest time that your script can be injected is at document-start (per (you need an account to see links)). 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 (you need an account to see links)). If you wanted to manipulate the page layout faster than your eye can perceive the change, then you'd have to use TamperMonkey.

  3. The Following User Says Thank You to Bat For This Useful Post:

    j03 (02-21-2019)

  4. #3

    Shoyru's Avatar
    Joined
    Jan 2019
    Posts
    278
    Userbars
    5
    Thanks
    126
    Thanked
    610/149
    DL/UL
    20/0
    Mentioned
    12 times
    Time Online
    21d 15h 32m
    Avg. Time Online
    16m
    Quote Originally Posted by Odd View Post
    If you're using GreaseMonkey, then the earliest time that your script can be injected is at document-start (per (you need an account to see links)). 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 (you need an account to see links)). 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?

  5. #4
    *squeak*
    Bat's Avatar
    Joined
    Nov 2012
    Posts
    4,037
    Userbars
    153
    Thanks
    2,147
    Thanked
    46,342/3,558
    DL/UL
    34/1
    Mentioned
    1,751 times
    Time Online
    644d 29m
    Avg. Time Online
    3h 42m
    Quote Originally Posted by Nerkmid View Post
    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.

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

  6. The Following User Says Thank You to Bat For This Useful Post:

    Shoyru (02-21-2019)

  7. #5

    Shoyru's Avatar
    Joined
    Jan 2019
    Posts
    278
    Userbars
    5
    Thanks
    126
    Thanked
    610/149
    DL/UL
    20/0
    Mentioned
    12 times
    Time Online
    21d 15h 32m
    Avg. Time Online
    16m
    Quote Originally Posted by Odd View Post
    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.

    Code:
    //@grant       GM_addStyle
    
    GM_addStyle("body { background-color: #ff0000; }"); //Red background color!
    Oh, wonderful! That worked. Thanks so much. Figures my issue had the simplest solution.
    I hope I can come up with useful things for the community as well as little edits for myself, too.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •