Welcome to Pixpet!  Login or  Register Account   Resend Activation Email  Forgot Password? Dark Mode
Posts Overview
Page:  
12
Custom CSS/User Styles: A Compilation (31 Posts and 853 Views)
Topic Tags: #css
Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
5 Years ago
Feb 1st, 2019 - 11:22 PM
Nr. 1 #7931 14
Hi! I've messed around with some custom CSS for the site that I think that others may find useful.

CSS means Cascading Style Sheets, and it's what 'beautifies' HTML webpages. It changes colors, shapes, margins, and all kinds of fun stuff. By creating custom CSS for the site, we can alter its appearance-- both for fun and for utility. (Right now, it's mostly for aesthetics!)

Keep in mind that I'm not perfect; CSS can affect a lot of things in a lot of places, and I might have missed things in some places. Just ping me if anything looks wrong with the issue, and feel free to contribute to this guide as well!

At the moment I've only created one color scheme, but feel free to make suggestions, and I'll see if I can get around to making more!

Pixpets Dark Skin
A black-and-blue themed skin, useful for those who find white to be harsh on the eyes.
Github link
Preview



How to apply CSS
First, you'll need a browser extension that supports custom CSS. Note that this may alienate mobile users. My personal favorite is Stylus, which is available for both Firefox and Chrome.

Once you install the extension, it's as simple as pasting the CSS from Github into the extension. Make sure that it applies to all URLs on Pixpet.net. You may need to clear your cache (CTRL + F5, or in your Privacy settings) for all changes to take effect.

Thanks for coming by, and feel free to let me know if you have any questions!
lumiet's Signature
Member

Jan 6th, 2019
Posts: 15
Pixpets: 8
Pixdex: 7
5 Years ago
Feb 2nd, 2019 - 1:13 AM
Nr. 2 #7937
This is a really helpful quick guide and I really appreciate you putting in the time to make the dark theme setup. It's a lot easier on the eyes. So far I don't see anything terribly out of the ordinary with the style but I'll post in this thread again if I do.

Kudos on the good work.
Illkurok's Signature


chai squad


Member

Jan 3rd, 2019
Posts: 480
Pixpets: 60
Pixdex: 56
5 Years ago
Feb 2nd, 2019 - 6:24 AM
Nr. 3 #7959
@lumiet I've taken a notice to a few things and I wanted to let you know as soon as possible in case this was something missed. It mostly pertains to code on the forums -- everything else looks pretty darn good!

Quote boxes seems to not be affected, but custom boxes seem to not be recoloring the dark template. The same issue seems to appear for the spoiler tabs as well. Another minor detail is that any text that has been colored seems to be overwritten by the template, but I find that to be a really minor detail.

I've attached some images below so you have a visual reference!

Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
5 Years ago
Feb 2nd, 2019 - 9:20 AM
Nr. 4 #7970
thanks to both of you, first off!

i'll admit that i didn't test too much in the forums, so that doesn't surprise me too much lmao. i should have time to fix that tomorrow sometime, though, and hopefully do a bit more testing overall.
lumiet's Signature
Member

Jan 5th, 2019
Posts: 99
Pixpets: 39
Pixdex: 39
5 Years ago
Feb 2nd, 2019 - 9:41 AM
Nr. 5 #7971
Hi, so I'm not super savvy with coding, but I tried to import your code into stylish, a pretty popular chrome extension for CSS, but a few issues popped up. For the most part everything works, but stylish seems to be be reporting 51 issues. From what I can gather (i don't understand any of this by the way) it's having multiple issues with the use of "!important" , use of ID's in selectors, and that "Values of 0 shouldn't have units specified.". Some other one of issues are that " Attribute selectors with *= are slow!" and "5 Unknown property 'background-blend-mode". Again I don't know what any of this means but I think you should know since im guessing a lot of people will be using stylish.
Member

