RolePlay onLine RPoL Logo

, welcome to RPoL Development

00:35, 29th March 2024 (GMT+0)

Responsive Site:  Color Schemes - Any good ones?

Posted by evileeyore
evileeyore
member, 394 posts
GURPS GM and Player
Sun 11 Oct 2020
at 01:11
  • msg #1

Responsive Site:  Color Schemes - Any good ones?

If you have some good ones, care to post the color codes and combos you used (even just a screen-shot of the preferences page).

I'm terrible at going through and figuring out what each thing is (like what even is "button background (gradient):" and "information boxes, success background:"?) so if someone has a decent "Dark Blue/Green" scheme (like the default Dark Marble at oRPoL) I'd be a very appreciative camper!
Sithraider
member, 208 posts
Momento Mori
Tue 12 Jan 2021
at 17:44
  • msg #2

Responsive Site:  Color Schemes - Any good ones?

I finally bit the bullet and spent an hour or so converting my r.rpol theme to my rpol theme. It's not exactly the same, but it's close enough for me. I use a tan/brown generic theme. Here is a pic, and color options I used.

Color Codes
https://i.postimg.cc/RVMbXKS7/...12-at-9-35-07-AM.png
https://i.postimg.cc/zGv21NR3/...12-at-9-35-24-AM.png
https://i.postimg.cc/qMjDYqq9/...12-at-9-35-38-AM.png


What it looks like

https://i.postimg.cc/0j9ZX1sk/...12-at-9-40-10-AM.png
https://i.postimg.cc/tT32zC8v/...12-at-9-41-39-AM.png
https://i.postimg.cc/C5J7Wrhj/...12-at-9-42-06-AM.png

And.. here's one in a schmurple scheme. I kind of like it, pretty easy on the 'ole eye strain.

Color Codes: Things not shown were not edited. Like the buttons.

https://i.postimg.cc/HLqB17Qk/...2-at-10-44-04-AM.png
https://i.postimg.cc/Hxb3Ys24/...2-at-10-44-16-AM.png
https://i.postimg.cc/PJ44D30C/...2-at-10-45-19-AM.png
https://i.postimg.cc/J0mxGVYw/...2-at-10-45-32-AM.png

How it looks:

https://i.postimg.cc/7Pm0g2fJ/...2-at-10-47-41-AM.png
https://i.postimg.cc/8PYvYgd1/...2-at-10-47-57-AM.png
https://i.postimg.cc/13NFh7MD/...2-at-10-48-29-AM.png
https://i.postimg.cc/5Nyvp2C7/...2-at-10-49-06-AM.png
This message was last edited by the user at 18:51, Tue 12 Jan 2021.
evileeyore
member, 434 posts
GURPS GM and Player
Joined August 2015
Wed 13 Jan 2021
at 05:57
  • msg #3

Responsive Site:  Color Schemes - Any good ones?

Thabks.  That's a good start, far sight better than the white setup.  One of these days I'll have to try to figure out what all those buttons are and migrate the Dark Theme over.
ladysharlyne
subscriber, 2976 posts
You get out of a game the
effort you put in it !!
Thu 14 Jan 2021
at 00:03
  • msg #4

Responsive Site:  Color Schemes - Any good ones?

Thanks for the details and color schemes so I can use these to change mine.  I’m not a techie but what you’ve done helps loads.  I’d love to see more like this.  Thanks again
Shannara
moderator, 3877 posts
When in doubt,
frolic!
Sun 17 Jan 2021
at 23:00

Responsive Site:  Color Schemes - Any good ones?

Here is one that I did - it's a dark (mostly black) theme with purples.

https://i.imgur.com/EzwXTgd.jpg

header, footer, side/navigation bars

