Extensions required for use:
Tampermonkey or Greasemonkey (to enable script) https://www.tampermonkey.net/ (Navigation / Search Beta)See below.
Stylebot (to enable CSS edits) https://stylebot.dev/ (theme.css) See below.
01/28/2021 TNT has updated the beta layout, messing a little bit with any of the themes. Add the following codes to Stylebot to adjust for what has been updated.
.nav-profile-dropdown-clock__2020 {
border: none !important;
}
.nav-premium__2020 {
display:none;
}
The theme codes in the repository have already been updated to reflect this.
01/12/2021 The Quickref option will mess with the sidebar if you choose not to use an optional theme. The fix has been updated in the README.md in the Navigation Scripts folder.
01/11/2021 I'm the worst for all of the updates, but the Navigation Scripts have been updated so the Pet Image in the top left of the screen are now a link to Quickref.
01/11/2021 TNT ain't getting my coins for Premium, so I didn't know a new menu existed. It sits grossly, off-centered in the menu. You can hide it in your Stylebot CSS code by adding the following anywhere into the code:
.nav-premium__2020 {display: none;}
Thanks Amy for the suggestion!
01/11/2021 There have been a number of requests for specific themes. I love the overwhelming support, but specific theme requests will become daunting at a certain point. That said, I will be creating new themes as inspiration strikes. Rumor has it, Dr. Sloth really wants to use a dark theme... Check back for updates!
Navigation Notes: Original 2007 navigation links referenced. Inventory added to Shops for quick reference. Bookmarks section added for convenience.
The script to inject the navigation works separately from the CSS changes. The Navigation Script can be used without changing the CSS/Theme of your pages, however it has been designed to work optimally with the CSS/Theme changes active.
The CSS changes have been created in such a way that the template has been completely customizable. If you have knowledge of coding and CSS from petpages and userlookups, this will be very easy to change. The CSS Themes also update a lot of small aesthetic changes that TNT missed when updating (padding, text colors, font-faces, etc.)
These files apply currently to what TNT has released from their mobile-friendly layout update. Any future changes from TNT to the site may require revisions to both this script and the style page.
Both of these updates act as aesthetic changes and are only meant to change the user experience of playing Neopets. These changes are not meant to alter the aspect of online gaming in any way apart from UX.
Search function has been added to the footer. Unfortunately, it will search Google, but you can select the site you'd like it to search. I intended to recreate the search function of Neopets itself, but I was unable to, I suspect because of the way the results page is created (this is why I assume it's not working on the Beta as well).
The themes for this layout was designed to be aesthetically pleasing, Neopets related and simple.
Special thanks:
to Maya (sunbathr) for the inspiration
to Robbie (rawbeee) for the base css to play with
to the two friends who tested this code to ensure there were no missing parts
the non-Neopets friend who helped guide me through coding my first script.
M
- Download Stylebot Extension (https://stylebot.dev/)
- Stylebot > Options > New style
- Enter url: www.neopets.com
- Copy & paste CSS into the body - do not add style tags!
- Download Tampermonkey Extension (https://www.tampermonkey.net/)
- Tampermonkey > Dashboard > + (Add new script)
- Copy & paste code into the body > save as new script
- Alter HTML of links if you have included the bookmark option.