Nov 8th, 2018
Posts: 82
Pixpets: 235
Pixdex: 56
5 Years ago
Feb 2nd, 2019 - 9:51 AM
Nr. 6 #7973
@Longicaudatus
If switching extensions isn't a problem for you I'd personally recommend Stylus over Stylish. They are very similar, and the theme works great with Stylus^^
Kovu's Signature


Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
5 Years ago
Feb 2nd, 2019 - 10:36 AM
Nr. 7 #7976
i'm glad you brought this up, i meant to mention it in my main post. i highly suggest that you uninstall stylish; it's been pulled from both chrome and firefox extensions because it tracked user browsing data (source here, but there's a lot of articles discussing it). stylus is a popular alternative and it's what i used while writing this CSS, so it's definitely going to be compatible.
lumiet's Signature
Member

Jan 5th, 2019
Posts: 99
Pixpets: 39
Pixdex: 39
5 Years ago
Feb 2nd, 2019 - 12:31 PM
Nr. 8 #7981
Wow thanks for telling me, just uninstalled. I just checked and unfortunately it’s still on chrome web store tho, and is even the first option.
Member

Nov 8th, 2018
Posts: 82
Pixpets: 235
Pixdex: 56
5 Years ago
Mar 5th, 2019 - 5:58 PM
Nr. 9 #12076
@lumiet
Heya!
Since one of the recent updates made it that hovering your mouse over a notification lights it up I've been trying to figure out how to change the color of it but to no avail
Do you perhaps know how to make it a little less blinding? XD
And the list of online users maybe too lol
Kovu's Signature


Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
5 Years ago
Mar 5th, 2019 - 7:30 PM
Nr. 10 #12095 1
unfortunately my access to this site is limited for now, so i'll try to get to those tweaks when i'm able to get back to my laptop again- thanks for letting me know!
lumiet's Signature
Member

Nov 8th, 2018
Posts: 82
Pixpets: 235
Pixdex: 56
5 Years ago
Mar 6th, 2019 - 6:21 AM
Nr. 11 #12184
Alrighty! I'll be hoping you can figure this out, and in the meantime I'll try again XD
Kovu's Signature


Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
5 Years ago
Mar 27th, 2019 - 3:50 AM
Nr. 12 #14622 1
Hey guys, so sorry for the lack of updates, but I'm back now and I've addressed a couple issues that were brought up and that I saw. Everything has been updated on Github and shouldn't require more than another copy-and-paste.

Thank you for your patience!
lumiet's Signature
Member

Nov 8th, 2018
Posts: 82
Pixpets: 235
Pixdex: 56
5 Years ago
Mar 27th, 2019 - 3:58 AM
Nr. 13 #14623
Awesome news! Thank you :D
Kovu's Signature


Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
4 Years ago
Apr 7th, 2019 - 10:23 PM
Nr. 14 #16206 1
Pushed a small update today to account for the updated Friends interface, and also fixed the login page. ^^
lumiet's Signature
Member
Early Adopter
Discord Moderator

May 26th, 2018
Posts: 651
Pixpets: 135
Pixdex: 66
4 Years ago
Jul 3rd, 2019 - 10:24 PM
Nr. 15 #23260
Hey! I recently stopped being lazy and decided to try out the dark them, loving it so far! However, here's a tiny issue I noticed:



The "Go back" text is nearly invisible. Can that be fixed?
hunter-z's Signature
Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
4 Years ago
Jul 4th, 2019 - 1:14 AM
Nr. 16 #23269
ah yeah, i must not have tested that styling when it had a link in it hahah. will see if i can fix ^^
lumiet's Signature
Member

Jan 5th, 2019
Posts: 143
Pixpets: 208
Pixdex: 50
4 Years ago
Jul 4th, 2019 - 4:37 AM
Nr. 17 #23276
sorry for the delay but it should be all fixed now for all of the different kind of info boxes. that being said I couldn't test the exact issue because I wasn't sure where it was onsite, but it should be fine-- lmk if not!
lumiet's Signature
Member
Early Adopter
Discord Moderator

May 26th, 2018
Posts: 651
Pixpets: 135
Pixdex: 66
4 Years ago
Jul 4th, 2019 - 11:11 AM
Nr. 18 #23297
Thanks! Not sure how to check but if I happen to run into any issues again I'll let you know ^^
hunter-z's Signature
Member
Early Adopter
Discord Moderator

May 26th, 2018
Posts: 651
Pixpets: 135
Pixdex: 66
4 Years ago
Jul 11th, 2019 - 11:46 AM
Nr. 19 #23888
Found another few hard-to-read texts



Imo this one should be light rather than dark ^^
hunter-z's Signature
Member
Early Adopter
Discord Moderator

May 26th, 2018
Posts: 651
Pixpets: 135
Pixdex: 66
4 Years ago
Jul 17th, 2019 - 9:31 AM
Nr. 20 #24287
Got another one that came with the recent update!



The orange colors could be the same shade as the purple ones above :)
hunter-z's Signature
Page:  
12
Register
Not Registered Yet?
Join for free
Recent Activity
Pixpet Sponsor Support
Our Previous/Current Super Sponsors
Sponsor
Get your own Sponsor Banner on Pixpet (Rules) + 100 Pixpet Ticket Coupons/Month for Item Commissions!