collapsed all menus border (opaque):					663160	
collapsed top-left menu hover:						21101F	
footer hyperlink text:							5C3B87	
header and footer background:						141414	
header and footer text:							9E9DB5	
side menu 1, notification section background:				21101F	
side menu 1, notification section background, hover:			3F3C47	
side menu 2, thread or main menu section background:			21101F	
side menu 2, thread or main menu section background, hover:		3F3C47	
side menu 3, game navigation and search section background:		21101F	
side menu 3, game navigation and search section background, hover:	3F3C47	
side menu 4, your account section background:				21101F	
side menu 4, your account section background, hover:			3F3C47	
side menu link:								E0E0E0	
side menu text:								E0DFDE	
side menu, border bottom (opaque):					CCC4AB	
standard text:								49FFEB	
top menu background:							141414	
top menu, hyperlink hover background:					21101F	
top menu, hyperlink text:						C38CD1	
top menu, separator (opaque):						050505	

Overall site settings
button background (gradient):						CB96D9	58415E
button background, clicked (gradient):					FFFFFF	CCCCCC
button background, default when multiple (gradient):			EEEEFF	CCCCDD
button background, default when multiple, hover (gradient):		EEEEFF	DDDDEE
button background, hover (gradient):					1D0433	785C72
button border (top & left, bottom & right):				CCCCCC	AAAAAA
button border, clicked:							646EC4	
button border, hover (top & left, bottom & right):			AAAAAA	888888
button text:								F7F7F7	
button text shadow (opaque):						AAAAAA	
button text, hover:							FFC582	
die roller borders:							92836F	
help tip background, hover (opaque):					543B38	
help tip border, hover:							BB5555	
help tip shadow, hover:							AAAAAA	
help tip text, hover:							FFCCCC	
horizontal line (opaque):						8A8A8A	
hyperlink in body content:						9363DB	
hyperlink in body content, hover:					1D0433	
information boxes, alert background:					9748DB	
information boxes, border (opaque):					D6BA9F	
information boxes, default background:					221D2E	
information boxes, primary background:					2E3236	
information boxes, secondary background:				27382A	
information boxes, success background:					0A5C05	
information boxes, text:						FFFFFF	
information boxes, warning background:					F07000	
legend (at the bottom of pages) background:				141414	
main background:							141414	
maximum page width (1,000 to 2,000):					1350	
on/off toggle button selections, background on hover:			66BB66	
on/off toggle button selections, background on hover disable:		BB6666	
on/off toggle button selections, background on hover neutral:		777777	
on/off toggle button selections, background on selected:		55CC55	
on/off toggle button selections, background on selected disable:	CC5555	
on/off toggle button selections, background on selected neutral:	555555	
on/off toggle button selections, border:				444444	
on/off toggle button selections, border on selected:			448844	
on/off toggle button selections, border on selected disable:		884444	
on/off toggle button selections, border on selected neutral:		444444	
page background:							141414	
stand out heading background:						522020	
stand out heading text:							EBEDE1	
standard text:								D9D9D9

User generated content (within posts, sheets, descriptions, rMail etc)
background colour for table headers:					636363	

Messages, characters, sheets and descriptions
background colour:							141414	
background for message details when collapsed:				5C5C5E	
background for top and bottom page navigation bars:			4A4A4A	
content background:							141414	
divider between messages (opaque):					E1CAE3	
horizontal bar between links in message info:				836B59	
private lines within messages:						C84000	
quote background:							5D5D5F	
quote border:								CCCCCC	
system messages border top (opaque):					422E2C	
text for top and bottom page navigation bars:				D6D6D6
text colour:								8C8C8C	
your name in message information:					401E8F	

Thread lists (game threads, private threads, rMail)

thread list, border around each thread (opaque):			E6BB9C	
thread list, row background (even row numbers):				303030	
thread list, row background (odd row numbers):				212121	
thread list, row hover background:					000000	

