https://wiki.roll20.net/api.php?action=feedcontributions&user=235259&feedformat=atomRoll20 Wiki - User contributions [en]2024-03-19T13:41:58ZUser contributionsMediaWiki 1.20.3https://wiki.roll20.net/Beginner%27s_Guide_to_GitHubBeginner's Guide to GitHub2021-12-20T21:49:45Z<p>235259: /* CLONE Your GitHub Repository to your Computer */</p>
<hr />
<div>{{revdate}}<br />
Submitting [[Character Sheets]], [[Character Sheet i18n|enabling translations for them]] and submitting [[API:Script Index|API Scripts]] to the community requires familiarity with {{repo| GitHub}}, and this is a guide to show the minimum needed to operate it. '''It's highly advisable to learn more than the minimum to spare yourself from headaches.'''<br />
{{clear}}{{NavSheetDoc}}<br />
See '''[[Beginner%27s_Guide_to_GitHub#Other_Guides|Other Guides]]''' for more.<br />
<br />
This document is a bare-bone guide to get you from "What in the world is Git?" to "Everybody should use my brand new character sheet!" as quickly as possible, without trying to teach you all the intricacies the system is capable of. Git is version control software and is underlying everything on GitHub, but this guide will ignore it, and focus on showing the steps how to send Roll20 your proposed Character Sheet or API updates.<br />
<br />
The '''[[Short Git Guide]]''' is an alternative to this guide that instead of using GitHub Desktop for some parts of the process, uses directly the [https://docs.gitlab.com/ee/gitlab-basics/start-using-git.html Git Command Line Interface(CLI)] to perform most steps, while still performing the final step of sending Roll20 the update through GitHub in the browser. <br />
<br />
The [[Beginner's_Guide_to_GitHub#Other_Guides |Other Guides]]-section contains more guides/resources for how Git/GitHub works that are more general in nature, and not necessarily tailor-made for Roll20-related things.<br />
__TOC__<br />
[[File:GitHub.png|thumb|right|500px|The {{repo|Roll20/roll20-character-sheets Roll20 Character Sheet repository}} on GitHub. ]]<br />
== What is Git/GitHub? ==<br />
'''Git''' is a piece of software that you install locally on your computer which handles version control for you.<br />
'''GitHub''' is a hosting service for '''Git''' repositories.<br />
So they are not the same thing: '''Git''' is the tool, '''GitHub''' is the service for projects that use '''Git'''. [https://jahya.net/blog/git-vs-github/ Brief comparison]<br />
<br />
See Also: '''[[Short_Git_Guide#Glossary|Git/GitHub Glossary]]'''<br />
<br />
There are several different ways to use Git. Git is very powerful, but in order to get the very most out of it you need to learn how to use the command line interface (CLI) ([https://imgs.xkcd.com/comics/git.png xkcd comic]). The [[Beginner's_Guide_to_GitHub#Other_Guides |Other Guides]]-section has additional reading about the CLI for those interested. However, everything that this document is going to be walking you through can be done using only GitHub Desktop GUI (very good at keeping your computers hard drive synchronized with your repository - See [[Beginner's_Guide_to_GitHub#CLONE_Your_Repository|Clone your Repository]]) and the GitHub web tools both of which are simplified tools to use the underlying Git.<br />
<br />
== Setup '''GitHub''' ==<br />
This is the steps & setup you only need to perform once to get you started with GitHub, and the [[#GitHub Branch-based Workflow, with Forks|GitHub Branch-based Workflow, with Forks]] will show how to do things if/when you submit changes beyond the first time.<br />
=== Create Your Account ===<br />
In order to use GitHub, you need to have an account on their website. You can create a paid account or you can create a free account. Unless you plan to create a large number of projects which you don't want to share with the world, there is no reason to create a paid account: the only difference between the various pricing levels is the number of private repositories you're allowed to have. Everyone, including free accounts, gets to have an unlimited number of public repositories.<br />
<br />
You will be dealing with the master Roll20 Repositories for roll20-character-sheets and/or roll20-api-scripts which are public repositories. You will also be creating a fork of these repositories, which might as well also be public, so for your Roll20 usages, a free account is all you need. <br />
<br />
=== '''FORK''' the Official Roll20 Repository ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">A ''fork'' is a copy/[https://docs.github.com/en/github/getting-started-with-github/github-glossary#clone clone] of another repository, with the difference that you are able to make direct changes to it. Forking a repository allows you to freely experiment with changes without affecting the original project.</blockquote><br />
[[Image:Fork.png|thumb|800px|center|"roll20-character-sheets" is the Character Sheets repository. For API Scripts, fork "roll20-api-scripts".]]<br />
<br />
Forking is easily done using GitHub. Click the Fork button on the official repository located at [https://github.com/Roll20/roll20-character-sheets https://github.com/Roll20/roll20-character-sheets] or [https://github.com/Roll20/roll20-api-scripts https://github.com/Roll20/roll20-api-scripts] as appropriate. This will create a copy of that repository in your account, which you will have permission to make changes to as you please. You ''can'' fork the repository as many times as you want, but you only ''need'' to fork it once. This new repository will have an address identical to the original, except instead of being at root "Roll20" will have a root of your GitHub account name. <br />
<br />
If you are working with another user on the same sheet or script, it may be a good idea to go into your new repository's settings and add them as a collaborator. The details of how to add a collaborator or work with a collaborator are beyond the scope of this tutorial, however.<br />
<br />
If you are familiar with [https://git-scm.com/ Git](which GitHub is basicly just a web-version/hosting platform of), you shouldn't need any other information to complete your character sheet submission. Everyone else, read on!<br />
<br />
=== '''CLONE''' Your GitHub Repository to your Computer ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">''Cloning'' a repository also makes a copy, but a cloned repository is used as a working copy and is on your local computer's hard drive as normal folders and files. Git maintains a link &ndash; by default named "origin" &ndash; between the folders and the repository it was cloned from.</blockquote><br />
[[Image:Clone.png|thumb|250px|The list will include all repositories on your account]]<br />
<br />
The reason why you forked Roll20's repository was because you don't have direct rights to edit it, and the reason why you then clone your forked Roll20's repository instead of Roll20's repository, is so you can update/send things from your computer to your Github repository, from where you then send the Pull Requests to Roll20's repository.<br />
<br />
For the beginner Git user, it is strongly recommend to download and install either [https://windows.github.com/ GitHub for Windows] or [https://mac.github.com/ GitHub for Mac] as appropriate for your operating system (Linux users need to directly use Git CLI or find an alternative for GitHub Desktop). These will hereafter be referred to in this document as "GitHub Desktop" or "the desktop app". In addition to being a simple way to install and setup Git version control on your computer, the GitHub desktop applications make it easy to link to your GitHub user account. It will tell you whenever your files on your computer are out of date with your repository on GitHub and allow you to easily synchronize the two. <br />
<br />
When you first run the GitHub application, it will prompt you to log in to your GitHub account. Then, click the large plus sign in the top left to Clone your repository. When you clone the repository, you'll be prompted to select a location to put the files. Make sure you select a location that you can find easily, you'll need to know where it is! If you get a new computer, installing the GitHub desktop and Cloning your repository is the only step that needs to be repeated. <br />
<br />
The desktop app also has the easiest interface for managing Branches. When you switch branches within the desktop application, it will add / remove / change files so that they match the last commit done from the branch you have switched to. <br />
<br />
If you're not using the GitHub application, you can find the clone url for your repository on the page for your repo. GitHub offers both SSH and HTTPS clone urls, as well as a Subversion checkout url. The details of cloning your repo manually are beyond the scope of this guide, however.<br />
<br clear=all><br />
<br />
== GitHub Branch-based Workflow, with Forks==<br />
The previous section's action & setup is only needed to do once. The following section describes the procedures that is recommended to do each time you want to submit a new update to Roll20.<br />
<br />
Alternatively, read the [[Short Git Guide]] for how you can use the Git CLI instead of GitHub Desktop for most things. The guide also have more clear method on how to keep your repository up to date with Roll20.<br />
<br />
=== Update your Repository to be on par with Roll20's Repository ===<br />
[[File:GitHub Compare.png|thumb|right|500px]]<br />
If you have just forked/cloned your repository a few minutes ago, it is still in sync. But if you are coming back to your repository after more than a week, some of the character sheets or API scripts will have been updated in Roll20's Repository, but this isn't automatically done to your Repository.<br />
<br />
While the updated things might not be related to the sheets you want to edit, it's still best to have your repository updated to be in sync with Roll20's. You do ''not'' need to create another fork, nor do you need to clone your repository again. You will need to update your Github repository's <code>master</code> branch(as well as any local copy copy of your repository on your computer) to be on par with Roll20 repository's <code>master</code> branch.<br />
<br />
* '''{{repo|KirstieJane/STEMMRoleModels/wiki/Syncing-your-fork-to-the-original-repository-via-the-browser a guide to sync your repository with Original}}'''<br />
<br />
When you are done with this, the files in the Roll20 master repository, your own Github repository, and your cloned repository on your computer should all be the same. <br />
<br />
Note that Github is making frequent upgrades to the UI. There is now a button labeled "Fetch Upstream" that makes sync'ing easy.<br />
<br clear=all><br />
<br />
=== Make a '''Branch''' ===<br />
''Recommended Read:'' '''[https://guides.github.com/introduction/flow/Understanding the GitHub's branch-based workflow]<br />
<br />
It is very strongly recommended to make a new branch for every update, and every separate project (character sheet or API script). For example if you are going to be updating two different API scripts at the same time, make a branch for each script. If a few weeks later you decide to make additional changes to the same script, make a new branch for the newer update. As a rule of thumb, make one new branch for every pull request. '''Roll20 is likely to reject or delay Pull Request that makes changes to more than one sheet.'''<br />
<br />
The desktop app also has the easiest interface for managing Branches. On the menu at the top, just pick "Branch / New branch". When you switch branches within the desktop application (The 2nd line allows you to switch the repository you are working on, and switch the current branch), it will add / remove / change files on your hard drive so that they match the last commit done from the branch you have switched to.<br />
<br />
=== '''COMMIT''' Your Changes and '''PUSH''' your commits ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">When you ''commit'' changes, you store a record of everything you changed as well as a human-readable description of what you've done upon your local computer. <br>You then ''push'' your commits to your repository.</blockquote><br />
Once you have a working copy of your repository cloned, you can make changes to it. This includes creating a new folder for your character sheet or API script and adding the source code to it, or making modifications to files already there. <br />
<br />
Many people, when developing Roll20 scripts or character sheets, do all of the actual editing in a [[Sheet_Author_Tips#Code_with_a_Proper_Text_Editor|text editor]] (for example notepad++). You can simply open the files on your hard drive (the ones created in the 'clone' step) in any text editor and make the changes in the editor. Whenever you wish to run the code on Roll20, hit {{button|Ctrl}}+{{button|A}} and {{button|Ctrl}}+{{button|C}} to select all the text, and copy it to the clipboard. Then paste it({{button|Ctrl}}+{{button|V}}) into the correct Roll20 campaign field. If additional changes are needed (for example debugging) it is often easiest to continually perform a cycle of edit, copy, paste and test.<br />
<br />
When you command the text editor to save your changes, it will finally write your changes to the file you have been editing, and GitHub Desktop will detect that the file you edited has changed and display the name of the file that has changed in its left pane, and in the right pane display a summary of what it detects as being different between the current save and the last commit that was made. However these changes have only been detected, GitHub does not actually made any record of these changes until you commit them. The Git experts recommend commiting often, as commiting gives you an off-site backup of your work, and a record of each commit. <br />
<br />
<center>[[File:Git Changed.png|thumb|1013px|center|You can't commit any change without a Summary, but the Description is optional]]</center><br />
<br />
Commiting is very simple. The desktop app has already done all the work of identifying what needs to be commited. Enter a title for the changes and ''optionally'' enter a longer description, commit the change by presing the "commit to (branch)" button. Make sure you make your commits to your working branch, not your master branch. Making frequent commits provides you with a detailed history of the changes you're making, as opposed to a single commit with everything once you're done. Note that there is a length limit to the Summary. However, if you exceed the limit, your message will automatically overflow into the longer Description. You can see this happening when text in the Summary field turns gray.<br />
<br />
As soon as you make the commit, GitHub desktop should display a large notice that there are No Local Changes. It should also suggest that you push your commit to the origin. Alternatively it might suggest that you "Publish Branch". Committing your changes still only stores them on your computer. In order to get those changes onto GitHub, you need to push them up to your origin, the repository being stored online. Simply push the "Push Origin" or "Publish Branch" button. Alternatively, at any time origin and clone are out of date there should be a very poorly labeled button in the upper right that has a number and an arrow on it. That should, among other nice things, sync everything between your repository and the clone, so you could push that instead. At the top of the desktop tool, the drop-down menu item "Repository - Push" will also get the job done. <br />
<br />
Continue to edit and make commits until your changes are complete and you have tested and debugged code ready to be submitted for the rest of roll20 to enjoy. You are now ready to request that the roll20 site administrators "pull" your changes into the official roll20 master repository.<br />
<br />
=== Create a '''PULL''' Request ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">As its name suggests, a ''pull'' is the opposite of a push. Instead of a copied repository sending commits to the original, the original asks for commits from the copy.</blockquote><br />
[[Image:Pull request button.png|thumb|511px]]<br />
On the webpage for your repository, there is a green button which says "Compare, review, create a pull request" when you hover over it. This button will take you to a page where you can create a pull request. If there are any differences between your repository ("head") and Roll20's version of the repository ("base"), they'll be displayed here. (Note that you can change what to use as both the head and the base by clicking the nearby "Edit" button.) <br />
<br />
'''Since your changes are all in your working branch, not your master branch, you want your pull request to come from your working branch.''' It is very important to never try to do a pull request from your master branch. Things that other people do get synced to your master, plus any other projects you might have also end up in your master. If you tell github to pull from your master, it might report that it is incorporating dozens, or even hundreds of commits into your pull request. Some of these might be for projects that are years old, or out of date, or wrong, or even some weird random files that should not be in your projects at all. This will complicate your pull request and might make it impossible to correctly update the files you want without messing up other projects. If this seems to happen to you, check to see if you started to pull from your master, and if so cancel or close the pull request and start a new pull request from your working branch. If worst comes to worst, copy all your work to a separate folder, and make another brand new branch that you can drop your files into. Always pull from the cleanest branch you can. <br />
<br />
If you pull from a clean, new branch then when you do a pull request from that working branch to the roll20 master branch, then only those commits specifically committed to the working branch will be included in the pull request.<br />
<br />
Because you don't have collaborator permissions on Roll20's repository, you can't perform the pull action yourself, but you can ''request'' someone else to perform the pull. Press the large green button labeled "Create pull request" and a pull request will be opened on the base repository.The people with permission to do so (ie, the Roll20 developers) can examine the pull request as well as the content of the changes proposed, and then merge the request into the official repository.<br />
<br />
'''For clarity's sake, please include the name of the sheet you have made changes for in the pull request, eg. "[Dungeondivers 3rd Edition] fixed broken Might roll".'''<br />
<br />
For character sheet submissions, remember to include [[sheet.json]] and a preview image &ndash; check the {{repo|Roll20/roll20-character-sheets/blob/master/README.md Sheet Repository Readme}} for more information. <br />
For API script submissions, remember to include <code>script.json</code> &ndash; check the {{repo|Roll20/roll20-api-scripts/blob/master/README.md API repository Readme}} for more information.<br />
Assuming everything is correct, your sheet or script should get added by Roll20's repo maintainer to the <code>[https://github.com/Roll20/roll20-character-sheets/blob/master/approved.yaml approved.yaml]</code> file and be available to all users!<br />
<br />
Once a week, Roll20 processes all available sheet requests. They usually start this process on Mondays after the weekly submit-deadline, and does their last changes on Tuesdays shortly before the weekly character sheet changes go live. When this occurs, you'll receive an email from GitHub. This email will either let you know a comment was left on your request regarding an issue that was discovered with your submission OR if your sheet was merged(because it was completed successfully).<br />
<br />
==== Making changes to your PULL Request ====<br />
<br />
If you create a pull request and then commit & push some additional changes to your repository/ working branch before the Pull Request is merged, those new changes will be automatically be updated/included in the original pull request; there is no need to make a second pull.<br />
<br />
=== Cleanup ===<br />
Do NOT delete any branch until all pull requests from that branch are completed and closed. Actually there is never any hurry to delete a branch at all. They don't hurt anything so long as you remember to only use each branch once. <br />
<br />
The GitHub software will recommend that you Merge your Branch back into master, '''but do not perform this action'''. This is a step that is needed with other workflows, but not in the Forking Workflow which we are using. Instead, we recommend synchronizing your fork with the roll20 master branch as the first step in preparing for your next update. This will bring the updates you just did (as well as any changes anybody else has done) into your fork.<br />
<br />
Therefore there is no cleanup that needs done. <br />
<br />
==GitHub Gist==<br />
[[File:GitHub-Gist.png|thumb|550px|right|Example of a Gist, showing the code changes comparison for the latest version and the previous one.]] <br />
[https://gist.github.com/ GitHub Gist] is a simple and smart way to share code with others, and is a lightweight option for sharing and updating code for your character sheets with other without having to go into detail with how to work with repositories, branches, commits and other things.<br />
<br />
Using a Gist enables you to easily update the code and have access to a clear change history for the code, so you and other see clearly what have changed from previous versions of your gist. This history can be accessed in the "Revisions"-tab.<br />
<br />
If you don't want to go through the trouble of forking the Roll20 repo or creating a repository just for sharing some code, Github Gist is a good alternative to other ways of sharing/hosting code many less regular programmer use such as [https://pastebin.com/ Pastebin], [https://www.dropbox.com/ Dropbox] or [https://drive.google.com Google Drive].<br />
<br />
* [https://docs.github.com/en/enterprise/2.13/user/articles/about-gists More about Gist]<br />
<br><br />
<br><br />
<br><br />
== Other Guides ==<br />
Here are links to various other guide on how to use GitHub and/or Git which are made for understanding them in general, and aren't tailored to how they apply to Roll20. <br />
<br />
These guides will give you a better understanding of Git/GitHub itself which which lends itself to better understanding when you encounter trouble with Roll20 related things, as this [[Beginner's Guide to GitHub]](and the [[Short Git Guide]] to a lesser extent) skims over many things to only learn the bare essential to operate GitHub/Git in Roll20 context, but doesn't really teach how they actually work.<br />
<br />
'''Understanding Git will make you understand GitHub better,''' and things related to it easier.<br />
<br />
Understanding Git/GitHub better is especially useful if you intend to collaborate/host own repositories for something like character sheet development for a specific sheet.<br />
<br />
====General====<br />
Some general guides on how to use Git or GitHub<br />
<br />
* {{forum|post/7282579/questions-about-github-advice-request-request-that-somebody-edit-beginners-guide-to-github-to-explain-a-bit-more Tips on how to use Github}}<br />
<br />
* [https://guides.github.com/introduction/flow/ The GitHub Workflow(visualization)] (not the flow we use, but a good visualization) and [https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow Forking Workflow] (what we use)<br />
<br />
* [https://rogerdudler.github.io/git-guide/ Git -The simple guide (command line tool)] by Roger Dudler<br />
<br />
* [https://www.atlassian.com/git/tutorials Atlassian Git Tutorials]<br />
<br />
* {{yt|watch?v=ISkPyNkM2iY | GitHub Workflow (GitHub Desktop)}} 6/22/16<br />
<br />
==== Git and Github for Poets Youtube Tutorial ====<br />
10-20 min long videos for non-technical people that teaches the basics on Git and Github, showing how to work with Github in the browser, but also have an intro to using the command line. It was made in 2016, but seems to still be accurate when viewed(March 2019)<br />
<br />
* {{yt|watch?v=BCQHnlnPusY&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV | 1.1 Git/GitHub intro}} 14 min<br />
<br />
* {{yt|watch?v=oPpnCh7InLY&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=2 | 1.2 Branches}} 12 min<br />
<br />
* {{yt|watch?v=_NrSWLQsDL4&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=3 | 1.3 Forks and Pull Requests}} 13 min<br />
<br />
==== Git and Github for Poets (beyond basics) ====<br />
* {{yt|watch?v=WMykv2ZMyEQ&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=4 | 1.4 GitHub Issues}} 12 min<br />
<br />
* {{yt|watch?v=oK8EvVeVltE&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=5 | 1.5 Intro to command line}} 9 min<br />
<br />
* {{yt|watch?v=yXT1ElMEkW8&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=6 | 1.6 Cloning Repo and Pull/Push}} 22 min<br />
<br />
* {{yt|watch?v=JtIX3HJKwfo&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=9 | 1.9 Resolve Merge Conflicts}} 9 min<br />
<br />
* {{yt|watch?v=lR_hYwCAaH4&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=10 | 1.10 Git Remotes}} 14 min<br />
<br />
* {{yt|watch?v=_sLgRBrZh6o | Git Workflow (command line)}} 7 min<br />
<br />
== See Also ==<br />
* [[Short Git Guide]] - A guide to use the command line version of Git to work on your computer with character sheets<br />
** [https://cli.github.com/ GitHub CLI beta] - Take GitHub to the command line, and create PRs in the CLI instead of through the GitHub website or the Desktop application.<br />
* [[Sheet Author Tips]] - Contains some advice related to GitHub/Git<br />
* [[Andreas Guide to Sheet Development]]<br />
* {{repo|Roll20/roll20-character-sheets Roll20 Character Sheet repository}}<br />
* {{repo|apps/pull Fork Update App}} - GitHub extension that automates the process of updating your fork. '''Warning:''' [[Sheet_Author_Tips#Install_Pull_to_GitHub|Read this]] before using it.<br />
<br /><br />
[[Category:Guides]]<br />
[[Category:Character Sheet Creation]]<br />
[[Category:External Tools]]</div>235259https://wiki.roll20.net/Beginner%27s_Guide_to_GitHubBeginner's Guide to GitHub2021-12-20T21:48:44Z<p>235259: /* CLONE Your GitHub Repository to your Computer */</p>
<hr />
<div>{{revdate}}<br />
Submitting [[Character Sheets]], [[Character Sheet i18n|enabling translations for them]] and submitting [[API:Script Index|API Scripts]] to the community requires familiarity with {{repo| GitHub}}, and this is a guide to show the minimum needed to operate it. '''It's highly advisable to learn more than the minimum to spare yourself from headaches.'''<br />
{{clear}}{{NavSheetDoc}}<br />
See '''[[Beginner%27s_Guide_to_GitHub#Other_Guides|Other Guides]]''' for more.<br />
<br />
This document is a bare-bone guide to get you from "What in the world is Git?" to "Everybody should use my brand new character sheet!" as quickly as possible, without trying to teach you all the intricacies the system is capable of. Git is version control software and is underlying everything on GitHub, but this guide will ignore it, and focus on showing the steps how to send Roll20 your proposed Character Sheet or API updates.<br />
<br />
The '''[[Short Git Guide]]''' is an alternative to this guide that instead of using GitHub Desktop for some parts of the process, uses directly the [https://docs.gitlab.com/ee/gitlab-basics/start-using-git.html Git Command Line Interface(CLI)] to perform most steps, while still performing the final step of sending Roll20 the update through GitHub in the browser. <br />
<br />
The [[Beginner's_Guide_to_GitHub#Other_Guides |Other Guides]]-section contains more guides/resources for how Git/GitHub works that are more general in nature, and not necessarily tailor-made for Roll20-related things.<br />
__TOC__<br />
[[File:GitHub.png|thumb|right|500px|The {{repo|Roll20/roll20-character-sheets Roll20 Character Sheet repository}} on GitHub. ]]<br />
== What is Git/GitHub? ==<br />
'''Git''' is a piece of software that you install locally on your computer which handles version control for you.<br />
'''GitHub''' is a hosting service for '''Git''' repositories.<br />
So they are not the same thing: '''Git''' is the tool, '''GitHub''' is the service for projects that use '''Git'''. [https://jahya.net/blog/git-vs-github/ Brief comparison]<br />
<br />
See Also: '''[[Short_Git_Guide#Glossary|Git/GitHub Glossary]]'''<br />
<br />
There are several different ways to use Git. Git is very powerful, but in order to get the very most out of it you need to learn how to use the command line interface (CLI) ([https://imgs.xkcd.com/comics/git.png xkcd comic]). The [[Beginner's_Guide_to_GitHub#Other_Guides |Other Guides]]-section has additional reading about the CLI for those interested. However, everything that this document is going to be walking you through can be done using only GitHub Desktop GUI (very good at keeping your computers hard drive synchronized with your repository - See [[Beginner's_Guide_to_GitHub#CLONE_Your_Repository|Clone your Repository]]) and the GitHub web tools both of which are simplified tools to use the underlying Git.<br />
<br />
== Setup '''GitHub''' ==<br />
This is the steps & setup you only need to perform once to get you started with GitHub, and the [[#GitHub Branch-based Workflow, with Forks|GitHub Branch-based Workflow, with Forks]] will show how to do things if/when you submit changes beyond the first time.<br />
=== Create Your Account ===<br />
In order to use GitHub, you need to have an account on their website. You can create a paid account or you can create a free account. Unless you plan to create a large number of projects which you don't want to share with the world, there is no reason to create a paid account: the only difference between the various pricing levels is the number of private repositories you're allowed to have. Everyone, including free accounts, gets to have an unlimited number of public repositories.<br />
<br />
You will be dealing with the master Roll20 Repositories for roll20-character-sheets and/or roll20-api-scripts which are public repositories. You will also be creating a fork of these repositories, which might as well also be public, so for your Roll20 usages, a free account is all you need. <br />
<br />
=== '''FORK''' the Official Roll20 Repository ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">A ''fork'' is a copy/[https://docs.github.com/en/github/getting-started-with-github/github-glossary#clone clone] of another repository, with the difference that you are able to make direct changes to it. Forking a repository allows you to freely experiment with changes without affecting the original project.</blockquote><br />
[[Image:Fork.png|thumb|800px|center|"roll20-character-sheets" is the Character Sheets repository. For API Scripts, fork "roll20-api-scripts".]]<br />
<br />
Forking is easily done using GitHub. Click the Fork button on the official repository located at [https://github.com/Roll20/roll20-character-sheets https://github.com/Roll20/roll20-character-sheets] or [https://github.com/Roll20/roll20-api-scripts https://github.com/Roll20/roll20-api-scripts] as appropriate. This will create a copy of that repository in your account, which you will have permission to make changes to as you please. You ''can'' fork the repository as many times as you want, but you only ''need'' to fork it once. This new repository will have an address identical to the original, except instead of being at root "Roll20" will have a root of your GitHub account name. <br />
<br />
If you are working with another user on the same sheet or script, it may be a good idea to go into your new repository's settings and add them as a collaborator. The details of how to add a collaborator or work with a collaborator are beyond the scope of this tutorial, however.<br />
<br />
If you are familiar with [https://git-scm.com/ Git](which GitHub is basicly just a web-version/hosting platform of), you shouldn't need any other information to complete your character sheet submission. Everyone else, read on!<br />
<br />
=== '''CLONE''' Your GitHub Repository to your Computer ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">''Cloning'' a repository also makes a copy, but a cloned repository is used as a working copy and is on your local computer's hard drive as normal folders and files. Git maintains a link &ndash; by default named "origin" &ndash; between the folders and the repository it was cloned from.</blockquote><br />
[[Image:Clone.png|thumb|250px|The list will include all repositories on your account]]<br />
<br />
The reason why you forked Roll20's repository was because you don't have direct rights to edit it, and the reason why you then clone your forked Roll20's repository instead of Roll20's repository, is so you can update/send things from your computer to your Github repository, from where you then send the Pull Requests to Roll20's repository.<br />
<br />
For the beginner Git user, It is strongly recommend downloading and installing either [https://windows.github.com/ GitHub for Windows] or [https://mac.github.com/ GitHub for Mac]as appropriate for your operating system(Linux users need to directly use Git CLI or find an alternative for GitHub Desktop). These will hereafter be referred to in this document as "GitHub Desktop" or "the desktop app". In addition to being a simple way to install and setup Git version control on your computer, the GitHub desktop applications make it easy to link to your GitHub user account. It will tell you whenever your files on your computer are out of date with your repository on GitHub and allow you to easily synchronize the two. <br />
<br />
When you first run the GitHub application, it will prompt you to log in to your GitHub account. Then, click the large plus sign in the top left to Clone your repository. When you clone the repository, you'll be prompted to select a location to put the files. Make sure you select a location that you can find easily, you'll need to know where it is! If you get a new computer, installing the GitHub desktop and Cloning your repository is the only step that needs to be repeated. <br />
<br />
The desktop app also has the easiest interface for managing Branches. When you switch branches within the desktop application, it will add / remove / change files so that they match the last commit done from the branch you have switched to. <br />
<br />
If you're not using the GitHub application, you can find the clone url for your repository on the page for your repo. GitHub offers both SSH and HTTPS clone urls, as well as a Subversion checkout url. The details of cloning your repo manually are beyond the scope of this guide, however.<br />
<br clear=all><br />
<br />
== GitHub Branch-based Workflow, with Forks==<br />
The previous section's action & setup is only needed to do once. The following section describes the procedures that is recommended to do each time you want to submit a new update to Roll20.<br />
<br />
Alternatively, read the [[Short Git Guide]] for how you can use the Git CLI instead of GitHub Desktop for most things. The guide also have more clear method on how to keep your repository up to date with Roll20.<br />
<br />
=== Update your Repository to be on par with Roll20's Repository ===<br />
[[File:GitHub Compare.png|thumb|right|500px]]<br />
If you have just forked/cloned your repository a few minutes ago, it is still in sync. But if you are coming back to your repository after more than a week, some of the character sheets or API scripts will have been updated in Roll20's Repository, but this isn't automatically done to your Repository.<br />
<br />
While the updated things might not be related to the sheets you want to edit, it's still best to have your repository updated to be in sync with Roll20's. You do ''not'' need to create another fork, nor do you need to clone your repository again. You will need to update your Github repository's <code>master</code> branch(as well as any local copy copy of your repository on your computer) to be on par with Roll20 repository's <code>master</code> branch.<br />
<br />
* '''{{repo|KirstieJane/STEMMRoleModels/wiki/Syncing-your-fork-to-the-original-repository-via-the-browser a guide to sync your repository with Original}}'''<br />
<br />
When you are done with this, the files in the Roll20 master repository, your own Github repository, and your cloned repository on your computer should all be the same. <br />
<br />
Note that Github is making frequent upgrades to the UI. There is now a button labeled "Fetch Upstream" that makes sync'ing easy.<br />
<br clear=all><br />
<br />
=== Make a '''Branch''' ===<br />
''Recommended Read:'' '''[https://guides.github.com/introduction/flow/Understanding the GitHub's branch-based workflow]<br />
<br />
It is very strongly recommended to make a new branch for every update, and every separate project (character sheet or API script). For example if you are going to be updating two different API scripts at the same time, make a branch for each script. If a few weeks later you decide to make additional changes to the same script, make a new branch for the newer update. As a rule of thumb, make one new branch for every pull request. '''Roll20 is likely to reject or delay Pull Request that makes changes to more than one sheet.'''<br />
<br />
The desktop app also has the easiest interface for managing Branches. On the menu at the top, just pick "Branch / New branch". When you switch branches within the desktop application (The 2nd line allows you to switch the repository you are working on, and switch the current branch), it will add / remove / change files on your hard drive so that they match the last commit done from the branch you have switched to.<br />
<br />
=== '''COMMIT''' Your Changes and '''PUSH''' your commits ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">When you ''commit'' changes, you store a record of everything you changed as well as a human-readable description of what you've done upon your local computer. <br>You then ''push'' your commits to your repository.</blockquote><br />
Once you have a working copy of your repository cloned, you can make changes to it. This includes creating a new folder for your character sheet or API script and adding the source code to it, or making modifications to files already there. <br />
<br />
Many people, when developing Roll20 scripts or character sheets, do all of the actual editing in a [[Sheet_Author_Tips#Code_with_a_Proper_Text_Editor|text editor]] (for example notepad++). You can simply open the files on your hard drive (the ones created in the 'clone' step) in any text editor and make the changes in the editor. Whenever you wish to run the code on Roll20, hit {{button|Ctrl}}+{{button|A}} and {{button|Ctrl}}+{{button|C}} to select all the text, and copy it to the clipboard. Then paste it({{button|Ctrl}}+{{button|V}}) into the correct Roll20 campaign field. If additional changes are needed (for example debugging) it is often easiest to continually perform a cycle of edit, copy, paste and test.<br />
<br />
When you command the text editor to save your changes, it will finally write your changes to the file you have been editing, and GitHub Desktop will detect that the file you edited has changed and display the name of the file that has changed in its left pane, and in the right pane display a summary of what it detects as being different between the current save and the last commit that was made. However these changes have only been detected, GitHub does not actually made any record of these changes until you commit them. The Git experts recommend commiting often, as commiting gives you an off-site backup of your work, and a record of each commit. <br />
<br />
<center>[[File:Git Changed.png|thumb|1013px|center|You can't commit any change without a Summary, but the Description is optional]]</center><br />
<br />
Commiting is very simple. The desktop app has already done all the work of identifying what needs to be commited. Enter a title for the changes and ''optionally'' enter a longer description, commit the change by presing the "commit to (branch)" button. Make sure you make your commits to your working branch, not your master branch. Making frequent commits provides you with a detailed history of the changes you're making, as opposed to a single commit with everything once you're done. Note that there is a length limit to the Summary. However, if you exceed the limit, your message will automatically overflow into the longer Description. You can see this happening when text in the Summary field turns gray.<br />
<br />
As soon as you make the commit, GitHub desktop should display a large notice that there are No Local Changes. It should also suggest that you push your commit to the origin. Alternatively it might suggest that you "Publish Branch". Committing your changes still only stores them on your computer. In order to get those changes onto GitHub, you need to push them up to your origin, the repository being stored online. Simply push the "Push Origin" or "Publish Branch" button. Alternatively, at any time origin and clone are out of date there should be a very poorly labeled button in the upper right that has a number and an arrow on it. That should, among other nice things, sync everything between your repository and the clone, so you could push that instead. At the top of the desktop tool, the drop-down menu item "Repository - Push" will also get the job done. <br />
<br />
Continue to edit and make commits until your changes are complete and you have tested and debugged code ready to be submitted for the rest of roll20 to enjoy. You are now ready to request that the roll20 site administrators "pull" your changes into the official roll20 master repository.<br />
<br />
=== Create a '''PULL''' Request ===<br />
<blockquote style="border:1px solid #aaa;background:#ccc;padding:10px">As its name suggests, a ''pull'' is the opposite of a push. Instead of a copied repository sending commits to the original, the original asks for commits from the copy.</blockquote><br />
[[Image:Pull request button.png|thumb|511px]]<br />
On the webpage for your repository, there is a green button which says "Compare, review, create a pull request" when you hover over it. This button will take you to a page where you can create a pull request. If there are any differences between your repository ("head") and Roll20's version of the repository ("base"), they'll be displayed here. (Note that you can change what to use as both the head and the base by clicking the nearby "Edit" button.) <br />
<br />
'''Since your changes are all in your working branch, not your master branch, you want your pull request to come from your working branch.''' It is very important to never try to do a pull request from your master branch. Things that other people do get synced to your master, plus any other projects you might have also end up in your master. If you tell github to pull from your master, it might report that it is incorporating dozens, or even hundreds of commits into your pull request. Some of these might be for projects that are years old, or out of date, or wrong, or even some weird random files that should not be in your projects at all. This will complicate your pull request and might make it impossible to correctly update the files you want without messing up other projects. If this seems to happen to you, check to see if you started to pull from your master, and if so cancel or close the pull request and start a new pull request from your working branch. If worst comes to worst, copy all your work to a separate folder, and make another brand new branch that you can drop your files into. Always pull from the cleanest branch you can. <br />
<br />
If you pull from a clean, new branch then when you do a pull request from that working branch to the roll20 master branch, then only those commits specifically committed to the working branch will be included in the pull request.<br />
<br />
Because you don't have collaborator permissions on Roll20's repository, you can't perform the pull action yourself, but you can ''request'' someone else to perform the pull. Press the large green button labeled "Create pull request" and a pull request will be opened on the base repository.The people with permission to do so (ie, the Roll20 developers) can examine the pull request as well as the content of the changes proposed, and then merge the request into the official repository.<br />
<br />
'''For clarity's sake, please include the name of the sheet you have made changes for in the pull request, eg. "[Dungeondivers 3rd Edition] fixed broken Might roll".'''<br />
<br />
For character sheet submissions, remember to include [[sheet.json]] and a preview image &ndash; check the {{repo|Roll20/roll20-character-sheets/blob/master/README.md Sheet Repository Readme}} for more information. <br />
For API script submissions, remember to include <code>script.json</code> &ndash; check the {{repo|Roll20/roll20-api-scripts/blob/master/README.md API repository Readme}} for more information.<br />
Assuming everything is correct, your sheet or script should get added by Roll20's repo maintainer to the <code>[https://github.com/Roll20/roll20-character-sheets/blob/master/approved.yaml approved.yaml]</code> file and be available to all users!<br />
<br />
Once a week, Roll20 processes all available sheet requests. They usually start this process on Mondays after the weekly submit-deadline, and does their last changes on Tuesdays shortly before the weekly character sheet changes go live. When this occurs, you'll receive an email from GitHub. This email will either let you know a comment was left on your request regarding an issue that was discovered with your submission OR if your sheet was merged(because it was completed successfully).<br />
<br />
==== Making changes to your PULL Request ====<br />
<br />
If you create a pull request and then commit & push some additional changes to your repository/ working branch before the Pull Request is merged, those new changes will be automatically be updated/included in the original pull request; there is no need to make a second pull.<br />
<br />
=== Cleanup ===<br />
Do NOT delete any branch until all pull requests from that branch are completed and closed. Actually there is never any hurry to delete a branch at all. They don't hurt anything so long as you remember to only use each branch once. <br />
<br />
The GitHub software will recommend that you Merge your Branch back into master, '''but do not perform this action'''. This is a step that is needed with other workflows, but not in the Forking Workflow which we are using. Instead, we recommend synchronizing your fork with the roll20 master branch as the first step in preparing for your next update. This will bring the updates you just did (as well as any changes anybody else has done) into your fork.<br />
<br />
Therefore there is no cleanup that needs done. <br />
<br />
==GitHub Gist==<br />
[[File:GitHub-Gist.png|thumb|550px|right|Example of a Gist, showing the code changes comparison for the latest version and the previous one.]] <br />
[https://gist.github.com/ GitHub Gist] is a simple and smart way to share code with others, and is a lightweight option for sharing and updating code for your character sheets with other without having to go into detail with how to work with repositories, branches, commits and other things.<br />
<br />
Using a Gist enables you to easily update the code and have access to a clear change history for the code, so you and other see clearly what have changed from previous versions of your gist. This history can be accessed in the "Revisions"-tab.<br />
<br />
If you don't want to go through the trouble of forking the Roll20 repo or creating a repository just for sharing some code, Github Gist is a good alternative to other ways of sharing/hosting code many less regular programmer use such as [https://pastebin.com/ Pastebin], [https://www.dropbox.com/ Dropbox] or [https://drive.google.com Google Drive].<br />
<br />
* [https://docs.github.com/en/enterprise/2.13/user/articles/about-gists More about Gist]<br />
<br><br />
<br><br />
<br><br />
== Other Guides ==<br />
Here are links to various other guide on how to use GitHub and/or Git which are made for understanding them in general, and aren't tailored to how they apply to Roll20. <br />
<br />
These guides will give you a better understanding of Git/GitHub itself which which lends itself to better understanding when you encounter trouble with Roll20 related things, as this [[Beginner's Guide to GitHub]](and the [[Short Git Guide]] to a lesser extent) skims over many things to only learn the bare essential to operate GitHub/Git in Roll20 context, but doesn't really teach how they actually work.<br />
<br />
'''Understanding Git will make you understand GitHub better,''' and things related to it easier.<br />
<br />
Understanding Git/GitHub better is especially useful if you intend to collaborate/host own repositories for something like character sheet development for a specific sheet.<br />
<br />
====General====<br />
Some general guides on how to use Git or GitHub<br />
<br />
* {{forum|post/7282579/questions-about-github-advice-request-request-that-somebody-edit-beginners-guide-to-github-to-explain-a-bit-more Tips on how to use Github}}<br />
<br />
* [https://guides.github.com/introduction/flow/ The GitHub Workflow(visualization)] (not the flow we use, but a good visualization) and [https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow Forking Workflow] (what we use)<br />
<br />
* [https://rogerdudler.github.io/git-guide/ Git -The simple guide (command line tool)] by Roger Dudler<br />
<br />
* [https://www.atlassian.com/git/tutorials Atlassian Git Tutorials]<br />
<br />
* {{yt|watch?v=ISkPyNkM2iY | GitHub Workflow (GitHub Desktop)}} 6/22/16<br />
<br />
==== Git and Github for Poets Youtube Tutorial ====<br />
10-20 min long videos for non-technical people that teaches the basics on Git and Github, showing how to work with Github in the browser, but also have an intro to using the command line. It was made in 2016, but seems to still be accurate when viewed(March 2019)<br />
<br />
* {{yt|watch?v=BCQHnlnPusY&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV | 1.1 Git/GitHub intro}} 14 min<br />
<br />
* {{yt|watch?v=oPpnCh7InLY&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=2 | 1.2 Branches}} 12 min<br />
<br />
* {{yt|watch?v=_NrSWLQsDL4&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=3 | 1.3 Forks and Pull Requests}} 13 min<br />
<br />
==== Git and Github for Poets (beyond basics) ====<br />
* {{yt|watch?v=WMykv2ZMyEQ&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=4 | 1.4 GitHub Issues}} 12 min<br />
<br />
* {{yt|watch?v=oK8EvVeVltE&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=5 | 1.5 Intro to command line}} 9 min<br />
<br />
* {{yt|watch?v=yXT1ElMEkW8&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=6 | 1.6 Cloning Repo and Pull/Push}} 22 min<br />
<br />
* {{yt|watch?v=JtIX3HJKwfo&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=9 | 1.9 Resolve Merge Conflicts}} 9 min<br />
<br />
* {{yt|watch?v=lR_hYwCAaH4&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&index=10 | 1.10 Git Remotes}} 14 min<br />
<br />
* {{yt|watch?v=_sLgRBrZh6o | Git Workflow (command line)}} 7 min<br />
<br />
== See Also ==<br />
* [[Short Git Guide]] - A guide to use the command line version of Git to work on your computer with character sheets<br />
** [https://cli.github.com/ GitHub CLI beta] - Take GitHub to the command line, and create PRs in the CLI instead of through the GitHub website or the Desktop application.<br />
* [[Sheet Author Tips]] - Contains some advice related to GitHub/Git<br />
* [[Andreas Guide to Sheet Development]]<br />
* {{repo|Roll20/roll20-character-sheets Roll20 Character Sheet repository}}<br />
* {{repo|apps/pull Fork Update App}} - GitHub extension that automates the process of updating your fork. '''Warning:''' [[Sheet_Author_Tips#Install_Pull_to_GitHub|Read this]] before using it.<br />
<br /><br />
[[Category:Guides]]<br />
[[Category:Character Sheet Creation]]<br />
[[Category:External Tools]]</div>235259https://wiki.roll20.net/Building_Character_Sheets/Auto-CalcBuilding Character Sheets/Auto-Calc2021-12-20T20:06:36Z<p>235259: /* Constants */</p>
<hr />
<div>{{revdate}}{{BCS}}<br />
<br />
<br />
'''Auto-Calculated Formula''' ('''Auto-Calc''' for short), is an older method for doing math on Roll20 [[Character Sheets]], from before [[Sheetworkers]] where created.<br />
{{NavSheetDoc}}<br />
It's a more simple method, but have several drawbacks, so most sheet authors recommend against using auto-calc in anything but the most simple sheets.<br />
<br />
__TOC__<br />
=Auto-Calc=<br />
For example, this would create a <code>StrMod</code>-attribute, which shows half the Strength value.<br />
<pre data-language="html" style="overflow:auto;"><br />
<input type="number" name="attr_StrMod" value="(@{Strength}/2)" disabled="true" /><br />
</pre><br />
<br />
These auto-calculating attributes can be used in Sheet Rolls, [[Macros]], and Abilities as normal.<br />
<br />
* '''[[CSS_Wizardry#Autocalc_Fields|Autocalc Fields]]''' on the [[CSS Wizardry]] page. <br />
* Auto-calc attributes can only include attributes from the current Character.<br />
* Auto-calc attributes can't include macros, abilities, or rolls...just basic math such as <code>(@{Intelligence}/2+@{Level})</code>.<br />
* Auto-calc attributes have access to the floor, round, and ceil functions, such as <code>(floor(@{Intelligence}/2))</code>.<br />
* Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code>, when attribute <code>b</code> has no value) will result in no output.<br />
* If your auto-calculated field depends of another auto-calculated field(s), '''you have to add parenthesis around intermediate formula(s)'''. Otherwise miscalculations could appear.<br />
<br />
<br />
When using sheetworkers, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
You can include an auto-calc formula in the default value for the field, and specify either <code>disabled="true"</code> or <code>readonly</code> attribute on the field. If you do so, the sheet will display the result of the formula instead of the formula itself.<br />
<br />
==Example==<br />
<pre data-language="html" style="overflow:auto;"><br />
<!--normal attributes--><br />
STR:<input type="number" name="attr_Strength" value="0" /><br />
Level:<input type="number" name="attr_Level" value="0" /><br />
<!--auto-calculated attributes--><br />
STR Mod:<input type="number" name="attr_StrMod" value="(@{Strength}/2)" disabled="true" /><br />
Total:<input type="number" name="attr_StrModLeveled" value="(@{StrMod})+(@{Level})" disabled="true" /><br />
</pre><br />
<br />
The <code>StrModLeveled</code>-attribute essentially sums up half of the character's Strength, plus the character's Level. <code>StrModLeveled</code> calls for <code>StrMod</code>, another auto-calc attribute, rather than <code>Strength</code> directly, which results in a more simple calculation that is easier to read.<br />
<br />
== Problems with using Auto-Calc==<br />
There are a number of drawbacks in using Auto-Calc values, and most Sheet Authors recommend using [[Sheet Worker Scripts|sheet worker scripts]] instead. The following is an incomplete list of problems that using Auto-Calc causes.<br />
<br />
* '''Auto-calculated attributes doesn't show up in a [[Token]]'s [[Token_Features#Radial_Menu_Bubbles_.281.29|bubble]] or bar'''. This can be fixed by replacing an auto-calc attribute with one that is updated with a sheetworker.<br />
* '''Auto-calc attributes can't be edited by sheetworkers'''. This causes problems with sheets that contains both auto-calc & sheetworker-backed attributes. The reason is the use of <code>disbled="true"</code> in auto-calc attributes.<br />
* '''When using sheetworkers, the value of the autocalc field you get is the formula itself, not the auto-calculated value.'''<br />
* '''Auto-calculating values will increase the load of a sheet''' when its opened, and as a result should be used sparingly or not at all. Back when there existed larger sheets with tons of auto-calc sections, those sheets where considerably slower to use.<br />
* '''Values aren't show on the A&A-tab'''<br />
* '''Calculations do not show up in the [[#Preview_Panel|Preview]]''', they only show on a character sheet in-game.<br />
<br />
<br />
See the '''[[Sheet_Worker_Scripts#Sheet_Workers_vs._Auto-Calculating_Fields:_Which_should_I_use.3F|Sheet Workers vs. Auto-Calculating Fields: Which should I use?]]''' for some comparisons.<br />
<br />
= Replicating the JavaScript Math Library =<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks mainly used by auto-calc formulas is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields.Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
== Constants ==<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
'''E'''<br />
<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
'''LN2'''<br />
<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
'''LN10'''<br />
<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
'''LOG2E'''<br />
<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
'''LOG10E'''<br />
<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
<br />
'''PI'''<br />
<br />
PI is the ratio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
'''SQRT1_2'''<br />
<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
'''SQRT2'''<br />
<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
'''Trivially Represented'''<br />
<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
'''abs(x)'''<br />
<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
'''cbrt(x)'''<br />
<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
'''ceil(x)'''<br />
<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
'''exp(x)'''<br />
<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
'''floor(x)'''<br />
<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
'''hypot(x, y, z, ...)'''<br />
<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
'''max(x, y, z, ...)'''<br />
<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
'''min(x, y, z, ...)'''<br />
<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
'''pow(x, y)'''<br />
<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
'''round(x)'''<br />
<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
'''sign(x)'''<br />
<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
'''sqrt(x)'''<br />
<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
'''trunc(x)'''<br />
<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
== Trigonometric Functions ==<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
'''*acos(x)'''<br />
<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
'''*acosh(x)'''<br />
<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html" style="overflow:auto; width:auto;"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
'''*asin(x)'''<br />
<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
'''*asinh(x)'''<br />
<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
'''*atan(x)'''<br />
<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
'''*atanh(x)'''<br />
<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
'''*atan2(y, x)'''<br />
<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
'''*cos(x)'''<br />
<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
'''*cosh(x)'''<br />
<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
'''*sin(x)'''<br />
<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
'''*sinh(x)'''<br />
<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
'''*tan(x)'''<br />
<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
'''*tanh(x)'''<br />
<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
== Other Transcendental Functions ==<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
'''*log(x)'''<br />
<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
'''*log1p(x)'''<br />
<br />
<code>log(1 + x)</code><br />
<pre data-language="html" style="overflow:auto; width:auto;"><br />
<input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled><br />
</pre><br />
<br />
'''*log10(x)'''<br />
<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
'''*log2(x)'''<br />
<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
== Other Functions ==<br />
The following functions don't really have a mathematical categorization.<br />
<br />
'''*clz32(x)'''<br />
<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
== Impossible to Implement ==<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
'''fround(x)'''<br />
<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
'''imul(x, y)'''<br />
<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
'''random()'''<br />
<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!<br />
<br />
=Tricks=<br />
* https://app.roll20.net/forum/post/4722432/sheetworker-autocalc-v0-dot-1-0/<br />
<br />
=Related pages=<br />
* [[Character Sheets]]<br />
** [[Building Character Sheets]]<br />
** [[Sheetworkers]] - the better, but more complex, alternative to using Auto-Calc values<br />
** [[Tokens]] - auto-calc attributes conflict with showing up on token bubbles & stat-bars<br />
** [[CSS_Wizardry#Autocalc_Fields]]<br />
<br></div>235259https://wiki.roll20.net/File:Consecutive10.pngFile:Consecutive10.png2019-10-02T11:11:19Z<p>235259: 235259 uploaded a new version of &quot;File:Consecutive10.png&quot;</p>
<hr />
<div>[[Category:Userbox Icons]]</div>235259https://wiki.roll20.net/File:Consecutive3.pngFile:Consecutive3.png2019-10-02T11:10:45Z<p>235259: 235259 uploaded a new version of &quot;File:Consecutive3.png&quot;</p>
<hr />
<div></div>235259https://wiki.roll20.net/File:Consecutive3.pngFile:Consecutive3.png2019-10-02T11:04:19Z<p>235259: </p>
<hr />
<div></div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:58:20Z<p>235259: </p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Pacific Time}}<br />
{{Userbox Base}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I am not currently taking requests of any kind.</div>235259https://wiki.roll20.net/File:Pacific_Time.pngFile:Pacific Time.png2019-10-02T10:57:17Z<p>235259: </p>
<hr />
<div></div>235259https://wiki.roll20.net/Template:Userbox_Pacific_TimeTemplate:Userbox Pacific Time2019-10-02T10:47:34Z<p>235259: Created page with "{{Userbox time zone|Pacific Time|Pacific Time Zone (North America)|40px}} <noinclude>Pacific </noinclude> <includeonl..."</p>
<hr />
<div>{{Userbox time zone|Pacific Time|Pacific Time Zone (North America)|[[Image:Pacific Time.png|40px]]}}<br />
<noinclude>[[Category:Userbox Templates|Pacific]]<br />
</noinclude><br />
<includeonly>[[Category:Pacific players]]</includeonly></div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:42:44Z<p>235259: </p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Base}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I am not currently taking requests of any kind.</div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:41:10Z<p>235259: /* Requests */</p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I am not currently taking requests of any kind.</div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:40:09Z<p>235259: /* Betrayal at House on the Hill */</p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I'll gladly write scripts on request, to the best of my ability and during my free time. <span class="plainlinks">[{{fullurl:User_talk:235259|action=edit&section=new}} Leave a comment]</span> on my talk page, and I'll see what I can do. Not all ideas are possible, as the API isn't perfect.</div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:39:36Z<p>235259: /* Automatic Fiasco */</p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
=== Betrayal at House on the Hill ===<br />
<br />
This project is currently on hold, largely due to desire for more interaction between cards/decks and the API.<br />
<br />
Status:<br />
* All images uploaded<br />
* Script for choosing characters is complete<br />
* Script for taking damage/healing characters is complete<br />
* Script for starting the haunt is laid out<br />
* Script for stunning monsters/recovering monsters is complete<br />
<br />
<br />
Needed:<br />
* Complete script to start the haunt (~2%)<br />
* Input the text of all haunts (~7%)<br />
* Create script to manage the room tiles<br />
* A means to search decks (incl. room stack) and peek at the top of decks; this may require implementing the omens/items/events in some way other than Roll20's deck mechanic.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I'll gladly write scripts on request, to the best of my ability and during my free time. <span class="plainlinks">[{{fullurl:User_talk:235259|action=edit&section=new}} Leave a comment]</span> on my talk page, and I'll see what I can do. Not all ideas are possible, as the API isn't perfect.</div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:39:23Z<p>235259: /* Pathfinder Adventure Card Game: Rise of the Runelords */</p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Automatic Fiasco ===<br />
<br />
This will, ideally, be a ''Fiasco'' table which can be run without anyone with GM privileges being present. However, this project is currently on hold.<br />
<br />
Status:<br />
* List and select playsets<br />
* Start and stop game<br />
* Join game/set character name<br />
* Select relationships, needs, locations, and objects<br />
* Establish/resolve scenes and grant white/black dice to self or others (depending on act)<br />
* Select tilt<br />
<br />
<br />
Needed:<br />
* Set text for relationships/etc.<br />
* Full tables for each playset (tied in with the above)<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
=== Betrayal at House on the Hill ===<br />
<br />
This project is currently on hold, largely due to desire for more interaction between cards/decks and the API.<br />
<br />
Status:<br />
* All images uploaded<br />
* Script for choosing characters is complete<br />
* Script for taking damage/healing characters is complete<br />
* Script for starting the haunt is laid out<br />
* Script for stunning monsters/recovering monsters is complete<br />
<br />
<br />
Needed:<br />
* Complete script to start the haunt (~2%)<br />
* Input the text of all haunts (~7%)<br />
* Create script to manage the room tiles<br />
* A means to search decks (incl. room stack) and peek at the top of decks; this may require implementing the omens/items/events in some way other than Roll20's deck mechanic.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I'll gladly write scripts on request, to the best of my ability and during my free time. <span class="plainlinks">[{{fullurl:User_talk:235259|action=edit&section=new}} Leave a comment]</span> on my talk page, and I'll see what I can do. Not all ideas are possible, as the API isn't perfect.</div>235259https://wiki.roll20.net/User:235259User:2352592019-10-02T10:38:47Z<p>235259: /* Campaigns */</p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Pathfinder Adventure Card Game: Rise of the Runelords ===<br />
<br />
This project will be a challenge, as deck-building games don't work particularly well in Roll20, but I don't get the opportunity to play with my physical copy of the game nearly enough. This is the first major API undertaking I've begun since the introduction of API command buttons in the chat pane, and I hope to leverage that ability to make up for the lack of card support.<br />
<br />
Status:<br />
* All of the card images have been uploaded<br />
** Exception: Cards from the Character Decks have not been scanned, as I don't currently own them<br />
* Database of card information is complete<br />
* Deck creation is complete<br />
* Board cleanup is complete<br />
<br />
<br />
Needed:<br />
* Coding for scenarios, especially those which have abnormal rules<br />
* Advance through scenarios<br />
* Add feats to characters<br />
<br />
=== Automatic Fiasco ===<br />
<br />
This will, ideally, be a ''Fiasco'' table which can be run without anyone with GM privileges being present. However, this project is currently on hold.<br />
<br />
Status:<br />
* List and select playsets<br />
* Start and stop game<br />
* Join game/set character name<br />
* Select relationships, needs, locations, and objects<br />
* Establish/resolve scenes and grant white/black dice to self or others (depending on act)<br />
* Select tilt<br />
<br />
<br />
Needed:<br />
* Set text for relationships/etc.<br />
* Full tables for each playset (tied in with the above)<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
=== Betrayal at House on the Hill ===<br />
<br />
This project is currently on hold, largely due to desire for more interaction between cards/decks and the API.<br />
<br />
Status:<br />
* All images uploaded<br />
* Script for choosing characters is complete<br />
* Script for taking damage/healing characters is complete<br />
* Script for starting the haunt is laid out<br />
* Script for stunning monsters/recovering monsters is complete<br />
<br />
<br />
Needed:<br />
* Complete script to start the haunt (~2%)<br />
* Input the text of all haunts (~7%)<br />
* Create script to manage the room tiles<br />
* A means to search decks (incl. room stack) and peek at the top of decks; this may require implementing the omens/items/events in some way other than Roll20's deck mechanic.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I'll gladly write scripts on request, to the best of my ability and during my free time. <span class="plainlinks">[{{fullurl:User_talk:235259|action=edit&section=new}} Leave a comment]</span> on my talk page, and I'll see what I can do. Not all ideas are possible, as the API isn't perfect.</div>235259https://wiki.roll20.net/User:235259User:2352592017-05-31T17:02:21Z<p>235259: </p>
<hr />
<div>{{Userboxtop|toptext=Subpages}}<br />
[[User:235259/Sandbox/CSS Wizardry|css wizardry]]{{dot}}<br />
[[User:235259/Sandbox/Formal Powercard Syntax|formal powercard syntax]]{{dot}}<br />
[[User:235259/Signature|signature]]{{dot}}<br />
[[User:235259/Sandbox|sandbox]]<br />
{{userboxbreak|toptext=About Me}}<br />
{{Userbox Central Time}}<br />
{{Userbox Mentor}}<br />
{{Userboxbreak|toptext=Achievements:}}<br />
{{Userbox Played With|100}}<br />
{{Userbox Played|10000}}<br />
{{Userbox Rollin}}<br />
{{Userbox Profile complete}}<br />
{{Userbox LFG}}<br />
{{Userbox Patron}}<br />
{{Userbox Gifted}}<br />
{{Userbox Sheet Auteur}}<br />
{{Userbox All Opinions}}<br />
{{Userbox Bug Hunter|10}}<br />
{{Userbox GM Count|1}}<br />
{{Userbox Never Ending Story}}<br />
{{Userbox Rolled|10000}}<br />
{{Userbox Script Runner}}<br />
{{Userbox Consecutive Days|10}}<br />
{{Userbox Scribe}}<br />
{{Userbox Tutorial}}<br />
{{userbox Arcane Scriptomancer}}<br />
{{Userboxbottom}}<br />
<br />
I have been using Roll20 since August, 2013. I started when I was trying to find an online battle grid for a D&D 4e campaign when we had multiple people joining via a conference call, and simply describing the layout of the battlefield was far too inefficient. One of the players, Eric V., recalled the Kickstarter for Roll20, and recommended that I look it up. My group has greatly enjoyed the features it grants, and I've gone as far as purchasing a Pro-level subscription.<br />
<br />
== Background ==<br />
I have approximately 10 years of experience with computer science, attending Rice University for computer science for four years. Since purchasing my Pro-level membership, I've been putting that knowledge to use when I can with the Roll20 API.<br />
<br />
My first tabletop roleplaying game was Vampire: the Masquerade in 2004, and I have since played:<br />
{{multicol|2=* Advanced Dungeons & Dragons<br />
* Black Crusade<br />
* Changeling: the Dreaming<br />
* Dark Ages: Mage<br />
* Dark Ages: Vampire<br />
* Dark Heresy<br />
* Deathwatch<br />
* Demon: the Fallen<br />
* The Dreaming<br />
* Dresden Files RPG<br />
* Dungeons & Dragons 3.5<br />
* Dungeons & Dragons 4e<br />
* Exalted<br />
* Exalted 2e<br />
* Fiasco<br />
* Iron Kingdoms<br />
* Legacy Crossing<br />
* Mage: the Ascension<br />
* Mage: the Awakening<br />
* Mage: the Socerer's Crusade<br />
* Mutants and Masterminds<br />
* Nobilis<br />
* Outbreak Undead<br />
* Paranoia<br />
* Unknown Armies<br />
* Unknown Ponies: Failure is Awesome<br />
* Vampire: the Masquerade<br />
* Werewolf: the Apocalypse<br />
* Wraith: the Oblivion}}<br />
<br />
<br />
I have also participated in three LARPs: Vampire: the Masquerade, an oWoD crossover (Vampire, Werewolf, and Changeling), and Exalted 2e.<br />
<br />
== Campaigns ==<br />
I am currently participating in a game of ''Unknown Armies''.<br />
<br />
== Projects ==<br />
<br />
=== Wiki Beautification ===<br />
<br />
As of January 16, 2015, there are:<br />
* 484 wanted pages, the vast majority of which are from links in default wikimedia content, or automatically generated from templates (eg, /sandbox and /testcases subpages of a template with {{tl|documentation}})<br />
* 179 long pages<br />
* 179 short pages<br />
* 83 uncategorized files<br />
* 80 dead-end pages<br />
* 28 unused files (several caused by the deletion of [[Script:Custom Power Cards]])<br />
* 27 orphaned pages<br />
* 9 unused templates, one of which is marked as a candidate for deletion, 5 are used in the article deletion process, and 2 are caused by errors<br />
* 7 wanted categories<br />
* 4 uncategorized pages, three of which I do not have permissions to edit and therefore cannot categorize<br />
* 3 unused categories, although two ought to be empty, and the third is the target of a soft redirect which contains pages I can't edit<br />
* 1 uncategorized category ([[:Category:Docs]]), which I do not have permissions to edit and therefore cannot categorize<br />
* 1 broken redirects, although the target should be re-created eventually<br />
* 0 wanted templates<br />
* 0 uncategorized templates<br />
* 0 wanted files (plus 39 links to a redirected file name)<br />
* 0 double redirects<br />
<br />
=== Pathfinder Adventure Card Game: Rise of the Runelords ===<br />
<br />
This project will be a challenge, as deck-building games don't work particularly well in Roll20, but I don't get the opportunity to play with my physical copy of the game nearly enough. This is the first major API undertaking I've begun since the introduction of API command buttons in the chat pane, and I hope to leverage that ability to make up for the lack of card support.<br />
<br />
Status:<br />
* All of the card images have been uploaded<br />
** Exception: Cards from the Character Decks have not been scanned, as I don't currently own them<br />
* Database of card information is complete<br />
* Deck creation is complete<br />
* Board cleanup is complete<br />
<br />
<br />
Needed:<br />
* Coding for scenarios, especially those which have abnormal rules<br />
* Advance through scenarios<br />
* Add feats to characters<br />
<br />
=== Automatic Fiasco ===<br />
<br />
This will, ideally, be a ''Fiasco'' table which can be run without anyone with GM privileges being present. However, this project is currently on hold.<br />
<br />
Status:<br />
* List and select playsets<br />
* Start and stop game<br />
* Join game/set character name<br />
* Select relationships, needs, locations, and objects<br />
* Establish/resolve scenes and grant white/black dice to self or others (depending on act)<br />
* Select tilt<br />
<br />
<br />
Needed:<br />
* Set text for relationships/etc.<br />
* Full tables for each playset (tied in with the above)<br />
<br />
=== Character Sheets ===<br />
<br />
I am responsible for the following character sheets:<br />
* [[Arkham Horror]]<br />
* [[DFRPG]]<br />
* [[Exalted 2e]] (with Benjamin Bandelow)<br />
* [[Exalted 3e]] (version 2)<br />
* [[Unknown Armies]]<br />
* [[Unknown Ponies]]<br />
* [[Yogsquest]]<br />
<br />
<br />
Games using the Storyteller system (World of Darkness, etc.) are also heavily influenced by my work on the Exalted 2e sheet, which was runner-up in the Character Sheet contest held at feature launch of the community character sheets system. I have also assisted in solving problems encountered by other users in making various sheets, and I designed the Quintessence Wheel for the [[Mage: the Ascension]] sheet.<br />
<br />
=== Betrayal at House on the Hill ===<br />
<br />
This project is currently on hold, largely due to desire for more interaction between cards/decks and the API.<br />
<br />
Status:<br />
* All images uploaded<br />
* Script for choosing characters is complete<br />
* Script for taking damage/healing characters is complete<br />
* Script for starting the haunt is laid out<br />
* Script for stunning monsters/recovering monsters is complete<br />
<br />
<br />
Needed:<br />
* Complete script to start the haunt (~2%)<br />
* Input the text of all haunts (~7%)<br />
* Create script to manage the room tiles<br />
* A means to search decks (incl. room stack) and peek at the top of decks; this may require implementing the omens/items/events in some way other than Roll20's deck mechanic.<br />
<br />
== Git Notes ==<br />
These are simply some notes to myself on the git command line. The following are much more advanced processes than for example what I wrote about in [[Beginner's Guide to GitHub]]. These notes are intended for myself and no explanation is given to accompany them. Utilize at your own risk.<br />
<br />
=== Delete a Commit ===<br />
Back up to Head - N or a specific commit:<br />
<pre data-language="git"><br />
git reset --hard HEAD~1<br />
git reset --hard sha1<br />
</pre><br />
<br />
Force the push<br />
<pre data-language="git"><br />
git push origin HEAD --force<br />
</pre><br />
<br />
=== Sync a Fork ===<br />
<pre data-language="git"><br />
git fetch upstream<br />
git merge upstream/master<br />
git push origin<br />
</pre><br />
<br />
=== Force Overwrite of Fork ===<br />
Overwrites everything in the local copy with the original (upstream, the official repo), then uses that to overwrite the fork (origin).<br />
<pre data-language="git"><br />
git fetch upstream<br />
git reset --hard upstream/master<br />
git push origin HEAD --force<br />
</pre><br />
<br />
== Requests ==<br />
I'll gladly write scripts on request, to the best of my ability and during my free time. <span class="plainlinks">[{{fullurl:User_talk:235259|action=edit&section=new}} Leave a comment]</span> on my talk page, and I'll see what I can do. Not all ideas are possible, as the API isn't perfect.</div>235259https://wiki.roll20.net/User:235259/Sandbox/CSS_WizardryUser:235259/Sandbox/CSS Wizardry2017-05-11T22:35:17Z<p>235259: 235259 moved page User:235259/Sandbox/CSS Wizardry to CSS Wizardry: Done with sandbox, ready for general consumption</p>
<hr />
<div>#REDIRECT [[CSS Wizardry]]</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T22:35:16Z<p>235259: 235259 moved page User:235259/Sandbox/CSS Wizardry to CSS Wizardry: Done with sandbox, ready for general consumption</p>
<hr />
<div>Learning CSS and HTML can be daunting. And yet, if you want to [[Building Character Sheets|create a character sheet]] for Roll20, both are required.<br />
<br />
This page gives a number of examples for creative way to leverage the character sheet system. Most of these tips involve CSS and were pulled from the <span class="plainlinks">[https://app.roll20.net/forum/post/882997/css-wizardry/?pagenum=1 CSS Wizardry]</span> thread in the Character Sheets forum, but some tips don't necessarily involve CSS at all.<br />
<br />
Many of these tips also include links to a live demo on [http://jsfiddle.net JSFiddle], so you can see them in action.<br />
<br />
== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[http://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
[http://jsfiddle.net/m2atx752/ Live Demo]<br />
<br />
CSS gradients can do all kinds of interesting things. Here's an example of creating a clock-shaped representation of a value:<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-harm-section"><br />
<input type="radio" value="0" name="attr_harm" class="sheet-harm-checkbox sheet-harm-0" checked>0<br />
<input type="radio" value="1" name="attr_harm" class="sheet-harm-checkbox sheet-harm-3">3<br />
<input type="radio" value="2" name="attr_harm" class="sheet-harm-checkbox sheet-harm-6">6<br />
<input type="radio" value="3" name="attr_harm" class="sheet-harm-checkbox sheet-harm-9">9<br />
<input type="radio" value="4" name="attr_harm" class="sheet-harm-checkbox sheet-harm-10">10<br />
<input type="radio" value="5" name="attr_harm" class="sheet-harm-checkbox sheet-harm-11">11<br />
<input type="radio" value="6" name="attr_harm" class="sheet-harm-checkbox sheet-harm12">12<br />
<hr><br />
<div class="sheet-clock"></div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-harm-section {<br />
display: inline-block;<br />
text-align: center;<br />
}<br />
<br />
.sheet-clock {<br />
width: 5em;<br />
height: 5em;<br />
display: inline-block;<br />
border-radius: 50%;<br />
background: black;<br />
border: 2px solid black;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-clock {<br />
background: white;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, white 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-clock {<br />
background-image: linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-clock {<br />
background-image: linear-gradient(210deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-clock {<br />
background-image: linear-gradient(240deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-clock {<br />
background-color: black;<br />
}</pre><br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!<br />
<br />
[[Category:Tips]]<br />
[[Category:User content]]</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T22:34:17Z<p>235259: </p>
<hr />
<div>Learning CSS and HTML can be daunting. And yet, if you want to [[Building Character Sheets|create a character sheet]] for Roll20, both are required.<br />
<br />
This page gives a number of examples for creative way to leverage the character sheet system. Most of these tips involve CSS and were pulled from the <span class="plainlinks">[https://app.roll20.net/forum/post/882997/css-wizardry/?pagenum=1 CSS Wizardry]</span> thread in the Character Sheets forum, but some tips don't necessarily involve CSS at all.<br />
<br />
Many of these tips also include links to a live demo on [http://jsfiddle.net JSFiddle], so you can see them in action.<br />
<br />
== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[http://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
[http://jsfiddle.net/m2atx752/ Live Demo]<br />
<br />
CSS gradients can do all kinds of interesting things. Here's an example of creating a clock-shaped representation of a value:<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-harm-section"><br />
<input type="radio" value="0" name="attr_harm" class="sheet-harm-checkbox sheet-harm-0" checked>0<br />
<input type="radio" value="1" name="attr_harm" class="sheet-harm-checkbox sheet-harm-3">3<br />
<input type="radio" value="2" name="attr_harm" class="sheet-harm-checkbox sheet-harm-6">6<br />
<input type="radio" value="3" name="attr_harm" class="sheet-harm-checkbox sheet-harm-9">9<br />
<input type="radio" value="4" name="attr_harm" class="sheet-harm-checkbox sheet-harm-10">10<br />
<input type="radio" value="5" name="attr_harm" class="sheet-harm-checkbox sheet-harm-11">11<br />
<input type="radio" value="6" name="attr_harm" class="sheet-harm-checkbox sheet-harm12">12<br />
<hr><br />
<div class="sheet-clock"></div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-harm-section {<br />
display: inline-block;<br />
text-align: center;<br />
}<br />
<br />
.sheet-clock {<br />
width: 5em;<br />
height: 5em;<br />
display: inline-block;<br />
border-radius: 50%;<br />
background: black;<br />
border: 2px solid black;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-clock {<br />
background: white;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, white 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-clock {<br />
background-image: linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-clock {<br />
background-image: linear-gradient(210deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-clock {<br />
background-image: linear-gradient(240deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-clock {<br />
background-color: black;<br />
}</pre><br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!<br />
<br />
[[Category:Tips]]<br />
[[Category:User content]]</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T21:36:12Z<p>235259: /* Swap Visible Areas */</p>
<hr />
<div>== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[http://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
[http://jsfiddle.net/m2atx752/ Live Demo]<br />
<br />
CSS gradients can do all kinds of interesting things. Here's an example of creating a clock-shaped representation of a value:<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-harm-section"><br />
<input type="radio" value="0" name="attr_harm" class="sheet-harm-checkbox sheet-harm-0" checked>0<br />
<input type="radio" value="1" name="attr_harm" class="sheet-harm-checkbox sheet-harm-3">3<br />
<input type="radio" value="2" name="attr_harm" class="sheet-harm-checkbox sheet-harm-6">6<br />
<input type="radio" value="3" name="attr_harm" class="sheet-harm-checkbox sheet-harm-9">9<br />
<input type="radio" value="4" name="attr_harm" class="sheet-harm-checkbox sheet-harm-10">10<br />
<input type="radio" value="5" name="attr_harm" class="sheet-harm-checkbox sheet-harm-11">11<br />
<input type="radio" value="6" name="attr_harm" class="sheet-harm-checkbox sheet-harm12">12<br />
<hr><br />
<div class="sheet-clock"></div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-harm-section {<br />
display: inline-block;<br />
text-align: center;<br />
}<br />
<br />
.sheet-clock {<br />
width: 5em;<br />
height: 5em;<br />
display: inline-block;<br />
border-radius: 50%;<br />
background: black;<br />
border: 2px solid black;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-clock {<br />
background: white;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, white 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-clock {<br />
background-image: linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-clock {<br />
background-image: linear-gradient(210deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-clock {<br />
background-image: linear-gradient(240deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-clock {<br />
background-color: black;<br />
}</pre><br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T21:35:33Z<p>235259: /* Clocks */</p>
<hr />
<div>== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[https://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
[http://jsfiddle.net/m2atx752/ Live Demo]<br />
<br />
CSS gradients can do all kinds of interesting things. Here's an example of creating a clock-shaped representation of a value:<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-harm-section"><br />
<input type="radio" value="0" name="attr_harm" class="sheet-harm-checkbox sheet-harm-0" checked>0<br />
<input type="radio" value="1" name="attr_harm" class="sheet-harm-checkbox sheet-harm-3">3<br />
<input type="radio" value="2" name="attr_harm" class="sheet-harm-checkbox sheet-harm-6">6<br />
<input type="radio" value="3" name="attr_harm" class="sheet-harm-checkbox sheet-harm-9">9<br />
<input type="radio" value="4" name="attr_harm" class="sheet-harm-checkbox sheet-harm-10">10<br />
<input type="radio" value="5" name="attr_harm" class="sheet-harm-checkbox sheet-harm-11">11<br />
<input type="radio" value="6" name="attr_harm" class="sheet-harm-checkbox sheet-harm12">12<br />
<hr><br />
<div class="sheet-clock"></div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-harm-section {<br />
display: inline-block;<br />
text-align: center;<br />
}<br />
<br />
.sheet-clock {<br />
width: 5em;<br />
height: 5em;<br />
display: inline-block;<br />
border-radius: 50%;<br />
background: black;<br />
border: 2px solid black;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-clock {<br />
background: white;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, white 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-clock {<br />
background-image: linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-clock {<br />
background-image: linear-gradient(210deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-clock {<br />
background-image: linear-gradient(240deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-clock {<br />
background-color: black;<br />
}</pre><br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T18:30:11Z<p>235259: /* Clocks */</p>
<hr />
<div>== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[https://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T18:29:16Z<p>235259: /* Five Ways to Use an Attribute */</p>
<hr />
<div>== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. The main difference is the default styling: the span will look just like the surrounding text.<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[https://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T17:51:49Z<p>235259: /* Five Ways to Use an Attribute */</p>
<hr />
<div>== Five Ways to Use an Attribute ==<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[https://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T17:34:12Z<p>235259: /* Swap Visible Areas */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[https://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T17:29:46Z<p>235259: /* Swap Visible Areas */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T00:30:37Z<p>235259: /* Counting Items */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T00:20:32Z<p>235259: /* Counting Items */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T00:10:10Z<p>235259: /* Styling Roll Buttons */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T00:07:01Z<p>235259: /* Styling Roll Buttons */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-11T00:03:23Z<p>235259: /* Cycling Button */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T23:48:49Z<p>235259: /* Cycling Button */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Cycling Button ==<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T23:16:45Z<p>235259: /* Replicating the JavaScript Math Library */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T22:13:23Z<p>235259: /* Replicating the JavaScript Math Library */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Replicating the JavaScript Math Library ==</div>235259https://wiki.roll20.net/Template:)Template:)2017-05-10T22:11:23Z<p>235259: </p>
<hr />
<div>}<noinclude>{{documentation}}</noinclude></div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T22:08:52Z<p>235259: /* Styling Repeating Sections */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T21:50:08Z<p>235259: /* Styling Repeating Sections */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T21:49:32Z<p>235259: /* Styling Select Dropdowns */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}</div>235259https://wiki.roll20.net/CSS_WizardryCSS Wizardry2017-05-10T21:31:38Z<p>235259: /* Styling Select Dropdowns */</p>
<hr />
<div>== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}</div>235259https://wiki.roll20.net/Dice_ReferenceDice Reference2017-05-09T16:31:07Z<p>235259: /* Math Operators and Functions */</p>
<hr />
<div>Roll20 features support for a wide array of dice mechanics. On this page we've compiled a list of all of the different types of dice rolls you can perform. Each type also has an interactive example box where you can make actual rolls using the same roll system that's built in to Roll20 -- a great way to experiment and check to make sure we can support your role playing game system of choice. Don't see a dice mechanic your game system needs, or think something is done incorrectly? [mailto:team@roll20.net Get in touch and let us know!]<br />
<br />
{{mbox | text = Want to skip straight to the 'nitty-gritty'? Check out the [[Dice_Reference#Roll20 Dice Specification|Dice Specification]] for the really advanced stuff!}}<br />
<br />
<br />
== How to Roll Dice ==<br />
<br />
Rolling dice in Roll20 is easy. Just type the <code>/roll</code> command into the text chat box, followed by a formula. In most cases, the formula is the same as the one that's printed in your game's instructions. For example, you might know that to roll an attack roll you need to roll a &quot;D20 plus your attack modifier&quot;. In Roll20, you would just type <code>/roll d20+5</code>. If you hit and you need to roll 3d6+2 damage, you would just type <code>/roll 3d6+2</code>. Finally, you can also string multiple rolls together. If you have an attack that does two types of damage, you might do <code>/roll 2d6+5 + d8</code>.<br />
<br />
<div class='diceroller'><br />
/roll 1d20+5<br />
</div><br />
<br />
After the roll is performed, you'll see the results of the roll in the text chat area. Notice that for each group of dice that were rolled, there will be a group of numbers in parentheses, representing the result of each individual dice that was rolled. (The number sits on an outline of the dice type rolled, and this outline is in the same color as the square of color in the dice-roller's player portrait in the Player Area.) You'll also see the total of all the dice values plus modifiers to the right of the equal sign.<br />
<br />
== Rolling in Secret ==<br />
<br />
By default, any rolls that you make are seen by everyone in the game with you (including all players). If you want to roll in secret, you can use the <code>/gmroll</code> command to perform a roll that only the GM and the original player who made the roll can see. So if you're the GM, doing a <code>/gmroll</code> will only be visible to you. It's a great way to perform skill checks in secret.<br />
<br />
== Including Additional Information ==<br />
<br />
You can also include non-formula text in your roll to indicate what that roll is for. For example, when rolling for initiative you might enter <code>/roll 1d20+5 Roll for Initiative</code>. The extra text won't affect your roll in any way, but it's included in the chat log so that others can see what you're rolling for. It's entirely optional to do this, by the way, but some GMs find it helps keep everything organized a little better.<br />
<br />
<div class="diceroller"><br />
/roll 1d20+5 Roll for Initiative<br />
</div><br />
<br />
If you want to include any numbers, parentheses, or <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, or <code>%</code> in your additional text, you can preface it with a <code>\</code> to separate the formula from the text and keep the roller from getting confused. So for example you can do <code>/roll 1d20+5 \ +5 Roll for Initiative</code>.<br />
<br />
If you want to include additional comments before the end of the roll (we call them &quot;inline labels&quot;), use square brackets. For example, <code>/roll 2d20+5[Fire Damage] + 3d6+5[Ice Damage]</code>. When these comments are applied directly after a die roll they show up as tool-tips on the dice:<br />
<br />
<div class="diceroller"><br />
/roll 2d10+2d6[crit]+5 Critical Hit!<br />
</div><br />
<br />
== Inline Dice Rolls ==<br />
<br />
If you want a more compact roll representation, you can take advantage of inline dice rolls. Inline rolls are just like regular rolls, with the following exceptions:<br />
<br />
* You can use them in any chat message, not just a roll. For example, you can do a regular chat message, an emote, or a whisper, with an inline roll included.<br />
* They are evaluated completely before any /roll commands, so you can use them as "random variables" in your rolls.<br />
* You will only see the result of the total roll, and you can hover over the result to see the individual dice rolls.<br />
* If an inline roll contains a crit success, it will be highlighted with a green box. If there's a crit failure, it's highlighted in red. If it has both (because there was more than one roll), it's in blue. Also when you mouse-over the inline roll to see the details of the roll, it'll show red and green highlights for the rolls themselves for crits/fumbles.<br />
<br />
<br />
To do an inline roll, just include two brackets in any chat message or roll, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Riley is filled with [[3d6]] points of anger!<br />
/roll [[2d6]]d5<br />
</pre><br />
<br />
You can also nest inline rolls, one inside the other, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Steve gets slapped with [[ 3d6>[[1+3]] ]] carp!<br />
</pre><br />
<br />
== Roll Queries ==<br />
<br />
Sometimes you may have a roll (or a macro) which you want to change every time it is rolled. For example, you may want to roll a variable number of dice, or add a different modifier onto the roll each time you perform the action. Roll Queries allow you to prompt whoever is performing the roll to fill in a value when the roll is made. The syntax for a roll query is:<br />
<br />
<pre data-language="javascript"><br />
?{Prompt Message}<br />
//Example:<br />
/roll ?{Number of Dice}d20<br />
//You can also include a default value:<br />
/roll ?{Number of Dice|1}d20<br />
// 1 would be the default<br />
</pre><br />
<br />
You can use Roll Queries in rolls, macros, abilities, emotes, whispers -- pretty much anywhere in the app. Note that if you use the same exact wording for a Query, Roll20 will only ask for the value the first time it's encountered in the roll. So in this example:<br />
<br />
<pre data-language="javascript"><br />
/roll 1d20 + ?{Bonus1} vs ?{MinToSucceed} + ?{Bonus1}<br />
</pre><br />
<br />
Roll20 will ask for "Bonus1" only once and use it in both places.<br />
<br />
== Math-Only Rolls ==<br />
You can do math-only rolls by adding a math expression after the roll command.<br />
<br />
For example, if you want Roll20 to do a simple addition like 5 <code>+</code> 3, you'd enter the following:<br />
<pre data-language="javascript">/roll 5+3</pre><br />
<br />
Or if you want to do this in an inline roll you'd use:<br />
<pre data-language="javascript">[[5+3]]</pre><br />
<br />
== Exploding Dice ==<br />
<br />
Roll20 supports exploding dice -- you may also know it as &quot;rule of 6&quot;, &quot;rule of 10s&quot;, or &quot;acing&quot; depending on your game system. With exploding dice, if you roll the maximum number on the dice (a 6 with a d6, a 10 with a d10, etc.) you get to re-roll again and add the additional roll to your total for that roll. If the additional roll is also a maximum number, you get to keep rolling!<br />
<br />
To perform a roll with exploding dice, just add an exclamation point after the number of sides in the formula. For example, <code>/roll 3d6!</code> would roll 3 d6 dice with exploding re-rolls. You can also define the exploding point for the dice using the greater-than and less-than symbols. For example, <code>/roll 3d6!&gt;4</code> would explode on any dice greater-than or equal-to 4. <code>/roll 3d6!3</code> would explode only if a 3 is rolled.<br />
<br />
<div class='diceroller'><br />
/roll 10d6!<br />
</div><br />
<br />
'''Compounding Exploding Dice (Shadowrun-Style Exploding Dice)'''<br />
<br />
Shadowrun (and some other systems) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. So for example to roll 5 d6's, you would do <code>/roll 5d6!!</code>. A common Shadowrun roll would be exploding dice compared to a target number, for example <code>/roll {5d6!!}&gt;8</code> <em>(notice the use of the brackets to show that we don't mean &quot;explode on anything greater than 8&quot;, but rather &quot;explode on 6's compounding, then compare to 8 for successes)</em>. Even though the target number (8) is higher than the possible roll from a single die, with the compounding exploding rolls a single roll can be infinitely high!<br />
<br />
<div class='diceroller'><br />
/roll {5d6!!}&gt;8<br />
</div><br />
<br />
'''Penetrating Exploding Dice (Hackmaster-Style Exploding Dice)'''<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. So for example to roll 5 d6's, you would do <code>/roll 5d6!p</code>.<br />
<br />
<div class='diceroller'><br />
/roll 5d6!p<br />
</div><br />
<br />
== Drop/Keep ==<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number of the lowest rolls, or keep only a certain number of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively.<br />
<br />
For example, you might roll 8 d100 dice and only be allowed to keep the top 4 rolls. In Roll20 this would be expressed with <code>/roll 8d100k4</code>. When Roll20 prints the output from that roll, you'll see each individual d100's rolled value, and all but the top 4 rolls will be greyed out. Roll20 will then give you the total of the top 4 rolls. Doing a roll to drop the 3 lowest rolls would be very similar: <code>/roll 8d100d3</code>. Again, the value of each dice rolled will be displayed, with the 3 lowest rolls greyed out.<br />
<br />
<div class='diceroller'><br />
/roll 8d100d3<br />
</div><br />
<br />
The <code>d</code> and <code>k</code> commands are shortcuts for the full <code>dl</code> and <code>kh</code> commands. If you need to drop the highest dice use <code>dh</code> and if you need to keep the lowest dice use <code>kl</code>. For example <code>/roll 8d100dh3</code> would drop the highest three rolls and keep the lowest 5 and <code>/roll 8d100kl3</code> would keep the lowest three rolls and drop the highest 5.<br />
<br />
== Target Number (Successes) ==<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead. Roll20 uses the greater-than symbol <code>&gt;</code> to indicate when the roll is greater-than or equal-to <code>&gt;=</code> the target number. The less-than symbol <code>&lt;</code> is used to indicate when the roll is less-than or equal-to <code>&lt;=</code> the target number.<br />
<br />
For example, you might be performing an action that requires a target number of 3, and you get to roll 3 d6's to see how many successes you have. In Roll20, you would do <code>/roll 3d6&gt;3</code>. Note the inclusion of the greater-than symbol to indicate that this is a target roll versus 3. Roll20 will show you each dice that was rolled, and then tell you the number of dice with a value of 3 or greater (note that ties with the target number count as a success!). You can also roll less-than target numbers, for example <code>/roll 10d6&lt;4</code>, which would give you a success for each dice rolled that is equal to 4 or less.<br />
<br />
You can also add modifiers onto your target rolls, and the modifier will be added to <em>each individual dice roll</em> before it is compared to the target number. However, if you're going to do so, it's recommended that you use a group just to make sure the parser fully understands what you want to do. So, <code>/roll {3d6+1}&lt;3</code> would roll 3 d6 dice, and for each dice roll add on 1, then compare it versus the target number of 3.<br />
<br />
<div class='diceroller'><br />
/roll 3d6&gt;3<br />
</div><br />
<br />
== Critical Success and Fumble Points ==<br />
<br />
You can also modify your dice rolls to allow you to specify set at which point a roll is considered to be a "Critical Success" or "Critical Failure (Fumble)".<br />
<br />
To show any roll equal to 10 or greater as a critical success, just do <code>/roll 1d20cs>10</code>. To show any roll equal to or less than 3 as a critical failure, just do <code>/roll 1d20cf<3</code>. To show any roll equal to 20 or 10 exactly as a critical success, just do <code>/roll 1d20cs20cs10</code>.<br />
<br />
''Note: These values will not affect other things that by default work on max roll value (including exploding, penetrating, etc.). It only affects the display of the roll result to the player. For example, if you want dice to explode on 18 or higher, and you want to show an 18 or higher as a critical, you would need to do <code>/roll 1d20!>18cs>18</code>.''<br />
<br />
<div class='diceroller'><br />
/roll 1d20cs>10<br />
</div><br />
<br />
== Rerolling Dice ==<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the orignal die value ignored.<br />
<br />
To use reroll, just do <code>/roll 2d8r&lt;2</code>. Roll20 will roll 2 d8 and reroll any 1s or 2s, dropping the original die value. If reroll for a specific value is needed the comparison operator can be left off. <code>/roll 2d8r8</code> will reroll any 8s. &gt; and &lt; can be used as comparisons and the r suffix can be specified multiple times. <code>/roll 2d8r1r3r5r7</code> would roll 2d8 and re-roll any odd number.<br />
<br />
<div class='diceroller'><br />
/roll 2d8r&lt;2<br />
</div><br />
<br />
== FATE Dice ==<br />
<br />
Roll20 also supports FATE dice (used for FATE, FUDGE, and other systems). Roll20 accurately simulates FATE dice as 6-sided dice in which two sides are 0, two sides are +1, and two sides are -1.<br />
<br />
To roll 4 FATE dice, just do <code>/roll 4dF</code>. Roll20 will show you the result of each individual FATE dice roll, then give you the total of all the dice rolls added up together. You can also add a modifier onto the total, with <code>/roll 4dF+1</code>.<br />
<br />
<div class='diceroller'><br />
/roll 4dF<br />
</div><br />
<br />
== Rounding Rolls and Math Functions ==<br />
<br />
You may want to use rounding in your roll formulas to emulate mechanics such as "half a level, rounded down to the nearest level." Roll20 provides several functions to accomplish this: <code>floor()</code> which will always round the number down (e.g. 5.7 becomes 5), <code>ceil()</code> which will always round the number up (e.g. 5.1 becomes 6), and <code>round()</code> which will always round to the nearest whole number (e.g. 4.4 becomes 4 and 4.5 becomes 5). You can use these functions almost anywhere in your roll formulas (around a single math expression, groups of math expressions, or even the entire roll). For example:<br />
<br />
<div class='diceroller'><br />
/roll floor(7/2) + 2d6<br />
</div><br />
<br />
We also provide other Math functions:<br />
<br />
* <code>abs()</code> will calculate the absolute value of the roll<br />
<br />
== Grouping Rolls ==<br />
<br />
Sometimes you may want to perform a series of rolls, and then compare each roll to a common check (like a success roll). Roll20 provides a &quot;grouped rolls&quot; functionality for this purpose. For example, you can roll two different pools of dice, then keep the highest dice roll across any of the pools:<br />
<br />
<div class="diceroller"><br />
/roll {4d6+3d8}kh1<br />
</div><br />
<br />
If you separate the rolls inside the group with a comma, then we'll sum each individual dice expression in the group before applying any modifiers. For example, if we change the above example to use a comma, instead of keeping the highest single roll, it will instead keep the highest group total:<br />
<br />
<div class="diceroller"><br />
/roll {4d6,3d8}kh1<br />
</div><br />
<br />
This is needed in games based on the Savage Worlds system, where important characters roll a "wild die" in parallel with their main die and choose the highest roll. <br />
<br />
Grouped rolls can be a very powerful features in Roll20. See more detail about them in the full dice specification below.<br />
<br />
<hr /><br />
<br />
<div class='alert'><br />
Below you'll find the entire Roll20 dice engine specification. This is the &quot;advanced&quot; documentation. If you're looking to do something totally crazy with Roll20 dice, this is a great place to see if we can support it.<br />
</div><br />
<br />
== Roll To Initiative ==<br />
To add a roll directly into Roll20's Turn Track (Rolling for Initiative), you'll need to incorporate a &quot;roll option&quot;. A roll option is a special Roll20 flag that you can set anywhere in a roll to tell the roll system you'd like to do special things with the roll. For adding an initiative number to the turn track, you'll first need to select the token you wish to roll for and use this formula:<br />
<br />
<code>/roll 1d20 + 5 &{tracker}</code><br />
<br />
The &{} part is where you put your options for the roll, and the "tracker" option is what says &quot;Show the results of this roll, but also use the result as the value in the turn tracker.&quot; If the token that you have selected doesn't already have a turn in the turn order, one will be added. If it already has at least one turn, all current turns will be updated with the new value.<br />
<br />
== Roll Templates ==<br />
<br />
[[Roll Templates]] are a special facet of the [[Character Sheets]] system which provide additional layout and styling options for the display of roll results. Using a [[Roll Templates|Roll Template]] is very easy to use. Just include a special flag in your chat message which tells Roll20 that you want to use a [[Roll__Templates|Roll Template]], and then provide all of the data that you want to include.<br />
<br />
Here's an example that uses the 'default' template (which all games have access to, regardless of the game system or [[Character Sheets]] you are using): <code><nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki></code><br />
<br />
''Note: If you're interested in using Roll Templates in your own custom macros or creating your own custom templates please vist the wiki entry on [[Roll Templates]].''<br />
<br />
<div class='diceroller'><br />
<nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki><br />
</div><br />
<br />
== Roll20 Dice Specification ==<br />
<br />
=== Math Operators and Functions ===<br />
Roll20 supports the basic arithmetic operators you learned in school: <code>+</code>, <code>-</code>, <code>*</code> (multiply), and <code>/</code> (divide).<br />
<br />
In addition to the basic four, you have access to:<br />
* <code>%</code>, for modulus division. The result of <code>a % b</code> is the ''[[wikipedia:Modulo operation|remainder]]'' of <code>a / b</code>. If you think back to when you were first learning long division without getting into decimals, you were learning how to perform modulus division. Modulus is useful, for example, to test whether a value is even or odd: <code>a % 2</code> will be 0 if a is even (and positive) and 1 if a is odd (and positive). In general, the result of <code>a % b</code> when a and b are both whole numbers will be a whole number in the range <code>[0, |b| - 1]</code> where <code>|b|</code> is the absolute value of b. (If a is less than 0, the result will be negative, including -0. -0 is functionally equivalent to 0.)<br />
* <code>**</code>, for exponentiation. You may be more familiar with <code>a^b</code> as the notation for "raising a to the power of b", but in Roll20 you would use <code>a**b</code> instead. Also note that finding roots is simply raising a number to a fractional exponent; square root is simply an exponent of 0.5, for example.<br />
<br />
<br />
You also have access to a small set of mathematical functions:<br />
* <code>floor(x)</code> rounds x towards negative infinity.<br />
* <code>round(x)</code> rounds x towards 0 if the fractional portion of x is less than 0.5, and round x towards positive infinity if the fractional portion of x is 0.5 or greater.<br />
* <code>ceil(x)</code> rounds x towards positive infinity.<br />
* <code>abs(x)</code> returns the absolute value of x.<br />
<br />
<br />
Operations are performed by order of precedence, just like in normal mathematics. From highest to lowest precedence:<br />
* Grouping with parentheses (<code>(</code> and <code>)</code>); just like in real math, you can modify the precedence ordering by wrapping parentheses around things<br />
* Calling floor/round/ceil/abs<br />
* Exponentiation (<code>**</code>)<br />
* Multiplication (<code>*</code>), division (<code>/</code>), and modulus (<code>%</code>), in the order they appear (left-to-right) in the formula<br />
* Addition (<code>+</code>) and subtraction (<code>-</code>), in the order they appear (left-to-right) in the formula<br />
<br />
=== Order of Operations ===<br />
While the Roll20 dice engine does support basic math and functions such as floor() and ceil(), it is first and foremost a dice engine, and so it has its own order of operations. This means that putting parentheses inside of your dice formula will not always affect the outcome of the roll (for example, you can't force a variable to be interpreted before a macro). Here is the general order of operations:<br />
<br />
# Abilities are expanded (meaning the definition of the ability is placed in the formula anywhere that ability appears).<br />
# Macros are expanded, including nested macros up to 99 levels deep.<br />
# Variables are substituted<br />
# Roll queries are executed (the player making the roll is asked to provide a value for each query, and that value is substituted in where the roll query appears in the formula)<br />
# All previous steps are repeated until there are no longer any unresolved abilities, macros, variables, or queries. This allows for nesting (e.g. putting an attribute in a macro).<br />
# Inline rolls are executed, starting with the most deeply nested inline roll working upward. The overall result of the inline roll is substituted in place where it appeared in the formula.<br />
# The remaining roll is executed: first, dice are rolled for any dice (e.g. "2d6" is rolled; including any special dice such as dropped or exploding), then the result of that roll is substituted into the formula. Next, floor() and ceil() functions are executed. Finally, the entire remaining formula is evaluated, including observing proper math order of operations (parentheses first, then multiplication/division, then addition/subtraction).<br />
<br />
=== Types Of Dice ===<br />
<br />
Roll20 supports more than just your standard polyhedrons when rolling dice, below are the available die types you can use in your games.<br />
<br />
==== Basic Roll <code>NdX</code> ====<br />
<br />
Rolls '''N''' traditional (almost, you can have any number of sides that you want) dice with '''X''' sides per die. '''N''' must be greater than or equal to 0 and '''X''' must be greater than or equal to 1.<br />
<br />
==== Fate/Fudge Roll <code>NdF</code> ====<br />
<br />
Rolls '''N''' Fate/Fudge dice. These dice have three sides with values of -1, 0, and 1.<br />
<br />
==== Computed Dice Roll <code>(N+Y)dX</code>/<code>Nd(X+Y)</code> ====<br />
<br />
Computes the number of dice to roll or the number of sides on the dice based on the mathematical expression in the parentheses. Dice computation can be used with both Basic and Fate dice.<br />
<br />
Within <code>(N+Y)dX</code>, the number of dice <code>(N+Y)</code> is rounded to the nearest whole number, just like [[Dice_Reference#Rounding_Rolls_and_Math_Functions|'''round(N+Y)''']].<br />
<br />
=== Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of dice rolls. Each modifier states which '''Types Of Dice''' it can be applied to in parentheses after the modifier name. Rolls can have multiple modifiers applied to a single roll to allow for complex dice expressions.<br />
<br />
* '''B''' - Basic Roll<br />
* '''F''' - Fate/Fudge Roll<br />
<br />
Many modifiers compare each die to a target number to decided if the modifier action should be applied. We'll call this a '''Compare Point''' or '''CP''' for short in the roll modifiers below. A Compare Point consists of an optional compare operation <code>&lt;</code>,<code>=</code>,<code>&gt;</code> and a target number. If the operation is not specified <code>=</code> is assumed and for most modifiers the entire Compare Point can be left off for the default behavior.<br />
<br />
* Example Compare Points<br />
* <code>3</code> - If the roll is equal to 3<br />
* <code>&gt;2</code> - If the roll is greater than or equal to 2<br />
* <code>&lt;18</code> - If the roll is less than or equal to 18<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead.<br />
<br />
* Example Success Checks<br />
* <code>3d6&gt;3</code> - Roll 3 d6's and count one success for each roll of 3 or higher<br />
* <code>10d6&lt;4</code> - Roll 10 d6's and count one success for each roll of 4 or less<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Some systems build on success checks by also including failures. Failure checks only work when a success check is already being done and each failure subtracts one from the total number of successes.<br />
<br />
* Example Failure Checks<br />
* <code>3d6&gt;3f1</code> - Roll 3 d6's and count one success for each roll of 3 or higher and one failure for each 1<br />
* <code>10d6&lt;4f&gt;5</code> - Roll 10 d6's and count one success for each roll of 4 or less and one failure for each roll of 5 or more<br />
<br />
==== Exploding Dice (B,F) <code>!CP</code> ====<br />
<br />
Exploding dice, also known as &quot;rule of 6&quot; or &quot;rule of 10s&quot; depending on your gaming system, rolls an additional die if the maximum is rolled. If the additional roll is also the maximum number the additional rolls keep on going! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Exploding Dice<br />
* <code>3d6!</code> - Rolls 3d6 and explodes every time a 6 is rolled<br />
* <code>3d6!&gt;5</code> - Rolls 3d6 and explodes every time a 5 or 6 is rolled<br />
<br />
==== Compounding Dice (B,F) <code>!!CP</code> ====<br />
<br />
Shadowrun (and some other systems, such as 7th Sea and L5R) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. With the compounding exploding rolls a single roll can be infinitely high! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!!</code> - Rolls 5d6 and compound every time a 6 is rolled<br />
* <code>5d6!!5</code> - Rolls 5d6 and compound every time a 5 is rolled, 6's will be treated as a normal roll<br />
<br />
==== Penetrating Dice (B,F) <code>!pCP</code> ====<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. A die can penetrate multiple times but the modifier is only ever -1 to each additional die.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!p</code> - Rolls 5d6 and explode with a -1 modifier every time a 6 is rolled<br />
* <code>5d6!p&gt;5</code> - Rolls 5d6 and explode with a -1 modifier every time a 5 or higher is rolled.<br />
<br />
==== Keep / Drop Dice (B,F) <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number ('''N''') of the lowest rolls, or keep only a certain number ('''N''') of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively. The optional <code>h</code>/<code>l</code> parameter can either be <code>h</code> to keep or drop the highest '''N''' dice or <code>l</code> to keep or drop the lowest '''N''' dice. If not specified when keeping rolls the high rolls will be kept and when dropping rolls the low rolls will be dropped.<br />
<br />
* Example Keep Rolls<br />
* <code>8d100k4</code> - Roll 8 d100's and keep the four largest rolls.<br />
* <code>8d100kl4</code> - Roll 8 d100's and keep the four smallest rolls.<br />
* Example Drop Rolls<br />
* <code>8d100d4</code> - Roll 8 d100's and drop the four smallest rolls.<br />
* <code>8d100dh4</code> - Roll 8 d100's and drop the four largest rolls.<br />
<br />
==== Rerolling Dice (B,F) <code>rCP</code> ====<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the original die value ignored. The reroll modifier can be specified multiple times to allow rerolling at multiple Compare Points. By default the dice will continue to reroll until the result is inside the defined parameters. Optionally you can set the results to only reroll once regardless of the outcome. <br />
<br />
* Example Rerolls<br />
* <code>2d10r&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled<br />
* <code>8d6r</code> - Roll 8 d6's and reroll any time a 1 is rolled<br />
* <code>8d6r2r4r6</code> - Roll 8 d6's and reroll any time a 2, 4, or 6 is rolled<br />
* <code>2d6ro&lt;2</code> - Roll 2 d6's and reroll anything less than 2 but only once<br />
<br />
<br />
'''Special Case: Reroll Once (B,F) <code>roCP</code>'''<br />
<br />
In some systems (such as D&D 5E) you want to reroll dice below a certain value, but you only want to reroll the dice one time each. To do that, just use <code>ro</code> instead of <code>r</code>.<br />
<br />
* Example Reroll Once Rolls<br />
* <code>2d10ro&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled, but only up to one time per dice.<br />
<br />
==== Sorting Dice (B,F) <code>sa</code>/<code>sd</code> ====<br />
<br />
You may want to see your results in either ascending or descending order. The sorting modifier does just this. The order parameter is optional and specifies the order to sort with <code>a</code> for ascending and <code>d</code> for descending. Sorting defaults to ascending if order is not specified.<br />
<br />
* Example Rerolls<br />
* <code>8d6s</code> - Roll 8 d6's and sort the results in ascending order<br />
* <code>8d6sd</code> - Roll 8 d6's and sort the results in descending order<br />
<br />
===== Order of Operations for Modifiers =====<br />
<br />
Modifiers are applied in the following order:<br />
<br />
* Exploding, Compounding, Penetrating, Rerolls<br />
* These are applied while the dice are still rolling. imagine that you roll some exploding 6d6 on your table and the instant one of them settles as a 6 another die is rolled<br />
* Keep, Drop, Success, Failure, Sorting<br />
* These are applied after all of the dice have &quot;settled&quot; and all of the result values are known.<br />
<br />
=== Grouped Rolls ===<br />
<br />
Mutliple rolls can be perfomed within a group via curly braces using a comma to seperate the sub-roll expressions <code>{3d6+3d4+5, 2d8+4}</code>. Grouped Rolls have their own set of Group Modifiers which perform actions across the whole group.<br />
<br />
'''Note:''' each sub-roll expression within a Grouped Roll must contain elements of the same type:<br />
* "Sum rolls", which can be [[Dice_Reference#Basic_Roll_NdX|Basic Rolls]] or nested Group Rolls.<br />
* "[[Dice_Reference#Target_Number_.28Successes.29|Success rolls]]".<br />
* ("M rolls"—which are simply numbers—may be mentioned in an error message. However, unlike the other two roll types, M rolls are not required to be present within every sub-roll expression.) <br />
<br><br />
For example, <code>[[ {1d6, 5}kh1 ]]</code> will fail, but <code>[[ {1d6, 5 + 0d0}kh1 ]]</code> or <code> [[ {1d6, {5}}kh1 ]]</code> or <code> [[ {&#91;&#91;1d6&#93;&#93;, 5}kh1 ]]</code> will work.<br />
<br />
=== Grouped Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of grouped rolls. Grouped Rolls can have multiple modifiers applied to a group roll to allow for complex dice expressions.<br />
<br />
==== Keep / Drop <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
To apply a keep or drop modifier across multiple types of dice wrap the roll in a group. With a single Sub-Roll in the group the keep/drop operation is applied across all rolls. To choose the best or worse roll expression multiple sub-groups can be used. In this case the keep/drop operation is applied to the final result of each subgroup.<br />
<br />
* Single Sub-Roll Keep Example<br />
* <code>{4d6+3d8}k4</code> - Roll 4 d6's and 3 d8's, out of those 7 dice the highest 4 are kept and summed up.<br />
* Multiple Sub-Roll Drop Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}d1</code> - Roll each of the three sub-roll expressions and total them up. Drop the sub-roll expression with the lowest total and sum the other two totals as the result.<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
The same concept as when using on Dice Rolls but with different behavor for a group. For a Grouped Roll with a single sub-roll expression the success check is done after the remaining math expressions have been totaled into each roll. Single sub-roll groups are also useful when doing a success check on a roll that has another Compare Point enabled modifer. For a Grouped Roll with a multiple sub-roll expression the success check is applied to the esult of each sub-roll expression.<br />
<br />
* Single Sub-Roll Success Example<br />
* <code>{3d20+5}&gt;21</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more.<br />
* <code>{2d6!}&gt;4</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater.<br />
* Multiple Sub-Roll Success Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more.<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Failure checks on groups work just like success checks.<br />
<br />
* Single Sub-Roll Failure Example<br />
* <code>{3d20+5}&gt;21f&lt;10</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more and count a failure for each result of 10 or less.<br />
* <code>{2d6!}&gt;4f1</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater and a failure for each roll of 1.<br />
* Multiple Sub-Roll Failure Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40f&lt;10</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more and one failure for each sub-roll total of 10 or less.<br />
<br />
[[Category:Docs]]</div>235259https://wiki.roll20.net/Dice_ReferenceDice Reference2017-05-09T16:28:41Z<p>235259: /* Roll20 Dice Specification */</p>
<hr />
<div>Roll20 features support for a wide array of dice mechanics. On this page we've compiled a list of all of the different types of dice rolls you can perform. Each type also has an interactive example box where you can make actual rolls using the same roll system that's built in to Roll20 -- a great way to experiment and check to make sure we can support your role playing game system of choice. Don't see a dice mechanic your game system needs, or think something is done incorrectly? [mailto:team@roll20.net Get in touch and let us know!]<br />
<br />
{{mbox | text = Want to skip straight to the 'nitty-gritty'? Check out the [[Dice_Reference#Roll20 Dice Specification|Dice Specification]] for the really advanced stuff!}}<br />
<br />
<br />
== How to Roll Dice ==<br />
<br />
Rolling dice in Roll20 is easy. Just type the <code>/roll</code> command into the text chat box, followed by a formula. In most cases, the formula is the same as the one that's printed in your game's instructions. For example, you might know that to roll an attack roll you need to roll a &quot;D20 plus your attack modifier&quot;. In Roll20, you would just type <code>/roll d20+5</code>. If you hit and you need to roll 3d6+2 damage, you would just type <code>/roll 3d6+2</code>. Finally, you can also string multiple rolls together. If you have an attack that does two types of damage, you might do <code>/roll 2d6+5 + d8</code>.<br />
<br />
<div class='diceroller'><br />
/roll 1d20+5<br />
</div><br />
<br />
After the roll is performed, you'll see the results of the roll in the text chat area. Notice that for each group of dice that were rolled, there will be a group of numbers in parentheses, representing the result of each individual dice that was rolled. (The number sits on an outline of the dice type rolled, and this outline is in the same color as the square of color in the dice-roller's player portrait in the Player Area.) You'll also see the total of all the dice values plus modifiers to the right of the equal sign.<br />
<br />
== Rolling in Secret ==<br />
<br />
By default, any rolls that you make are seen by everyone in the game with you (including all players). If you want to roll in secret, you can use the <code>/gmroll</code> command to perform a roll that only the GM and the original player who made the roll can see. So if you're the GM, doing a <code>/gmroll</code> will only be visible to you. It's a great way to perform skill checks in secret.<br />
<br />
== Including Additional Information ==<br />
<br />
You can also include non-formula text in your roll to indicate what that roll is for. For example, when rolling for initiative you might enter <code>/roll 1d20+5 Roll for Initiative</code>. The extra text won't affect your roll in any way, but it's included in the chat log so that others can see what you're rolling for. It's entirely optional to do this, by the way, but some GMs find it helps keep everything organized a little better.<br />
<br />
<div class="diceroller"><br />
/roll 1d20+5 Roll for Initiative<br />
</div><br />
<br />
If you want to include any numbers, parentheses, or <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, or <code>%</code> in your additional text, you can preface it with a <code>\</code> to separate the formula from the text and keep the roller from getting confused. So for example you can do <code>/roll 1d20+5 \ +5 Roll for Initiative</code>.<br />
<br />
If you want to include additional comments before the end of the roll (we call them &quot;inline labels&quot;), use square brackets. For example, <code>/roll 2d20+5[Fire Damage] + 3d6+5[Ice Damage]</code>. When these comments are applied directly after a die roll they show up as tool-tips on the dice:<br />
<br />
<div class="diceroller"><br />
/roll 2d10+2d6[crit]+5 Critical Hit!<br />
</div><br />
<br />
== Inline Dice Rolls ==<br />
<br />
If you want a more compact roll representation, you can take advantage of inline dice rolls. Inline rolls are just like regular rolls, with the following exceptions:<br />
<br />
* You can use them in any chat message, not just a roll. For example, you can do a regular chat message, an emote, or a whisper, with an inline roll included.<br />
* They are evaluated completely before any /roll commands, so you can use them as "random variables" in your rolls.<br />
* You will only see the result of the total roll, and you can hover over the result to see the individual dice rolls.<br />
* If an inline roll contains a crit success, it will be highlighted with a green box. If there's a crit failure, it's highlighted in red. If it has both (because there was more than one roll), it's in blue. Also when you mouse-over the inline roll to see the details of the roll, it'll show red and green highlights for the rolls themselves for crits/fumbles.<br />
<br />
<br />
To do an inline roll, just include two brackets in any chat message or roll, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Riley is filled with [[3d6]] points of anger!<br />
/roll [[2d6]]d5<br />
</pre><br />
<br />
You can also nest inline rolls, one inside the other, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Steve gets slapped with [[ 3d6>[[1+3]] ]] carp!<br />
</pre><br />
<br />
== Roll Queries ==<br />
<br />
Sometimes you may have a roll (or a macro) which you want to change every time it is rolled. For example, you may want to roll a variable number of dice, or add a different modifier onto the roll each time you perform the action. Roll Queries allow you to prompt whoever is performing the roll to fill in a value when the roll is made. The syntax for a roll query is:<br />
<br />
<pre data-language="javascript"><br />
?{Prompt Message}<br />
//Example:<br />
/roll ?{Number of Dice}d20<br />
//You can also include a default value:<br />
/roll ?{Number of Dice|1}d20<br />
// 1 would be the default<br />
</pre><br />
<br />
You can use Roll Queries in rolls, macros, abilities, emotes, whispers -- pretty much anywhere in the app. Note that if you use the same exact wording for a Query, Roll20 will only ask for the value the first time it's encountered in the roll. So in this example:<br />
<br />
<pre data-language="javascript"><br />
/roll 1d20 + ?{Bonus1} vs ?{MinToSucceed} + ?{Bonus1}<br />
</pre><br />
<br />
Roll20 will ask for "Bonus1" only once and use it in both places.<br />
<br />
== Math-Only Rolls ==<br />
You can do math-only rolls by adding a math expression after the roll command.<br />
<br />
For example, if you want Roll20 to do a simple addition like 5 <code>+</code> 3, you'd enter the following:<br />
<pre data-language="javascript">/roll 5+3</pre><br />
<br />
Or if you want to do this in an inline roll you'd use:<br />
<pre data-language="javascript">[[5+3]]</pre><br />
<br />
== Exploding Dice ==<br />
<br />
Roll20 supports exploding dice -- you may also know it as &quot;rule of 6&quot;, &quot;rule of 10s&quot;, or &quot;acing&quot; depending on your game system. With exploding dice, if you roll the maximum number on the dice (a 6 with a d6, a 10 with a d10, etc.) you get to re-roll again and add the additional roll to your total for that roll. If the additional roll is also a maximum number, you get to keep rolling!<br />
<br />
To perform a roll with exploding dice, just add an exclamation point after the number of sides in the formula. For example, <code>/roll 3d6!</code> would roll 3 d6 dice with exploding re-rolls. You can also define the exploding point for the dice using the greater-than and less-than symbols. For example, <code>/roll 3d6!&gt;4</code> would explode on any dice greater-than or equal-to 4. <code>/roll 3d6!3</code> would explode only if a 3 is rolled.<br />
<br />
<div class='diceroller'><br />
/roll 10d6!<br />
</div><br />
<br />
'''Compounding Exploding Dice (Shadowrun-Style Exploding Dice)'''<br />
<br />
Shadowrun (and some other systems) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. So for example to roll 5 d6's, you would do <code>/roll 5d6!!</code>. A common Shadowrun roll would be exploding dice compared to a target number, for example <code>/roll {5d6!!}&gt;8</code> <em>(notice the use of the brackets to show that we don't mean &quot;explode on anything greater than 8&quot;, but rather &quot;explode on 6's compounding, then compare to 8 for successes)</em>. Even though the target number (8) is higher than the possible roll from a single die, with the compounding exploding rolls a single roll can be infinitely high!<br />
<br />
<div class='diceroller'><br />
/roll {5d6!!}&gt;8<br />
</div><br />
<br />
'''Penetrating Exploding Dice (Hackmaster-Style Exploding Dice)'''<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. So for example to roll 5 d6's, you would do <code>/roll 5d6!p</code>.<br />
<br />
<div class='diceroller'><br />
/roll 5d6!p<br />
</div><br />
<br />
== Drop/Keep ==<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number of the lowest rolls, or keep only a certain number of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively.<br />
<br />
For example, you might roll 8 d100 dice and only be allowed to keep the top 4 rolls. In Roll20 this would be expressed with <code>/roll 8d100k4</code>. When Roll20 prints the output from that roll, you'll see each individual d100's rolled value, and all but the top 4 rolls will be greyed out. Roll20 will then give you the total of the top 4 rolls. Doing a roll to drop the 3 lowest rolls would be very similar: <code>/roll 8d100d3</code>. Again, the value of each dice rolled will be displayed, with the 3 lowest rolls greyed out.<br />
<br />
<div class='diceroller'><br />
/roll 8d100d3<br />
</div><br />
<br />
The <code>d</code> and <code>k</code> commands are shortcuts for the full <code>dl</code> and <code>kh</code> commands. If you need to drop the highest dice use <code>dh</code> and if you need to keep the lowest dice use <code>kl</code>. For example <code>/roll 8d100dh3</code> would drop the highest three rolls and keep the lowest 5 and <code>/roll 8d100kl3</code> would keep the lowest three rolls and drop the highest 5.<br />
<br />
== Target Number (Successes) ==<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead. Roll20 uses the greater-than symbol <code>&gt;</code> to indicate when the roll is greater-than or equal-to <code>&gt;=</code> the target number. The less-than symbol <code>&lt;</code> is used to indicate when the roll is less-than or equal-to <code>&lt;=</code> the target number.<br />
<br />
For example, you might be performing an action that requires a target number of 3, and you get to roll 3 d6's to see how many successes you have. In Roll20, you would do <code>/roll 3d6&gt;3</code>. Note the inclusion of the greater-than symbol to indicate that this is a target roll versus 3. Roll20 will show you each dice that was rolled, and then tell you the number of dice with a value of 3 or greater (note that ties with the target number count as a success!). You can also roll less-than target numbers, for example <code>/roll 10d6&lt;4</code>, which would give you a success for each dice rolled that is equal to 4 or less.<br />
<br />
You can also add modifiers onto your target rolls, and the modifier will be added to <em>each individual dice roll</em> before it is compared to the target number. However, if you're going to do so, it's recommended that you use a group just to make sure the parser fully understands what you want to do. So, <code>/roll {3d6+1}&lt;3</code> would roll 3 d6 dice, and for each dice roll add on 1, then compare it versus the target number of 3.<br />
<br />
<div class='diceroller'><br />
/roll 3d6&gt;3<br />
</div><br />
<br />
== Critical Success and Fumble Points ==<br />
<br />
You can also modify your dice rolls to allow you to specify set at which point a roll is considered to be a "Critical Success" or "Critical Failure (Fumble)".<br />
<br />
To show any roll equal to 10 or greater as a critical success, just do <code>/roll 1d20cs>10</code>. To show any roll equal to or less than 3 as a critical failure, just do <code>/roll 1d20cf<3</code>. To show any roll equal to 20 or 10 exactly as a critical success, just do <code>/roll 1d20cs20cs10</code>.<br />
<br />
''Note: These values will not affect other things that by default work on max roll value (including exploding, penetrating, etc.). It only affects the display of the roll result to the player. For example, if you want dice to explode on 18 or higher, and you want to show an 18 or higher as a critical, you would need to do <code>/roll 1d20!>18cs>18</code>.''<br />
<br />
<div class='diceroller'><br />
/roll 1d20cs>10<br />
</div><br />
<br />
== Rerolling Dice ==<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the orignal die value ignored.<br />
<br />
To use reroll, just do <code>/roll 2d8r&lt;2</code>. Roll20 will roll 2 d8 and reroll any 1s or 2s, dropping the original die value. If reroll for a specific value is needed the comparison operator can be left off. <code>/roll 2d8r8</code> will reroll any 8s. &gt; and &lt; can be used as comparisons and the r suffix can be specified multiple times. <code>/roll 2d8r1r3r5r7</code> would roll 2d8 and re-roll any odd number.<br />
<br />
<div class='diceroller'><br />
/roll 2d8r&lt;2<br />
</div><br />
<br />
== FATE Dice ==<br />
<br />
Roll20 also supports FATE dice (used for FATE, FUDGE, and other systems). Roll20 accurately simulates FATE dice as 6-sided dice in which two sides are 0, two sides are +1, and two sides are -1.<br />
<br />
To roll 4 FATE dice, just do <code>/roll 4dF</code>. Roll20 will show you the result of each individual FATE dice roll, then give you the total of all the dice rolls added up together. You can also add a modifier onto the total, with <code>/roll 4dF+1</code>.<br />
<br />
<div class='diceroller'><br />
/roll 4dF<br />
</div><br />
<br />
== Rounding Rolls and Math Functions ==<br />
<br />
You may want to use rounding in your roll formulas to emulate mechanics such as "half a level, rounded down to the nearest level." Roll20 provides several functions to accomplish this: <code>floor()</code> which will always round the number down (e.g. 5.7 becomes 5), <code>ceil()</code> which will always round the number up (e.g. 5.1 becomes 6), and <code>round()</code> which will always round to the nearest whole number (e.g. 4.4 becomes 4 and 4.5 becomes 5). You can use these functions almost anywhere in your roll formulas (around a single math expression, groups of math expressions, or even the entire roll). For example:<br />
<br />
<div class='diceroller'><br />
/roll floor(7/2) + 2d6<br />
</div><br />
<br />
We also provide other Math functions:<br />
<br />
* <code>abs()</code> will calculate the absolute value of the roll<br />
<br />
== Grouping Rolls ==<br />
<br />
Sometimes you may want to perform a series of rolls, and then compare each roll to a common check (like a success roll). Roll20 provides a &quot;grouped rolls&quot; functionality for this purpose. For example, you can roll two different pools of dice, then keep the highest dice roll across any of the pools:<br />
<br />
<div class="diceroller"><br />
/roll {4d6+3d8}kh1<br />
</div><br />
<br />
If you separate the rolls inside the group with a comma, then we'll sum each individual dice expression in the group before applying any modifiers. For example, if we change the above example to use a comma, instead of keeping the highest single roll, it will instead keep the highest group total:<br />
<br />
<div class="diceroller"><br />
/roll {4d6,3d8}kh1<br />
</div><br />
<br />
This is needed in games based on the Savage Worlds system, where important characters roll a "wild die" in parallel with their main die and choose the highest roll. <br />
<br />
Grouped rolls can be a very powerful features in Roll20. See more detail about them in the full dice specification below.<br />
<br />
<hr /><br />
<br />
<div class='alert'><br />
Below you'll find the entire Roll20 dice engine specification. This is the &quot;advanced&quot; documentation. If you're looking to do something totally crazy with Roll20 dice, this is a great place to see if we can support it.<br />
</div><br />
<br />
== Roll To Initiative ==<br />
To add a roll directly into Roll20's Turn Track (Rolling for Initiative), you'll need to incorporate a &quot;roll option&quot;. A roll option is a special Roll20 flag that you can set anywhere in a roll to tell the roll system you'd like to do special things with the roll. For adding an initiative number to the turn track, you'll first need to select the token you wish to roll for and use this formula:<br />
<br />
<code>/roll 1d20 + 5 &{tracker}</code><br />
<br />
The &{} part is where you put your options for the roll, and the "tracker" option is what says &quot;Show the results of this roll, but also use the result as the value in the turn tracker.&quot; If the token that you have selected doesn't already have a turn in the turn order, one will be added. If it already has at least one turn, all current turns will be updated with the new value.<br />
<br />
== Roll Templates ==<br />
<br />
[[Roll Templates]] are a special facet of the [[Character Sheets]] system which provide additional layout and styling options for the display of roll results. Using a [[Roll Templates|Roll Template]] is very easy to use. Just include a special flag in your chat message which tells Roll20 that you want to use a [[Roll__Templates|Roll Template]], and then provide all of the data that you want to include.<br />
<br />
Here's an example that uses the 'default' template (which all games have access to, regardless of the game system or [[Character Sheets]] you are using): <code><nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki></code><br />
<br />
''Note: If you're interested in using Roll Templates in your own custom macros or creating your own custom templates please vist the wiki entry on [[Roll Templates]].''<br />
<br />
<div class='diceroller'><br />
<nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki><br />
</div><br />
<br />
== Roll20 Dice Specification ==<br />
<br />
=== Math Operators and Functions ===<br />
Roll20 supports the basic arithmetic operators you learned in school: <code>+</code>, <code>-</code>, <code>*</code> (multiply), and <code>/</code> (divide).<br />
<br />
In addition to the basic four, you have access to:<br />
* <code>%</code>, for modulus division. The result of <code>a % b</code> is the ''[[wikipedia:Modulo operation|remainder]]'' of <code>a / b</code>. If you think back to when you were first learning long division without getting into decimals, you were learning how to perform modulus division. Modulus is useful, for example, to test whether a value is even or odd: <code>a % 2</code> will be 0 if a is even (and positive) and 1 if a is odd (and positive). In general, the result of <code>a % b</code> when a and b are both whole numbers will be a whole number in the range <code>[0, |b| - 1]</code> where <code>|b|</code> is the absolute value of b. (If a is less than 0, the result will be negative, including -0. -0 is functionally equivalent to 0.)<br />
* <code>**</code>, for exponentiation. You may be more familiar with <code>a^b</code> as the notation for "raising <code>a</code> to the power of <code>b</code>", but in Roll20 you would use <code>a**b</code> instead. Also note that finding roots is simply raising a number to a fractional exponent; square root is simply an exponent of <code>0.5</code>, for example.<br />
<br />
<br />
You also have access to a small set of mathematical functions:<br />
* <code>floor(x)</code> rounds x towards negative infinity.<br />
* <code>round(x)</code> rounds x towards 0 if the fractional portion of x is less than 0.5, and round x towards positive infinity if the fractional portion of x is 0.5 or greater.<br />
* <code>ceil(x)</code> rounds x towards positive infinity.<br />
* <code>abs(x)</code> returns the absolute value of x.<br />
<br />
<br />
Operations are performed by order of precedence, just like in normal mathematics. From highest to lowest precedence:<br />
* Grouping with parentheses (<code>(</code> and <code>)</code>); just like in real math, you can modify the precedence ordering by wrapping parentheses around things<br />
* Calling floor/round/ceil/abs<br />
* Exponentiation (<code>**</code>)<br />
* Multiplication (<code>*</code>), division (<code>/</code>), and modulus (<code>%</code>), in the order they appear (left-to-right) in the formula<br />
* Addition (<code>+</code>) and subtraction (<code>-</code>), in the order they appear (left-to-right) in the formula<br />
<br />
=== Order of Operations ===<br />
While the Roll20 dice engine does support basic math and functions such as floor() and ceil(), it is first and foremost a dice engine, and so it has its own order of operations. This means that putting parentheses inside of your dice formula will not always affect the outcome of the roll (for example, you can't force a variable to be interpreted before a macro). Here is the general order of operations:<br />
<br />
# Abilities are expanded (meaning the definition of the ability is placed in the formula anywhere that ability appears).<br />
# Macros are expanded, including nested macros up to 99 levels deep.<br />
# Variables are substituted<br />
# Roll queries are executed (the player making the roll is asked to provide a value for each query, and that value is substituted in where the roll query appears in the formula)<br />
# All previous steps are repeated until there are no longer any unresolved abilities, macros, variables, or queries. This allows for nesting (e.g. putting an attribute in a macro).<br />
# Inline rolls are executed, starting with the most deeply nested inline roll working upward. The overall result of the inline roll is substituted in place where it appeared in the formula.<br />
# The remaining roll is executed: first, dice are rolled for any dice (e.g. "2d6" is rolled; including any special dice such as dropped or exploding), then the result of that roll is substituted into the formula. Next, floor() and ceil() functions are executed. Finally, the entire remaining formula is evaluated, including observing proper math order of operations (parentheses first, then multiplication/division, then addition/subtraction).<br />
<br />
=== Types Of Dice ===<br />
<br />
Roll20 supports more than just your standard polyhedrons when rolling dice, below are the available die types you can use in your games.<br />
<br />
==== Basic Roll <code>NdX</code> ====<br />
<br />
Rolls '''N''' traditional (almost, you can have any number of sides that you want) dice with '''X''' sides per die. '''N''' must be greater than or equal to 0 and '''X''' must be greater than or equal to 1.<br />
<br />
==== Fate/Fudge Roll <code>NdF</code> ====<br />
<br />
Rolls '''N''' Fate/Fudge dice. These dice have three sides with values of -1, 0, and 1.<br />
<br />
==== Computed Dice Roll <code>(N+Y)dX</code>/<code>Nd(X+Y)</code> ====<br />
<br />
Computes the number of dice to roll or the number of sides on the dice based on the mathematical expression in the parentheses. Dice computation can be used with both Basic and Fate dice.<br />
<br />
Within <code>(N+Y)dX</code>, the number of dice <code>(N+Y)</code> is rounded to the nearest whole number, just like [[Dice_Reference#Rounding_Rolls_and_Math_Functions|'''round(N+Y)''']].<br />
<br />
=== Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of dice rolls. Each modifier states which '''Types Of Dice''' it can be applied to in parentheses after the modifier name. Rolls can have multiple modifiers applied to a single roll to allow for complex dice expressions.<br />
<br />
* '''B''' - Basic Roll<br />
* '''F''' - Fate/Fudge Roll<br />
<br />
Many modifiers compare each die to a target number to decided if the modifier action should be applied. We'll call this a '''Compare Point''' or '''CP''' for short in the roll modifiers below. A Compare Point consists of an optional compare operation <code>&lt;</code>,<code>=</code>,<code>&gt;</code> and a target number. If the operation is not specified <code>=</code> is assumed and for most modifiers the entire Compare Point can be left off for the default behavior.<br />
<br />
* Example Compare Points<br />
* <code>3</code> - If the roll is equal to 3<br />
* <code>&gt;2</code> - If the roll is greater than or equal to 2<br />
* <code>&lt;18</code> - If the roll is less than or equal to 18<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead.<br />
<br />
* Example Success Checks<br />
* <code>3d6&gt;3</code> - Roll 3 d6's and count one success for each roll of 3 or higher<br />
* <code>10d6&lt;4</code> - Roll 10 d6's and count one success for each roll of 4 or less<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Some systems build on success checks by also including failures. Failure checks only work when a success check is already being done and each failure subtracts one from the total number of successes.<br />
<br />
* Example Failure Checks<br />
* <code>3d6&gt;3f1</code> - Roll 3 d6's and count one success for each roll of 3 or higher and one failure for each 1<br />
* <code>10d6&lt;4f&gt;5</code> - Roll 10 d6's and count one success for each roll of 4 or less and one failure for each roll of 5 or more<br />
<br />
==== Exploding Dice (B,F) <code>!CP</code> ====<br />
<br />
Exploding dice, also known as &quot;rule of 6&quot; or &quot;rule of 10s&quot; depending on your gaming system, rolls an additional die if the maximum is rolled. If the additional roll is also the maximum number the additional rolls keep on going! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Exploding Dice<br />
* <code>3d6!</code> - Rolls 3d6 and explodes every time a 6 is rolled<br />
* <code>3d6!&gt;5</code> - Rolls 3d6 and explodes every time a 5 or 6 is rolled<br />
<br />
==== Compounding Dice (B,F) <code>!!CP</code> ====<br />
<br />
Shadowrun (and some other systems, such as 7th Sea and L5R) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. With the compounding exploding rolls a single roll can be infinitely high! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!!</code> - Rolls 5d6 and compound every time a 6 is rolled<br />
* <code>5d6!!5</code> - Rolls 5d6 and compound every time a 5 is rolled, 6's will be treated as a normal roll<br />
<br />
==== Penetrating Dice (B,F) <code>!pCP</code> ====<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. A die can penetrate multiple times but the modifier is only ever -1 to each additional die.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!p</code> - Rolls 5d6 and explode with a -1 modifier every time a 6 is rolled<br />
* <code>5d6!p&gt;5</code> - Rolls 5d6 and explode with a -1 modifier every time a 5 or higher is rolled.<br />
<br />
==== Keep / Drop Dice (B,F) <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number ('''N''') of the lowest rolls, or keep only a certain number ('''N''') of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively. The optional <code>h</code>/<code>l</code> parameter can either be <code>h</code> to keep or drop the highest '''N''' dice or <code>l</code> to keep or drop the lowest '''N''' dice. If not specified when keeping rolls the high rolls will be kept and when dropping rolls the low rolls will be dropped.<br />
<br />
* Example Keep Rolls<br />
* <code>8d100k4</code> - Roll 8 d100's and keep the four largest rolls.<br />
* <code>8d100kl4</code> - Roll 8 d100's and keep the four smallest rolls.<br />
* Example Drop Rolls<br />
* <code>8d100d4</code> - Roll 8 d100's and drop the four smallest rolls.<br />
* <code>8d100dh4</code> - Roll 8 d100's and drop the four largest rolls.<br />
<br />
==== Rerolling Dice (B,F) <code>rCP</code> ====<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the original die value ignored. The reroll modifier can be specified multiple times to allow rerolling at multiple Compare Points. By default the dice will continue to reroll until the result is inside the defined parameters. Optionally you can set the results to only reroll once regardless of the outcome. <br />
<br />
* Example Rerolls<br />
* <code>2d10r&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled<br />
* <code>8d6r</code> - Roll 8 d6's and reroll any time a 1 is rolled<br />
* <code>8d6r2r4r6</code> - Roll 8 d6's and reroll any time a 2, 4, or 6 is rolled<br />
* <code>2d6ro&lt;2</code> - Roll 2 d6's and reroll anything less than 2 but only once<br />
<br />
<br />
'''Special Case: Reroll Once (B,F) <code>roCP</code>'''<br />
<br />
In some systems (such as D&D 5E) you want to reroll dice below a certain value, but you only want to reroll the dice one time each. To do that, just use <code>ro</code> instead of <code>r</code>.<br />
<br />
* Example Reroll Once Rolls<br />
* <code>2d10ro&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled, but only up to one time per dice.<br />
<br />
==== Sorting Dice (B,F) <code>sa</code>/<code>sd</code> ====<br />
<br />
You may want to see your results in either ascending or descending order. The sorting modifier does just this. The order parameter is optional and specifies the order to sort with <code>a</code> for ascending and <code>d</code> for descending. Sorting defaults to ascending if order is not specified.<br />
<br />
* Example Rerolls<br />
* <code>8d6s</code> - Roll 8 d6's and sort the results in ascending order<br />
* <code>8d6sd</code> - Roll 8 d6's and sort the results in descending order<br />
<br />
===== Order of Operations for Modifiers =====<br />
<br />
Modifiers are applied in the following order:<br />
<br />
* Exploding, Compounding, Penetrating, Rerolls<br />
* These are applied while the dice are still rolling. imagine that you roll some exploding 6d6 on your table and the instant one of them settles as a 6 another die is rolled<br />
* Keep, Drop, Success, Failure, Sorting<br />
* These are applied after all of the dice have &quot;settled&quot; and all of the result values are known.<br />
<br />
=== Grouped Rolls ===<br />
<br />
Mutliple rolls can be perfomed within a group via curly braces using a comma to seperate the sub-roll expressions <code>{3d6+3d4+5, 2d8+4}</code>. Grouped Rolls have their own set of Group Modifiers which perform actions across the whole group.<br />
<br />
'''Note:''' each sub-roll expression within a Grouped Roll must contain elements of the same type:<br />
* "Sum rolls", which can be [[Dice_Reference#Basic_Roll_NdX|Basic Rolls]] or nested Group Rolls.<br />
* "[[Dice_Reference#Target_Number_.28Successes.29|Success rolls]]".<br />
* ("M rolls"—which are simply numbers—may be mentioned in an error message. However, unlike the other two roll types, M rolls are not required to be present within every sub-roll expression.) <br />
<br><br />
For example, <code>[[ {1d6, 5}kh1 ]]</code> will fail, but <code>[[ {1d6, 5 + 0d0}kh1 ]]</code> or <code> [[ {1d6, {5}}kh1 ]]</code> or <code> [[ {&#91;&#91;1d6&#93;&#93;, 5}kh1 ]]</code> will work.<br />
<br />
=== Grouped Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of grouped rolls. Grouped Rolls can have multiple modifiers applied to a group roll to allow for complex dice expressions.<br />
<br />
==== Keep / Drop <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
To apply a keep or drop modifier across multiple types of dice wrap the roll in a group. With a single Sub-Roll in the group the keep/drop operation is applied across all rolls. To choose the best or worse roll expression multiple sub-groups can be used. In this case the keep/drop operation is applied to the final result of each subgroup.<br />
<br />
* Single Sub-Roll Keep Example<br />
* <code>{4d6+3d8}k4</code> - Roll 4 d6's and 3 d8's, out of those 7 dice the highest 4 are kept and summed up.<br />
* Multiple Sub-Roll Drop Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}d1</code> - Roll each of the three sub-roll expressions and total them up. Drop the sub-roll expression with the lowest total and sum the other two totals as the result.<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
The same concept as when using on Dice Rolls but with different behavor for a group. For a Grouped Roll with a single sub-roll expression the success check is done after the remaining math expressions have been totaled into each roll. Single sub-roll groups are also useful when doing a success check on a roll that has another Compare Point enabled modifer. For a Grouped Roll with a multiple sub-roll expression the success check is applied to the esult of each sub-roll expression.<br />
<br />
* Single Sub-Roll Success Example<br />
* <code>{3d20+5}&gt;21</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more.<br />
* <code>{2d6!}&gt;4</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater.<br />
* Multiple Sub-Roll Success Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more.<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Failure checks on groups work just like success checks.<br />
<br />
* Single Sub-Roll Failure Example<br />
* <code>{3d20+5}&gt;21f&lt;10</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more and count a failure for each result of 10 or less.<br />
* <code>{2d6!}&gt;4f1</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater and a failure for each roll of 1.<br />
* Multiple Sub-Roll Failure Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40f&lt;10</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more and one failure for each sub-roll total of 10 or less.<br />
<br />
[[Category:Docs]]</div>235259https://wiki.roll20.net/Dice_ReferenceDice Reference2017-05-09T16:00:09Z<p>235259: increased heading levels so that article body doesn't include h1 (h1 is used for article title)</p>
<hr />
<div>Roll20 features support for a wide array of dice mechanics. On this page we've compiled a list of all of the different types of dice rolls you can perform. Each type also has an interactive example box where you can make actual rolls using the same roll system that's built in to Roll20 -- a great way to experiment and check to make sure we can support your role playing game system of choice. Don't see a dice mechanic your game system needs, or think something is done incorrectly? [mailto:team@roll20.net Get in touch and let us know!]<br />
<br />
{{mbox | text = Want to skip straight to the 'nitty-gritty'? Check out the [[Dice_Reference#Roll20 Dice Specification|Dice Specification]] for the really advanced stuff!}}<br />
<br />
<br />
== How to Roll Dice ==<br />
<br />
Rolling dice in Roll20 is easy. Just type the <code>/roll</code> command into the text chat box, followed by a formula. In most cases, the formula is the same as the one that's printed in your game's instructions. For example, you might know that to roll an attack roll you need to roll a &quot;D20 plus your attack modifier&quot;. In Roll20, you would just type <code>/roll d20+5</code>. If you hit and you need to roll 3d6+2 damage, you would just type <code>/roll 3d6+2</code>. Finally, you can also string multiple rolls together. If you have an attack that does two types of damage, you might do <code>/roll 2d6+5 + d8</code>.<br />
<br />
<div class='diceroller'><br />
/roll 1d20+5<br />
</div><br />
<br />
After the roll is performed, you'll see the results of the roll in the text chat area. Notice that for each group of dice that were rolled, there will be a group of numbers in parentheses, representing the result of each individual dice that was rolled. (The number sits on an outline of the dice type rolled, and this outline is in the same color as the square of color in the dice-roller's player portrait in the Player Area.) You'll also see the total of all the dice values plus modifiers to the right of the equal sign.<br />
<br />
== Rolling in Secret ==<br />
<br />
By default, any rolls that you make are seen by everyone in the game with you (including all players). If you want to roll in secret, you can use the <code>/gmroll</code> command to perform a roll that only the GM and the original player who made the roll can see. So if you're the GM, doing a <code>/gmroll</code> will only be visible to you. It's a great way to perform skill checks in secret.<br />
<br />
== Including Additional Information ==<br />
<br />
You can also include non-formula text in your roll to indicate what that roll is for. For example, when rolling for initiative you might enter <code>/roll 1d20+5 Roll for Initiative</code>. The extra text won't affect your roll in any way, but it's included in the chat log so that others can see what you're rolling for. It's entirely optional to do this, by the way, but some GMs find it helps keep everything organized a little better.<br />
<br />
<div class="diceroller"><br />
/roll 1d20+5 Roll for Initiative<br />
</div><br />
<br />
If you want to include any numbers, parentheses, or <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, or <code>%</code> in your additional text, you can preface it with a <code>\</code> to separate the formula from the text and keep the roller from getting confused. So for example you can do <code>/roll 1d20+5 \ +5 Roll for Initiative</code>.<br />
<br />
If you want to include additional comments before the end of the roll (we call them &quot;inline labels&quot;), use square brackets. For example, <code>/roll 2d20+5[Fire Damage] + 3d6+5[Ice Damage]</code>. When these comments are applied directly after a die roll they show up as tool-tips on the dice:<br />
<br />
<div class="diceroller"><br />
/roll 2d10+2d6[crit]+5 Critical Hit!<br />
</div><br />
<br />
== Inline Dice Rolls ==<br />
<br />
If you want a more compact roll representation, you can take advantage of inline dice rolls. Inline rolls are just like regular rolls, with the following exceptions:<br />
<br />
* You can use them in any chat message, not just a roll. For example, you can do a regular chat message, an emote, or a whisper, with an inline roll included.<br />
* They are evaluated completely before any /roll commands, so you can use them as "random variables" in your rolls.<br />
* You will only see the result of the total roll, and you can hover over the result to see the individual dice rolls.<br />
* If an inline roll contains a crit success, it will be highlighted with a green box. If there's a crit failure, it's highlighted in red. If it has both (because there was more than one roll), it's in blue. Also when you mouse-over the inline roll to see the details of the roll, it'll show red and green highlights for the rolls themselves for crits/fumbles.<br />
<br />
<br />
To do an inline roll, just include two brackets in any chat message or roll, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Riley is filled with [[3d6]] points of anger!<br />
/roll [[2d6]]d5<br />
</pre><br />
<br />
You can also nest inline rolls, one inside the other, like so:<br />
<br />
<pre data-language="javascript"><br />
/em Steve gets slapped with [[ 3d6>[[1+3]] ]] carp!<br />
</pre><br />
<br />
== Roll Queries ==<br />
<br />
Sometimes you may have a roll (or a macro) which you want to change every time it is rolled. For example, you may want to roll a variable number of dice, or add a different modifier onto the roll each time you perform the action. Roll Queries allow you to prompt whoever is performing the roll to fill in a value when the roll is made. The syntax for a roll query is:<br />
<br />
<pre data-language="javascript"><br />
?{Prompt Message}<br />
//Example:<br />
/roll ?{Number of Dice}d20<br />
//You can also include a default value:<br />
/roll ?{Number of Dice|1}d20<br />
// 1 would be the default<br />
</pre><br />
<br />
You can use Roll Queries in rolls, macros, abilities, emotes, whispers -- pretty much anywhere in the app. Note that if you use the same exact wording for a Query, Roll20 will only ask for the value the first time it's encountered in the roll. So in this example:<br />
<br />
<pre data-language="javascript"><br />
/roll 1d20 + ?{Bonus1} vs ?{MinToSucceed} + ?{Bonus1}<br />
</pre><br />
<br />
Roll20 will ask for "Bonus1" only once and use it in both places.<br />
<br />
== Math-Only Rolls ==<br />
You can do math-only rolls by adding a math expression after the roll command.<br />
<br />
For example, if you want Roll20 to do a simple addition like 5 <code>+</code> 3, you'd enter the following:<br />
<pre data-language="javascript">/roll 5+3</pre><br />
<br />
Or if you want to do this in an inline roll you'd use:<br />
<pre data-language="javascript">[[5+3]]</pre><br />
<br />
== Exploding Dice ==<br />
<br />
Roll20 supports exploding dice -- you may also know it as &quot;rule of 6&quot;, &quot;rule of 10s&quot;, or &quot;acing&quot; depending on your game system. With exploding dice, if you roll the maximum number on the dice (a 6 with a d6, a 10 with a d10, etc.) you get to re-roll again and add the additional roll to your total for that roll. If the additional roll is also a maximum number, you get to keep rolling!<br />
<br />
To perform a roll with exploding dice, just add an exclamation point after the number of sides in the formula. For example, <code>/roll 3d6!</code> would roll 3 d6 dice with exploding re-rolls. You can also define the exploding point for the dice using the greater-than and less-than symbols. For example, <code>/roll 3d6!&gt;4</code> would explode on any dice greater-than or equal-to 4. <code>/roll 3d6!3</code> would explode only if a 3 is rolled.<br />
<br />
<div class='diceroller'><br />
/roll 10d6!<br />
</div><br />
<br />
'''Compounding Exploding Dice (Shadowrun-Style Exploding Dice)'''<br />
<br />
Shadowrun (and some other systems) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. So for example to roll 5 d6's, you would do <code>/roll 5d6!!</code>. A common Shadowrun roll would be exploding dice compared to a target number, for example <code>/roll {5d6!!}&gt;8</code> <em>(notice the use of the brackets to show that we don't mean &quot;explode on anything greater than 8&quot;, but rather &quot;explode on 6's compounding, then compare to 8 for successes)</em>. Even though the target number (8) is higher than the possible roll from a single die, with the compounding exploding rolls a single roll can be infinitely high!<br />
<br />
<div class='diceroller'><br />
/roll {5d6!!}&gt;8<br />
</div><br />
<br />
'''Penetrating Exploding Dice (Hackmaster-Style Exploding Dice)'''<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. So for example to roll 5 d6's, you would do <code>/roll 5d6!p</code>.<br />
<br />
<div class='diceroller'><br />
/roll 5d6!p<br />
</div><br />
<br />
== Drop/Keep ==<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number of the lowest rolls, or keep only a certain number of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively.<br />
<br />
For example, you might roll 8 d100 dice and only be allowed to keep the top 4 rolls. In Roll20 this would be expressed with <code>/roll 8d100k4</code>. When Roll20 prints the output from that roll, you'll see each individual d100's rolled value, and all but the top 4 rolls will be greyed out. Roll20 will then give you the total of the top 4 rolls. Doing a roll to drop the 3 lowest rolls would be very similar: <code>/roll 8d100d3</code>. Again, the value of each dice rolled will be displayed, with the 3 lowest rolls greyed out.<br />
<br />
<div class='diceroller'><br />
/roll 8d100d3<br />
</div><br />
<br />
The <code>d</code> and <code>k</code> commands are shortcuts for the full <code>dl</code> and <code>kh</code> commands. If you need to drop the highest dice use <code>dh</code> and if you need to keep the lowest dice use <code>kl</code>. For example <code>/roll 8d100dh3</code> would drop the highest three rolls and keep the lowest 5 and <code>/roll 8d100kl3</code> would keep the lowest three rolls and drop the highest 5.<br />
<br />
== Target Number (Successes) ==<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead. Roll20 uses the greater-than symbol <code>&gt;</code> to indicate when the roll is greater-than or equal-to <code>&gt;=</code> the target number. The less-than symbol <code>&lt;</code> is used to indicate when the roll is less-than or equal-to <code>&lt;=</code> the target number.<br />
<br />
For example, you might be performing an action that requires a target number of 3, and you get to roll 3 d6's to see how many successes you have. In Roll20, you would do <code>/roll 3d6&gt;3</code>. Note the inclusion of the greater-than symbol to indicate that this is a target roll versus 3. Roll20 will show you each dice that was rolled, and then tell you the number of dice with a value of 3 or greater (note that ties with the target number count as a success!). You can also roll less-than target numbers, for example <code>/roll 10d6&lt;4</code>, which would give you a success for each dice rolled that is equal to 4 or less.<br />
<br />
You can also add modifiers onto your target rolls, and the modifier will be added to <em>each individual dice roll</em> before it is compared to the target number. However, if you're going to do so, it's recommended that you use a group just to make sure the parser fully understands what you want to do. So, <code>/roll {3d6+1}&lt;3</code> would roll 3 d6 dice, and for each dice roll add on 1, then compare it versus the target number of 3.<br />
<br />
<div class='diceroller'><br />
/roll 3d6&gt;3<br />
</div><br />
<br />
== Critical Success and Fumble Points ==<br />
<br />
You can also modify your dice rolls to allow you to specify set at which point a roll is considered to be a "Critical Success" or "Critical Failure (Fumble)".<br />
<br />
To show any roll equal to 10 or greater as a critical success, just do <code>/roll 1d20cs>10</code>. To show any roll equal to or less than 3 as a critical failure, just do <code>/roll 1d20cf<3</code>. To show any roll equal to 20 or 10 exactly as a critical success, just do <code>/roll 1d20cs20cs10</code>.<br />
<br />
''Note: These values will not affect other things that by default work on max roll value (including exploding, penetrating, etc.). It only affects the display of the roll result to the player. For example, if you want dice to explode on 18 or higher, and you want to show an 18 or higher as a critical, you would need to do <code>/roll 1d20!>18cs>18</code>.''<br />
<br />
<div class='diceroller'><br />
/roll 1d20cs>10<br />
</div><br />
<br />
== Rerolling Dice ==<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the orignal die value ignored.<br />
<br />
To use reroll, just do <code>/roll 2d8r&lt;2</code>. Roll20 will roll 2 d8 and reroll any 1s or 2s, dropping the original die value. If reroll for a specific value is needed the comparison operator can be left off. <code>/roll 2d8r8</code> will reroll any 8s. &gt; and &lt; can be used as comparisons and the r suffix can be specified multiple times. <code>/roll 2d8r1r3r5r7</code> would roll 2d8 and re-roll any odd number.<br />
<br />
<div class='diceroller'><br />
/roll 2d8r&lt;2<br />
</div><br />
<br />
== FATE Dice ==<br />
<br />
Roll20 also supports FATE dice (used for FATE, FUDGE, and other systems). Roll20 accurately simulates FATE dice as 6-sided dice in which two sides are 0, two sides are +1, and two sides are -1.<br />
<br />
To roll 4 FATE dice, just do <code>/roll 4dF</code>. Roll20 will show you the result of each individual FATE dice roll, then give you the total of all the dice rolls added up together. You can also add a modifier onto the total, with <code>/roll 4dF+1</code>.<br />
<br />
<div class='diceroller'><br />
/roll 4dF<br />
</div><br />
<br />
== Rounding Rolls and Math Functions ==<br />
<br />
You may want to use rounding in your roll formulas to emulate mechanics such as "half a level, rounded down to the nearest level." Roll20 provides several functions to accomplish this: <code>floor()</code> which will always round the number down (e.g. 5.7 becomes 5), <code>ceil()</code> which will always round the number up (e.g. 5.1 becomes 6), and <code>round()</code> which will always round to the nearest whole number (e.g. 4.4 becomes 4 and 4.5 becomes 5). You can use these functions almost anywhere in your roll formulas (around a single math expression, groups of math expressions, or even the entire roll). For example:<br />
<br />
<div class='diceroller'><br />
/roll floor(7/2) + 2d6<br />
</div><br />
<br />
We also provide other Math functions:<br />
<br />
* <code>abs()</code> will calculate the absolute value of the roll<br />
<br />
== Grouping Rolls ==<br />
<br />
Sometimes you may want to perform a series of rolls, and then compare each roll to a common check (like a success roll). Roll20 provides a &quot;grouped rolls&quot; functionality for this purpose. For example, you can roll two different pools of dice, then keep the highest dice roll across any of the pools:<br />
<br />
<div class="diceroller"><br />
/roll {4d6+3d8}kh1<br />
</div><br />
<br />
If you separate the rolls inside the group with a comma, then we'll sum each individual dice expression in the group before applying any modifiers. For example, if we change the above example to use a comma, instead of keeping the highest single roll, it will instead keep the highest group total:<br />
<br />
<div class="diceroller"><br />
/roll {4d6,3d8}kh1<br />
</div><br />
<br />
This is needed in games based on the Savage Worlds system, where important characters roll a "wild die" in parallel with their main die and choose the highest roll. <br />
<br />
Grouped rolls can be a very powerful features in Roll20. See more detail about them in the full dice specification below.<br />
<br />
<hr /><br />
<br />
<div class='alert'><br />
Below you'll find the entire Roll20 dice engine specification. This is the &quot;advanced&quot; documentation. If you're looking to do something totally crazy with Roll20 dice, this is a great place to see if we can support it.<br />
</div><br />
<br />
== Roll To Initiative ==<br />
To add a roll directly into Roll20's Turn Track (Rolling for Initiative), you'll need to incorporate a &quot;roll option&quot;. A roll option is a special Roll20 flag that you can set anywhere in a roll to tell the roll system you'd like to do special things with the roll. For adding an initiative number to the turn track, you'll first need to select the token you wish to roll for and use this formula:<br />
<br />
<code>/roll 1d20 + 5 &{tracker}</code><br />
<br />
The &{} part is where you put your options for the roll, and the "tracker" option is what says &quot;Show the results of this roll, but also use the result as the value in the turn tracker.&quot; If the token that you have selected doesn't already have a turn in the turn order, one will be added. If it already has at least one turn, all current turns will be updated with the new value.<br />
<br />
== Roll Templates ==<br />
<br />
[[Roll Templates]] are a special facet of the [[Character Sheets]] system which provide additional layout and styling options for the display of roll results. Using a [[Roll Templates|Roll Template]] is very easy to use. Just include a special flag in your chat message which tells Roll20 that you want to use a [[Roll__Templates|Roll Template]], and then provide all of the data that you want to include.<br />
<br />
Here's an example that uses the 'default' template (which all games have access to, regardless of the game system or [[Character Sheets]] you are using): <code><nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki></code><br />
<br />
''Note: If you're interested in using Roll Templates in your own custom macros or creating your own custom templates please vist the wiki entry on [[Roll Templates]].''<br />
<br />
<div class='diceroller'><br />
<nowiki>&{template:default} {{name= My Test Roll}} {{attack= [[1d20]]}} {{damage= [[2d6]]}}</nowiki><br />
</div><br />
<br />
== Roll20 Dice Specification ==<br />
<br />
=== Order of Operations ===<br />
While the Roll20 dice engine does support basic math and functions such as floor() and ceil(), it is first and foremost a dice engine, and so it has its own order of operations. This means that putting parentheses inside of your dice formula will not always affect the outcome of the roll (for example, you can't force a variable to be interpreted before a macro). Here is the general order of operations:<br />
<br />
# Abilities are expanded (meaning the definition of the ability is placed in the formula anywhere that ability appears).<br />
# Macros are expanded, including nested macros up to 99 levels deep.<br />
# Variables are substituted<br />
# Roll queries are executed (the player making the roll is asked to provide a value for each query, and that value is substituted in where the roll query appears in the formula)<br />
# All previous steps are repeated until there are no longer any unresolved abilities, macros, variables, or queries. This allows for nesting (e.g. putting an attribute in a macro).<br />
# Inline rolls are executed, starting with the most deeply nested inline roll working upward. The overall result of the inline roll is substituted in place where it appeared in the formula.<br />
# The remaining roll is executed: first, dice are rolled for any dice (e.g. "2d6" is rolled; including any special dice such as dropped or exploding), then the result of that roll is substituted into the formula. Next, floor() and ceil() functions are executed. Finally, the entire remaining formula is evaluated, including observing proper math order of operations (parentheses first, then multiplication/division, then addition/subtraction).<br />
<br />
=== Types Of Dice ===<br />
<br />
Roll20 supports more than just your standard polyhedrons when rolling dice, below are the available die types you can use in your games.<br />
<br />
==== Basic Roll <code>NdX</code> ====<br />
<br />
Rolls '''N''' traditional (almost, you can have any number of sides that you want) dice with '''X''' sides per die. '''N''' must be greater than or equal to 0 and '''X''' must be greater than or equal to 1.<br />
<br />
==== Fate/Fudge Roll <code>NdF</code> ====<br />
<br />
Rolls '''N''' Fate/Fudge dice. These dice have three sides with values of -1, 0, and 1.<br />
<br />
==== Computed Dice Roll <code>(N+Y)dX</code>/<code>Nd(X+Y)</code> ====<br />
<br />
Computes the number of dice to roll or the number of sides on the dice based on the mathematical expression in the parentheses. Dice computation can be used with both Basic and Fate dice.<br />
<br />
Within <code>(N+Y)dX</code>, the number of dice <code>(N+Y)</code> is rounded to the nearest whole number, just like [[Dice_Reference#Rounding_Rolls_and_Math_Functions|'''round(N+Y)''']].<br />
<br />
=== Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of dice rolls. Each modifier states which '''Types Of Dice''' it can be applied to in parentheses after the modifier name. Rolls can have multiple modifiers applied to a single roll to allow for complex dice expressions.<br />
<br />
* '''B''' - Basic Roll<br />
* '''F''' - Fate/Fudge Roll<br />
<br />
Many modifiers compare each die to a target number to decided if the modifier action should be applied. We'll call this a '''Compare Point''' or '''CP''' for short in the roll modifiers below. A Compare Point consists of an optional compare operation <code>&lt;</code>,<code>=</code>,<code>&gt;</code> and a target number. If the operation is not specified <code>=</code> is assumed and for most modifiers the entire Compare Point can be left off for the default behavior.<br />
<br />
* Example Compare Points<br />
* <code>3</code> - If the roll is equal to 3<br />
* <code>&gt;2</code> - If the roll is greater than or equal to 2<br />
* <code>&lt;18</code> - If the roll is less than or equal to 18<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
Normally when you perform a roll, Roll20 reports back the total value of all the dice rolled, plus any modifiers. Some game systems, though, work by rolling a set of dice versus a target number, and then adding up the total number of successes instead.<br />
<br />
* Example Success Checks<br />
* <code>3d6&gt;3</code> - Roll 3 d6's and count one success for each roll of 3 or higher<br />
* <code>10d6&lt;4</code> - Roll 10 d6's and count one success for each roll of 4 or less<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Some systems build on success checks by also including failures. Failure checks only work when a success check is already being done and each failure subtracts one from the total number of successes.<br />
<br />
* Example Failure Checks<br />
* <code>3d6&gt;3f1</code> - Roll 3 d6's and count one success for each roll of 3 or higher and one failure for each 1<br />
* <code>10d6&lt;4f&gt;5</code> - Roll 10 d6's and count one success for each roll of 4 or less and one failure for each roll of 5 or more<br />
<br />
==== Exploding Dice (B,F) <code>!CP</code> ====<br />
<br />
Exploding dice, also known as &quot;rule of 6&quot; or &quot;rule of 10s&quot; depending on your gaming system, rolls an additional die if the maximum is rolled. If the additional roll is also the maximum number the additional rolls keep on going! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Exploding Dice<br />
* <code>3d6!</code> - Rolls 3d6 and explodes every time a 6 is rolled<br />
* <code>3d6!&gt;5</code> - Rolls 3d6 and explodes every time a 5 or 6 is rolled<br />
<br />
==== Compounding Dice (B,F) <code>!!CP</code> ====<br />
<br />
Shadowrun (and some other systems, such as 7th Sea and L5R) use a special style of exploding dice where the the additional rolls for each dice are added together as a single &quot;roll&quot;. To do this, just use two exclamation marks instead of one. With the compounding exploding rolls a single roll can be infinitely high! The Compare Point can be specified to change the exploding trigger.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!!</code> - Rolls 5d6 and compound every time a 6 is rolled<br />
* <code>5d6!!5</code> - Rolls 5d6 and compound every time a 5 is rolled, 6's will be treated as a normal roll<br />
<br />
==== Penetrating Dice (B,F) <code>!pCP</code> ====<br />
<br />
HackMaster (and some other systems) use a special style of exploding dice where the additional rolls for each dice have 1 subtracted from the roll. To do this, add a p after the exclamation mark. A die can penetrate multiple times but the modifier is only ever -1 to each additional die.<br />
<br />
* Example Compounding Dice<br />
* <code>5d6!p</code> - Rolls 5d6 and explode with a -1 modifier every time a 6 is rolled<br />
* <code>5d6!p&gt;5</code> - Rolls 5d6 and explode with a -1 modifier every time a 5 or higher is rolled.<br />
<br />
==== Keep / Drop Dice (B,F) <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
Some game systems ask you to roll a large number of dice, and then either drop a certain number ('''N''') of the lowest rolls, or keep only a certain number ('''N''') of the highest rolls. Roll20 supports this type of roll through the <code>d</code> and <code>k</code> commands, respectively. The optional <code>h</code>/<code>l</code> parameter can either be <code>h</code> to keep or drop the highest '''N''' dice or <code>l</code> to keep or drop the lowest '''N''' dice. If not specified when keeping rolls the high rolls will be kept and when dropping rolls the low rolls will be dropped.<br />
<br />
* Example Keep Rolls<br />
* <code>8d100k4</code> - Roll 8 d100's and keep the four largest rolls.<br />
* <code>8d100kl4</code> - Roll 8 d100's and keep the four smallest rolls.<br />
* Example Drop Rolls<br />
* <code>8d100d4</code> - Roll 8 d100's and drop the four smallest rolls.<br />
* <code>8d100dh4</code> - Roll 8 d100's and drop the four largest rolls.<br />
<br />
==== Rerolling Dice (B,F) <code>rCP</code> ====<br />
<br />
Several systems require that certain dice be reroll, for example brutal weapons in D&amp;D 4e require any 1s or 2s to be re-rolled and the original die value ignored. The reroll modifier can be specified multiple times to allow rerolling at multiple Compare Points. By default the dice will continue to reroll until the result is inside the defined parameters. Optionally you can set the results to only reroll once regardless of the outcome. <br />
<br />
* Example Rerolls<br />
* <code>2d10r&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled<br />
* <code>8d6r</code> - Roll 8 d6's and reroll any time a 1 is rolled<br />
* <code>8d6r2r4r6</code> - Roll 8 d6's and reroll any time a 2, 4, or 6 is rolled<br />
* <code>2d6ro&lt;2</code> - Roll 2 d6's and reroll anything less than 2 but only once<br />
<br />
<br />
'''Special Case: Reroll Once (B,F) <code>roCP</code>'''<br />
<br />
In some systems (such as D&D 5E) you want to reroll dice below a certain value, but you only want to reroll the dice one time each. To do that, just use <code>ro</code> instead of <code>r</code>.<br />
<br />
* Example Reroll Once Rolls<br />
* <code>2d10ro&lt;2</code> - Roll 2 d10's and reroll any time a 2 or lower is rolled, but only up to one time per dice.<br />
<br />
==== Sorting Dice (B,F) <code>sa</code>/<code>sd</code> ====<br />
<br />
You may want to see your results in either ascending or descending order. The sorting modifier does just this. The order parameter is optional and specifies the order to sort with <code>a</code> for ascending and <code>d</code> for descending. Sorting defaults to ascending if order is not specified.<br />
<br />
* Example Rerolls<br />
* <code>8d6s</code> - Roll 8 d6's and sort the results in ascending order<br />
* <code>8d6sd</code> - Roll 8 d6's and sort the results in descending order<br />
<br />
===== Order of Operations for Modifiers =====<br />
<br />
Modifiers are applied in the following order:<br />
<br />
* Exploding, Compounding, Penetrating, Rerolls<br />
* These are applied while the dice are still rolling. imagine that you roll some exploding 6d6 on your table and the instant one of them settles as a 6 another die is rolled<br />
* Keep, Drop, Success, Failure, Sorting<br />
* These are applied after all of the dice have &quot;settled&quot; and all of the result values are known.<br />
<br />
=== Grouped Rolls ===<br />
<br />
Mutliple rolls can be perfomed within a group via curly braces using a comma to seperate the sub-roll expressions <code>{3d6+3d4+5, 2d8+4}</code>. Grouped Rolls have their own set of Group Modifiers which perform actions across the whole group.<br />
<br />
'''Note:''' each sub-roll expression within a Grouped Roll must contain elements of the same type:<br />
* "Sum rolls", which can be [[Dice_Reference#Basic_Roll_NdX|Basic Rolls]] or nested Group Rolls.<br />
* "[[Dice_Reference#Target_Number_.28Successes.29|Success rolls]]".<br />
* ("M rolls"—which are simply numbers—may be mentioned in an error message. However, unlike the other two roll types, M rolls are not required to be present within every sub-roll expression.) <br />
<br><br />
For example, <code>[[ {1d6, 5}kh1 ]]</code> will fail, but <code>[[ {1d6, 5 + 0d0}kh1 ]]</code> or <code> [[ {1d6, {5}}kh1 ]]</code> or <code> [[ {&#91;&#91;1d6&#93;&#93;, 5}kh1 ]]</code> will work.<br />
<br />
=== Grouped Roll Modifiers ===<br />
<br />
Modfiers that can change the behavior or outcome of grouped rolls. Grouped Rolls can have multiple modifiers applied to a group roll to allow for complex dice expressions.<br />
<br />
==== Keep / Drop <code>khN</code>/<code>klN</code>/<code>dhN</code>/<code>dlN</code> ====<br />
<br />
To apply a keep or drop modifier across multiple types of dice wrap the roll in a group. With a single Sub-Roll in the group the keep/drop operation is applied across all rolls. To choose the best or worse roll expression multiple sub-groups can be used. In this case the keep/drop operation is applied to the final result of each subgroup.<br />
<br />
* Single Sub-Roll Keep Example<br />
* <code>{4d6+3d8}k4</code> - Roll 4 d6's and 3 d8's, out of those 7 dice the highest 4 are kept and summed up.<br />
* Multiple Sub-Roll Drop Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}d1</code> - Roll each of the three sub-roll expressions and total them up. Drop the sub-roll expression with the lowest total and sum the other two totals as the result.<br />
<br />
==== Target Number / Successes (B,F) - <code>CP</code> ====<br />
<br />
The same concept as when using on Dice Rolls but with different behavor for a group. For a Grouped Roll with a single sub-roll expression the success check is done after the remaining math expressions have been totaled into each roll. Single sub-roll groups are also useful when doing a success check on a roll that has another Compare Point enabled modifer. For a Grouped Roll with a multiple sub-roll expression the success check is applied to the esult of each sub-roll expression.<br />
<br />
* Single Sub-Roll Success Example<br />
* <code>{3d20+5}&gt;21</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more.<br />
* <code>{2d6!}&gt;4</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater.<br />
* Multiple Sub-Roll Success Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more.<br />
<br />
==== Failures (B,F) - <code>fCP</code> ====<br />
<br />
Failure checks on groups work just like success checks.<br />
<br />
* Single Sub-Roll Failure Example<br />
* <code>{3d20+5}&gt;21f&lt;10</code> - Roll 3 d20's, for each roll add 5 and then count a success for each result of 21 or more and count a failure for each result of 10 or less.<br />
* <code>{2d6!}&gt;4f1</code> - Roll 2d6 exploding and count a success for each roll of 4 or greater and a failure for each roll of 1.<br />
* Multiple Sub-Roll Failure Example<br />
* <code>{4d6+2d8, 3d20+3, 5d10+1}&gt;40f&lt;10</code> - Roll each of the three sub-roll expression and total them up. Count one success for each sub-roll total of 40 or more and one failure for each sub-roll total of 10 or less.<br />
<br />
[[Category:Docs]]</div>235259https://wiki.roll20.net/Template:Icon_character_extended/docTemplate:Icon character extended/doc2017-04-27T17:16:51Z<p>235259: Created page with "{{documentation subpage|override=icon character extended/doc|Icon character extended}} Shorthand template for displaying a non-ASCII character in the default font and a specif..."</p>
<hr />
<div>{{documentation subpage|override=icon character extended/doc|Icon character extended}}<br />
Shorthand template for displaying a non-ASCII character in the default font and a specified font as two adjacent cells in a table. Specifically, this template is designed to be used with icon fonts for showing off what the icons are.<br />
<br />
== Parameters ==<br />
{| class="wikitable"<br />
|-<br />
! Index<br />
! Description<br />
|-<br />
| 1<br />
| The font to use, eg "Pictos"<br />
|-<br />
| 2<br />
| The character to use, eg <code>&amp;#xe800;</code><br />
|-<br />
| 3<br />
| An escaped version of #2, eg <code>&amp;amp;#xe800;</code>, to display a code usable to create the character<br />
|-<br />
| 4<br />
| ''Optional.'' Additional styles to apply to the styled character. For example, increase the font size to make the icon easier to see.<br />
|}<br />
<br />
== See Also ==<br />
* {{tl|icon character}}<br />
<br />
<includeonly>[[Category:Utility Templates]]</includeonly></div>235259https://wiki.roll20.net/Template:Icon_character/docTemplate:Icon character/doc2017-04-27T17:13:27Z<p>235259: </p>
<hr />
<div>{{documentation subpage|override=icon character/doc|Icon character}}<br />
Shorthand template for displaying a character in the default font and a specified font as two adjacent cells in a table. Specifically, this template is designed to be used with icon fonts for showing off what the icons are.<br />
<br />
== Parameters ==<br />
{| class="wikitable"<br />
|-<br />
! Index<br />
! Description<br />
|-<br />
| 1<br />
| The font to use, eg "Pictos"<br />
|-<br />
| 2<br />
| The character to use, eg "a"<br />
|-<br />
| 3<br />
| ''Optional.'' Additional styles to apply to the styled character. For example, increase the font size to make the icon easier to see.<br />
|}<br />
<br />
== See Also ==<br />
* {{tl|icon character extended}}<br />
<br />
<includeonly>[[Category:Utility Templates]]</includeonly></div>235259https://wiki.roll20.net/Template:Icon_character/docTemplate:Icon character/doc2017-04-27T17:13:04Z<p>235259: Created page with "{{documentation subpage|override=icon character/doc|Icon character}} Shorthand template for displaying a character in the default font and a specified font as two adjacent cel..."</p>
<hr />
<div>{{documentation subpage|override=icon character/doc|Icon character}}<br />
Shorthand template for displaying a character in the default font and a specified font as two adjacent cells in a table. Specifically, this template is designed to be used with icon fonts for showing off what the icons are.<br />
<br />
== Parameters ==<br />
{| class="wikitable"<br />
|-<br />
! Index<br />
! Description<br />
|-<br />
| 1<br />
| The font to use, eg "Pictos"<br />
|-<br />
| 2<br />
| The character to use, eg "a"<br />
|-<br />
| 3<br />
| ''Optional.'' Additional styles to apply to the styled character. For example, increase the font size to make the icon easier to see.<br />
|}<br />
<br />
== See Also ==<br />
* {{tl|icon character extended}}<br />
<includeonly>[[Category:Utility Templates]]</includeonly></div>235259https://wiki.roll20.net/Template:)/docTemplate:)/doc2017-04-27T17:09:13Z<p>235259: </p>
<hr />
<div>{{documentation subpage|override=)/doc|)}}<br />
Allows the inclusion of the '''}''' character in a place where the wiki markup would otherwise cause problems (for example, passing it as a parameter to a template).<br />
<includeonly>[[Category:Utility Templates]]</includeonly></div>235259https://wiki.roll20.net/Template:!/docTemplate:!/doc2017-04-27T17:08:53Z<p>235259: </p>
<hr />
<div>{{documentation subpage|override=!/doc|!}}<br />
Allows the inclusion of the '''|''' character in a place where the wiki markup would otherwise cause problems (for example, within a table).<br />
<includeonly>[[Category:Utility Templates]]</includeonly></div>235259https://wiki.roll20.net/Template:!Template:!2017-04-27T17:08:40Z<p>235259: </p>
<hr />
<div><nowiki>|</nowiki><noinclude>{{documentation}}</noinclude></div>235259https://wiki.roll20.net/Template:!/docTemplate:!/doc2017-04-27T17:08:24Z<p>235259: Created page with "{{documentation subpage|override=!/doc|!}} Allows the inclusion of the '''|''' character in a place where the wiki markup would otherwise cause problems (for example, within a..."</p>
<hr />
<div>{{documentation subpage|override=!/doc|!}}<br />
Allows the inclusion of the '''|''' character in a place where the wiki markup would otherwise cause problems (for example, within a table).<br />
<noinclude>[[Category:Utility Templates]]</noinclude></div>235259https://wiki.roll20.net/Template:!Template:!2017-04-27T17:07:28Z<p>235259: </p>
<hr />
<div><nowiki>|</nowiki><noinclude>{{documentation}}<br />
[[Category:Utility Templates]]</noinclude></div>235259https://wiki.roll20.net/Template:)/docTemplate:)/doc2017-04-27T17:06:24Z<p>235259: Created page with "{{documentation subpage|override=)/doc|)}} Allows the inclusion of the '''}''' character in a place where the wiki markup would otherwise cause problems (for example, passing ..."</p>
<hr />
<div>{{documentation subpage|override=)/doc|)}}<br />
Allows the inclusion of the '''}''' character in a place where the wiki markup would otherwise cause problems (for example, passing it as a parameter to a template).<br />
<noinclude>[[Category:Utility Templates]]</noinclude></div>235259