Super Sponsor
Get your own Sponsor Banner on Pixpet (Rules) + Your Own Pixpet after 6 months support (not consecutive) on this tier! (Rules)
Totodile2064 Super Sponsor for 41 Months
bgyoshi Super Sponsor for 33 Months
Chicken_Raptor Super Sponsor for 16 Months
Dusk Super Sponsor for 15 Months
Tybaxel Super Sponsor for 6 Months
Sherrice Super Sponsor for 6 Months
Ignis Super Sponsor for 6 Months
Takkju Super Sponsor for 5 Months
Phoenix Super Sponsor for 4 Months
Kookaburra Super Sponsor for 2 Months
Isegard Super Sponsor for 1 Month
Become Pixpet Sponsor
Pixpet Chat
(slowly rebranding)  a...  Amu  AnimusReach (GreySkyMorning)  b...  Beebs (Bee)  Brisingr12  c...  c...  Carpo (ign: CarpoPyronite )  Celes โœจ(goldencelestine)  Charzea  cisee  ckolb  DarkStarDragon  DarylSun  Driverscissors  Dynosaur  ECDMDragon  Fandomzzz1234  Fandramon  Fren Derg  FruitJuiceKomodo  Gabe  Goatly  Hellsyswinged  Jinxie  Jyxxie  Kino_Kari  Komodo  Latimer  LAV  Leonidas (DraconisLeonidas)  Longicaudatus  LuciDatum  Mage Yoshi  maggicked  Masjack  MayuriTheTyrogue  Melia  Mew304  Moonlightelf  Nat  PearlyGirl  Pinkapop  Psicose  PuppyToast  Queen of Nightmares  Queenie  Rackiera  Rainbow is an artist  RainbowFox68  RedFeatheredReptile  Reetno  Rexsaurus  Silver  Skylark Starflower  Smidgey  Snake  Soulmates4Ever  SpyingEyes  Starfire Dragon  Steveni  SUNHELLION  Tangaroa  theBurnt  TwistedGate  Val  Zen00  Zetta  Zombie PigeonPun  ๐ŸŒˆ^^Niji_Crab^^๐Ÿ’ซ  ๐Ÿ”ณ๐Ÿ”ฒ 
Log in to join!
Social Media
Also subscribe to our other social media accounts if you want to stay informed!

6 Users Online (Last 15 Minutes)

Welcome our newest user: BettaGalaxy94
Most Users Online: 126 on Mar 19th, 2019 - 7:07 PM

Forum Stats: Total 45268 Posts in 2827 Topics.

Early Adopter Patreon Supporter Sponsor Super Sponsor Site Artist Discord Moderator Forum Moderator Forum Super Moderator Game Moderator Game Super Moderator Administrator