Miscellaneous
colour for unread private messages, best if a blue:			104582	
colour for unread public and private messages, best if a purple:	46277D	
colour for unread public messages, best if a red:			FF4570	
main menu adult rated games, best if a red:				FF4570	
main menu game list for the line under each game (opaque):		B8B8B8	
main menu game list hover:						4A4A4A	
main menu game list text:						CB92F7	
main menu rated ming, best if a green:					008000	
main menu underline for headings (opaque):				6E6E6E	
main menu, support RPoL section:					353633	
main menu, support RPoL section, hover:					EDA29E	
stickylist background:							000000	
stickylist hover:							A4ABA1	
My theme is generally							dark	
evileeyore
member, 436 posts
GURPS GM and Player
Joined August 2015
Mon 18 Jan 2021
at 01:27
  • msg #6

Re: Responsive Site:  Color Schemes - Any good ones?

Shannara:
Here is one that I did - it's a dark (mostly black) theme with purples.

https://i.imgur.com/EzwXTgd.jpg

Oh, that's relief on my eyes.  I'll hive it a shot in the next couple of days.
evileeyore
member, 510 posts
GURPS GM and Player
Joined 20150819
Sat 24 Jul 2021
at 01:50
  • msg #7

Responsive Site:  Color Schemes - Any good ones?

Alrigthy, after most of a day going back and forth between the Glorious PC and the lowly mobile, I've developed a theme I think works pretty adequately.

I dub it "UltraDarkBumblebee"!

Header, footer, side/navigation bars  
collapsed all menus border (opaque):171717 
collapsed top-left menu hover:202020 
footer hyperlink text:FFD700 
header and footer background:171717 
header and footer text:C0C0C0 
side menu 1, notification section background:171717 
side menu 1, notification section background, hover:202020 
side menu 2, thread or main menu section background:171717 
side menu 2, thread or main menu section background, hover:202020 
side menu 3, game naviation and search section background:171717 
side menu 3, game naviation and search section background, hover:202020 
side menu 4, your account section background:171717 
side menu 4, your account section background, hover:202020 
side menu link:FFD700 
side menu text:C0C0C0 
side menu, border bottom (opaque):C0C0C0 
standard text:C0C0C0 
top menu background:171717 
top menu, hyperlink hover background:202020 
top menu, hyperlink text:FFD700 
top menu, separator (opaque):171717 
Overall site settings  
button background (gradient):202020252525
button background, clicked (gradient):252525303030
button background, default when multiple (gradient):202020252525
button background, default when multiple, hover (gradient):202020252525
button background, hover (gradient):202020252525
button border (top & left, bottom & right):202020252525
button border, clicked:303030 
button border, hover (top & left, bottom & right):202020252525
button text:C0C0C0 
button text shadow (opaque):AAAAAA 
button text, hover:DB0000 
die roller borders:606060 
help tip background, hover (opaque):303030 
help tip border, hover:DB0000 
help tip shadow, hover:AAAAAA 
help tip text, hover:DB0000 
horizontal line (opaque):606060 
hyperlink in body content:FFD700 
hyperlink in body content, hover:DB0000 
information boxes, alert background:FF0505 
information boxes, border (opaque):606060 
information boxes, default background:171717 
information boxes, primary background:202020 
information boxes, secondary background:252525 
information boxes, success background:32CD32 
information boxes, text:C0C0C0 
information boxes, warning background:FF4500 
legend (at the bottom of pages) background:171717 
main background:000000 
maximum page width (1,000 to 2,000):1350 pixels 
on/off toggle button selections, background on hover:00FF00 
on/off toggle button selections, background on hover disable:FF0000 
on/off toggle button selections, background on hover neutral:777777 
on/off toggle button selections, background on selected:32CD32 
on/off toggle button selections, background on selected disable:B22222 
on/off toggle button selections, background on selected neutral:252525 
on/off toggle button selections, border:606060 
page background:000000 
stand out heading background:171717 
stand out heading text:C0C0C0 
standard text:C0C0C0 
User generated content (within posts, sheets, descriptions, rMail etc)  
background colour for table headers:0F0F0F 
Messages, characters sheets and descriptions  
background colour:000000 
background for message details when collapsed:303030 
background for top and bottom page navigation bars:171717 
content background:000000 
divider between messages (opaque):606060 
horizontal bar between links in message info:606060 
private lines within messages:FF4500 
quote background:000000 
quote border:606060 
system messages border top (opaque):606060 
text colour:C0C0C0 
text for top and bottom page navigation bars:C0C0C0 
your name in message information:8B0000 
Threads lists (game threads, private threads, rMail)  
thread list, border around each thread (opaque):606060 
thread list, row background (even row numbers):000000 
thread list, row background (odd row numbers):171717 
thread list, row hover background:202020 
Miscellaneous  
colour for unread private messages, best if a blue:0000CD 
colour for unread public and private messages, best if a purple:800080 
colour for unread public messages, best if a red:8B0000 
main menu adult rated games, best if a red:FF4500 
main menu game list for the line under each game (opaque):505050 
main menu game list hover:202020 
main menu game list text:C0C0C0 
main menu rated ming, best if a green:00FF00 
main menu underline for headings (opaque):505050 
main menu, support RPoL section:171717 
main menu, support RPoL section, hover:202020 
stickylist background:000000 
stickylist hover:202020 

