Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account
This post has been closed. You can still view previous posts, but you can't post any new replies.

Share Custom Styling for Roll20

1437600314

Edited 1437639816
Kryx
Pro
Sheet Author
API Scripter
It was mentioned that people should use chrome extensions to achieve a more pleasing roll20 layout. I went ahead and created a quick and dirty darker theme. Hopefully sharing it here isn't against any kind of Roll20 rules that I'm unaware of . It could surely use some improvement, but it's something. Preview images: css to use for a plugin like stylish: body { font-size: 13px; background-color: rgb(34, 34, 34); } .topbar .full,  .topbar .simple { background-color: rgb(150, 150, 150); } .menu a:hover { background: transparent; } .container h1, .container h2, .container h3, .container h4, .container h5, .container h6 { background: transparent !important; color: #008EB9; } .container { background-color: rgb(86, 86, 86); } .topbar .row:first-child { padding-top: 5px !important; padding-bottom: 5px !important; } .topbar .row:first-child img { height: 40px; } .topbar .row, .topbar .menu-hider, .topbar .btn-group { background: transparent !important; } .homegamelist .gameinfo { font-size: 16px; } .forum a { color: #51B0E0; } .redactor_editor a { color: #51B0E0 !important; } .redactor_editor, .redactor_editor:focus { background: transparent !important; color: #FFF7E9; } .redactor_box .redactor_editor, .redactor_box .redactor_editor:focus { color: black;     font-size: 15px; } .posts .postcontent, .posts .post .redactor_box { border-bottom: 3px solid #FFF7E9; font-size: 14px; } .h-feed { background: #ebecee; } .jumbointro .col-md-4 h2 { display: none; } .description, .meta { color: #FFF7E9 !important; } p { color: inherit; } Let me know if there is something that you think can be improved.
Totally fine with me :-)
1437604507

Edited 1437606064
Looks like you finished yours before I could make one I liked for myself. There's still LOTS of areas I want to tweak (like this ridiculous gap between the bottom of the thread and the Reply box), and it's sad that too many elements can't be easily swapped out for darker versions. One thing I'll need to find the class for is nested quotes, because for some reason they show up at least 2x the size of the actual post's text. So when you zoom out, the text of a post gets tiny, but the quoted text stays at least 1.5x to 2x the size. EDIT: Best I can figure is that for some reason, "blockquote" was given a font size of 17.5px, though for what purpose I have no clue. Removing that does the job. Also, the lack of a background/divide for forum titles was bugging me, so I added a modifier for ".forum h3 {background-color: #4b4b4b;}" which just cleans that up a bit. I'll probably be going through and seeing what else I can tweak.
1437605944

Edited 1437607013
oh yes, please update this config more and more. Maybe even give us some decent color option like pale blue or pale green ones. I installed the addon purely for roll20. That "white wall"-design was unbearable. So I really hope you guys here can tuen that config into something with an appropriate style, user-friendliness and readability! Edit: there seems to be a problem that the <h2> headline on the frontpage with the "From the Dev Team" vanishes. Donth know which other h2 headlines vanish aswell. Any idea?
1437623381
vÍnce
Pro
Sheet Author
Thanks for sharing Mark.  I've been using Stylish on roll20 for over a year and only recently disabled my custom style so I could "experience" the new look.  :-)
Looks good. Using transparent instead of a specific color is a great idea. I should have thought of that for my own take on the forums with Stylish.
This is working phenomenally on Stylish for Firefox . Huge thanks to Mark and HoneyBadger for their contributions!
1437952477
Kryx
Pro
Sheet Author
API Scripter
I'd actually recommend the "deluminate" plugin instead of using my CSS. It's nice, but too much work to maintain and round off all the edges.