Difference between revisions of "Stylus"
From Roll20 Wiki
Andreas J. (Talk | contribs) m |
Andreas J. (Talk | contribs) m (→Toolbar Redesign) |
||
| (14 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | <noinclude>{{revdate}}{{main|Browser}}</noinclude> | + | <noinclude>{{revdate}}{{main|Browser}}</noinclude>'''Stylus''' is a browser plugin that can change how webpages look, and many roll20 users have created their own tricks and minor adjustments to Roll20 for personal use. Things like changing how certain tools look in Roll20, making a [[Dark Mode]], adjusting looks on [[CS|character sheets]], or how things look in the {{Text Chat}}. |
| − | + | ||
| − | '''Stylus''' is a plugin that can change how webpages look, and many roll20 users have created their own tricks and minor adjustments to Roll20 for personal use. Things like changing how certain tools look in Roll20, making a [[Dark Mode]], adjusting looks on [[CS|character sheets]], or how things look in the {{Text Chat}}. | + | |
| + | * Install Plugin: [https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en Chrome/Edge] | [https://addons.mozilla.org/en-US/firefox/addon/styl-us/ Firefox] | [https://cascadea.app/ Cascadea(Safari-alternative)] | ||
| + | * Latest megathread '''{{fpl|10802054/ Latest Show off Your Style 4: A New Hope}}''' April 2022 | ||
* Check '''{{fpl|9784281/ Show off Your Style 3: Third Time is the Charm}}''' for more info and good tricks others have created. The first post has a massive index of snippets to use | * Check '''{{fpl|9784281/ Show off Your Style 3: Third Time is the Charm}}''' for more info and good tricks others have created. The first post has a massive index of snippets to use | ||
| + | ** [[Hidden_Rolls#Blind_Rolls.28Stylus.29|Hidden Rolls]] - trick relies on Stylus to work | ||
** [[Using_Roll20_while_Playing_In-Person#User_Style_Manager|Play In-Person, Hide UI]] | ** [[Using_Roll20_while_Playing_In-Person#User_Style_Manager|Play In-Person, Hide UI]] | ||
| + | * [https://userstyles.org/styles/browse?search_terms=Roll20&type=false userstyles.org] - search for styles people have shared online for any sites. | ||
| + | ** [https://userstyles.org/users/404405 Userstyles by #Keith Curtis] made by [[Keith]] | ||
| + | * Older threads: | ||
** {{fpl|7841113/ Show Off Your Style 2: The Stylening!}} | ** {{fpl|7841113/ Show Off Your Style 2: The Stylening!}} | ||
** {{fpl|7209333/ Show Off Your Style}} | ** {{fpl|7209333/ Show Off Your Style}} | ||
| − | |||
| − | |||
| − | |||
| − | |||
'''Note:''' there is a similarly named extension "Stylish", but it's stealing your browser history [https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/ "Stylish" is back, and you still shouldn't use it] | '''Note:''' there is a similarly named extension "Stylish", but it's stealing your browser history [https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/ "Stylish" is back, and you still shouldn't use it] | ||
| + | <noinclude>__TOC__</noinclude> | ||
| + | |||
| + | <noinclude> | ||
| + | ==Stylus Snippets== | ||
| + | * https://app.roll20.net/forum/post/10695950/wrapping-macro-bar-when-you-have-many-buttons | ||
| + | * https://app.roll20.net/forum/post/11479684/stylus-script-for-stacking-names | ||
| + | ===Toolbar Redesign=== | ||
| + | Minor tweaks for the [[Toolbar Redesign|new toolbar]]: | ||
| + | |||
| + | By Jarren: | ||
| + | |||
| + | this code to make the left toolbar background transparent and not blurry: | ||
| + | <pre> | ||
| + | div.master-toolbar-outer#master-toolbar { background: transparent; backdrop-filter: none; } | ||
| + | </pre> | ||
| + | |||
| + | Or you can adjust the transparency of the entire toolbar (including the buttons) | ||
| + | <pre> | ||
| + | div.master-toolbar-outer#master-toolbar { opacity: 50%; } | ||
| + | </pre> | ||
| + | |||
| + | Maguillage: Transparency with fade-in, fade out: | ||
| + | <pre> | ||
| + | div#master-toolbar {opacity: 0.2; transition: opacity 1s ease-out 0.5s;} | ||
| + | div#master-toolbar:hover {opacity: 1; transition: opacity 0.2s ease-in 0s;} | ||
| + | </pre> | ||
| + | |||
| + | ===Dark Mode=== | ||
| + | </noinclude> | ||
| + | '''[[Dark Mode]]''' options: | ||
| + | {{:Dark Mode}} | ||
| + | <noinclude> | ||
| + | ===Display filesize/dimensions in Art Library=== | ||
| + | (by Keith) | ||
| + | |||
| + | Fix for {{Art Library}} | ||
| + | <pre data-language="css">#marketplaceresults li::after, | ||
| + | #recentuploads li::after{ | ||
| + | background-color: white; | ||
| + | content: attr(data-grid-width)"x"attr(data-grid-height); | ||
| + | display: inline-block; | ||
| + | font-size: 1em; | ||
| + | padding-left: 30px; | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | ===5E Sheet Dark Mode Red to purple=== | ||
| + | by keith | ||
| + | |||
| + | Stylus can use the CSS variable names. This code will change all {{5E}} red to purple, when you have [[Dark Mode]] on: | ||
| + | <pre data-language="css"> | ||
| + | .sheet-darkmode .npc .display .red span { | ||
| + | color: var(--dark-primary); | ||
| + | } | ||
| + | </pre> | ||
| − | + | [[Category:Web Browser]][[Category:Web Browser Extensions]] [[Category:Dark Mode]]</noinclude> | |
Latest revision as of 09:10, 31 December 2023
 | Page Updated: 2023-12-31 |
Stylus is a browser plugin that can change how webpages look, and many roll20 users have created their own tricks and minor adjustments to Roll20 for personal use. Things like changing how certain tools look in Roll20, making a Dark Mode, adjusting looks on character sheets, or how things look in the q Text Chat.
- Install Plugin: Chrome/Edge | Firefox | Cascadea(Safari-alternative)
- Latest megathread Latest Show off Your Style 4: A New Hope(Forum) April 2022
- Check Show off Your Style 3: Third Time is the Charm(Forum) for more info and good tricks others have created. The first post has a massive index of snippets to use
- Hidden Rolls - trick relies on Stylus to work
- Play In-Person, Hide UI
- userstyles.org - search for styles people have shared online for any sites.
- Userstyles by #Keith Curtis made by Keith
- Older threads:
- Show Off Your Style 2: The Stylening!(Forum)
- Show Off Your Style(Forum)
Note: there is a similarly named extension "Stylish", but it's stealing your browser history "Stylish" is back, and you still shouldn't use it
Contents |
[edit] Stylus Snippets
- https://app.roll20.net/forum/post/10695950/wrapping-macro-bar-when-you-have-many-buttons
- https://app.roll20.net/forum/post/11479684/stylus-script-for-stacking-names
[edit] Toolbar Redesign
Minor tweaks for the new toolbar:
By Jarren:
this code to make the left toolbar background transparent and not blurry:
div.master-toolbar-outer#master-toolbar { background: transparent; backdrop-filter: none; }
Or you can adjust the transparency of the entire toolbar (including the buttons)
div.master-toolbar-outer#master-toolbar { opacity: 50%; }
Maguillage: Transparency with fade-in, fade out:
div#master-toolbar {opacity: 0.2; transition: opacity 1s ease-out 0.5s;}
div#master-toolbar:hover {opacity: 1; transition: opacity 0.2s ease-in 0s;}
[edit] Dark Mode
Dark Mode options:
- Dark Mode(In-Game)
- Install | Roll20 Dark Cobalt(Forum) by Kirill S.
- Emoh's Darkness
- Roll20 Glass Theme - Firefox Extension | sourcecode
- Dark Mode(rest of Website)
[edit] Display filesize/dimensions in Art Library
(by Keith)
Fix for P Art Library
#marketplaceresults li::after,
#recentuploads li::after{
background-color: white;
content: attr(data-grid-width)"x"attr(data-grid-height);
display: inline-block;
font-size: 1em;
padding-left: 30px;
position: absolute;
right: 0;
}
[edit] 5E Sheet Dark Mode Red to purple
by keith
Stylus can use the CSS variable names. This code will change all D&D 5E by Roll20Character Sheet
red to purple, when you have Dark Mode on:
.sheet-darkmode .npc .display .red span {
color: var(--dark-primary);
}