Chernobyl
supporter, 163 posts
Area of desolate waste,
Mutation Central.
Sat 24 Jul 2021
at 05:59
  • msg #8

Responsive Site:  Color Schemes - Any good ones?

After changing it all around, I kinda wish there was a) a way to import profiles from other users. b) a way to save your own unique profile

Bumblebee looking good though! :)
ladysharlyne
subscriber, 3142 posts
Member before Oct 2005
THE GLASS IS HALF FULL
Sat 24 Jul 2021
at 15:16
  • msg #9

Responsive Site:  Color Schemes - Any good ones?

Could we have the colour schemes you all come up with in a table form or with easy instructions for those like me who haven't a scooby what to put where though I am going to try to use this bumblebee one and see what I get.  It would just be a big help until the different colours are put in the preferences drop down.  Hey I am old and decrepit and really unsure of touching the schemes in fear I might mess something up for someone else let alone myself.

Signed
Clueless in Scotland
xx

Thanks for anyone's help. xxx
evileeyore
member, 511 posts
GURPS GM and Player
Joined 20150819
Sat 24 Jul 2021
at 18:18
  • msg #10

Responsive Site:  Color Schemes - Any good ones?

ladysharlyne:
Could we have the colour schemes you all come up with in a table form or with easy instructions for those like me who haven't a scooby what to put where though I am going to try to use this bumblebee one and see what I get.

I threw mine in a table format because it was easier on me than all the tabbing I'm pretty sure Shannara had to do to format hers.

quote:
Hey I am old and decrepit and really unsure of touching the schemes in fear I might mess something up for someone else let alone myself.

Good news, you can only mess up your own theme, so don't worry there.  And I'm not sure what all the stuff does either, I just starting putting in the Web Colour Codes (and using the nifty color tool to adjust them) until I found colors I liked and then as I made changes I flipped to pages to see what those changes did.  I'm still not sure what some things do, or where, as I never saw any differences.

I started by changing one thing to Fuschia [FF00FF] (because it isn't even close to a colour used in either default theme), saving, and then going through and reloading all the pages (not all, just all the main pages like Home, Chat, rMail, FAQs, and a few games that had most features being used in a thread) until I figured out what it did.  In some cases I never did figure out what something controlled so I just set it based on what it sounded like it did.  Hypertexts got Gold [FFD700] because I want them to pop, backgrounds are Black [000000] because "my eyes", Headers got 'Near Black' [171717] and the Hover overs for those got 'Very Dark Slate' (202020) again because "my eyes".  All text got Silver [C0C0C0] (which also includes some buttons because I didn't pay attention, but I ended up liking it that way even if I meant to do buttons another color) because while silver 'pops' it's just 'not bright enough' to not hurt at 3am when I'm looking at these and my eyes are tired and I should really be asleep but that insomnia and I'm rambling etc, and finally some stuff was left mostly alone (ON/OFF Buttons, New Post Alerts, etc), maybe shade shift to please my aesthetics but the "Alert Background" got Lime Green [32CD32] because I wanted it to grab my attention without completely punching me in the retinas.

So anyway, those were my reasons behind my colour choices and how I went about painfully making my choices and man once I realized some of that stuff was for Mobile (like durrrr) it was annoying to go back and change things all over again one thing at a time to see what it did on Mobile, but I think it was worth it.
ladysharlyne
subscriber, 3143 posts
Member before Oct 2005
THE GLASS IS HALF FULL
Sat 24 Jul 2021
at 21:04
  • msg #11

Responsive Site:  Color Schemes - Any good ones?

Thanks, Evil, for that explanation I appreciate it.  Because of my own eyesight I tend to use black alot.  I too want important things to POP!
Ski-Bird
subscriber, 177 posts
Sun 1 Aug 2021
at 02:32
  • msg #12

Responsive Site:  Color Schemes - Any good ones?



^^ I also use a darker theme.  Lots of grays, blacks and a teal-sort of color for buttons/text.

For the message background color I use black.  But the only thing is, it gets a bit weird to read some of the 'default' text colors against a background that dark (looking at you, Dark Blue).  It's worse if it's bolded.

Has anyone else out there found a dark-ish background color for messages that seems to work well?
Chernobyl
supporter, 164 posts
Area of desolate waste,
Mutation Central.
Sun 1 Aug 2021
at 03:01
  • msg #13

Responsive Site:  Color Schemes - Any good ones?

Does anybody know what sets the colour of the icons on the mobile site? My icons are way too dark using the bumblebee settings.

Cheers!
evileeyore
member, 516 posts
GURPS GM and Player
Joined 20150819
Sun 1 Aug 2021
at 03:15
  • msg #14

Responsive Site:  Color Schemes - Any good ones?

Chernobyl:
Does anybody know what sets the colour of the icons on the mobile site? My icons are way too dark using the bumblebee settings.

As far as I can tell the Icons are just images, you can not change their colors.  I recommend increasing the lightness of the Header Backgrounds a few shades.
ladysharlyne
subscriber, 3151 posts
Member before Oct 2005
THE GLASS IS HALF FULL
Sun 1 Aug 2021
at 14:48
  • msg #15

Responsive Site:  Color Schemes - Any good ones?

I bold all my "speech" in the colour I choose because I have eyesight issues, and it helps me to see these better than if not bolded, so to each their own on that one.   So others may have this same problem.
evileeyore
member, 517 posts
GURPS GM and Player
Joined 20150819
Sun 1 Aug 2021
at 15:21
  • msg #16

Responsive Site:  Color Schemes - Any good ones?

Ski-Bird:
For the message background color I use black.  But the only thing is, it gets a bit weird to read some of the 'default' text colors against a background that dark (looking at you, Dark Blue).  It's worse if it's bolded.

What ever background color you choose will have issues with at least one font colour as far as I can tell.  White has extreme issues with Yellow Fonts, very dark with very dark fonts, etc.  Basically you're picking the light intensity for the background and any coloured font you choose that is similar in intensity will a problem being seen.  I just highlight the coloured line in the games I'm in where people use dark blue font when I need to read it (and of course never use it for myself).
Ski-Bird
subscriber, 178 posts
Sun 1 Aug 2021
at 16:19
  • msg #17

Responsive Site:  Color Schemes - Any good ones?



I do the same when I'm on my desktop (highlight the text, I mean).  It's only a pain on my iPhone, but then my fix is to pinch/zoom until the text isn't as blurry.

Meh ... small price to pay for being able to tailor the entire site's color scheme.
bashful_batrean
member, 30 posts
Fri 29 Dec 2023
at 11:10
  • [deleted]
  • msg #18

Responsive Site:  Color Schemes - Any good ones?

This message was deleted by a moderator, as it was off-topic, at 11:59, Fri 29 Dec 2023.
Sign In