slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New tabbed character sheet (v3)

Browse Source 
New tabbed character sheet, with improved readability, over three tabs :
Main (stats, attacks, skills, special abilities), Numenera & Equipment,
Advancements & Background.
The attributes are the same (so are the macros and API functions), so
the campaign can be updated with the new sheet (HTML and CSS) and keep
existing character(s).
This commit is contained in:
NathaTerrien
2014-11-04 11:35:06 +01:00
parent ff4c9512f9
commit b4c6a7eabe
5 changed files with 41 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Numenera_NathasNumenera_English/NathasNumenera_tabs.css
-30
View File
@@ -5,7 +5,6 @@
{
box-sizing: border-box;
}
/* RADIO */
.charsheet input[type="radio"].sheet-falseRadio
{
@@ -45,36 +44,30 @@
{
content: '✔';
}
/* TABS HANDLING */
.sheet-desc-show:not(:checked)~.sheet-desc,
.sheet-macro-text-show:not(:checked)~.sheet-macro-text,
.sheet-sect-show:not(:checked)~.sheet-sect {
display:none;
}
.charsheet div[class^="sheet-section"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet div[class^="sheet-npc"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
max-height: 999998px;
/* visibility: visible;*/
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: auto;
}
.charsheet input.sheet-tab {
width: 180px;
height: 17px;
@@ -83,7 +76,6 @@
opacity: 0;
z-index: 9999;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
@@ -99,7 +91,6 @@
border-radius:6px;
font-size: 11px;
}
.charsheet input.sheet-tab::before {
content: attr(title);
text-align: center;
@@ -109,14 +100,11 @@
background: #4E686A;
color:white;
/* font-weight: bold; */
}
.charsheet input.sheet-tab:checked::before {
background: #4E686A;
color:white;
}
.charsheet input.sheet-tab1:checked ~ div.sheet-section-pc1,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-pc2,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-pc3,
@@ -128,18 +116,15 @@
overflow: hidden;
width: 100%;
}
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
{
/* background: gray; */
background: #4E686A;
color: white;
}
/* END TABS HANDLING */
.charsheet span.sheet-heavy {
font-size: 13px;
color: #000066;
@@ -154,18 +139,14 @@
color: #000000;
display: inline-block;
}
.charsheet input[type=text] {
margin: 1px 1px 1px 1px;
width: 100%;
height: 24px;
display: inline-block;
/* box-shadow: 0px 0px 6px 1px #eacb66 inset; */
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 1px solid #4E686A;
color: #000000;
text-align: left;
/* background: #fcf9ec; */
background: #FBFCFC;
border-radius:6px;
font-size: 12px;
@@ -179,7 +160,6 @@
display: inline-block;
height: 24px;
text-align: right;
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 1px solid #4E686A;
color: #000000;
background: #FBFCFC;
@@ -191,7 +171,6 @@
display: inline-block;
height: 24px;
text-align: right;
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 0px;
color: #000000;
background: #FBFCFC;
@@ -201,39 +180,32 @@
.charsheet input[type=checkbox] {
margin: 1px 1px 1px 1px;
display: inline-block;
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 1px solid #4E686A;
color: #000000;
background: #FBFCFC;
border-radius:6px;
font-size: 12px;
}
.charsheet select {
margin: 1px 1px 1px 1px;
height: 24px;
display: inline-block;
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 1px solid #4E686A;
color: #000000;
background: #FBFCFC;
border-radius:6px;
font-size: 12px;
}
.charsheet textarea {
/* max-width: calc( 100% - 10px ); */
margin: 1px 1px 1px 1px;
resize: vertical;
display: inline-block;
text-align: left;
/* box-shadow: 0px 0px 6px 1px #4E686A inset; */
border: 1px solid #4E686A;
color: #000000;
background: #FBFCFC;
border-radius:6px;
font-size: 12px;
}
.charsheet table td, .charsheet table th {
border-collapse : collapse;
@@ -286,12 +258,10 @@
}
.charsheet hr.sheet-two {
margin: 4px 4px 4px 4px;
/* color : #000066;*/
border: 1px dashed #000066;
}
.charsheet {
box-shadow: 0px 0px 12px 1px #4E686A inset;
/* border: 1px solid #4E686A; */
background-image: url("");
background-color: #FEFEFF;
background-attachment: fixed;
Numenera_NathasNumenera_English/NathasNumenera_tabs.htm
+28 -29
View File
@@ -1,4 +1,4 @@
<!------------ ******* HEADER **************** ----------------------------------->
<!-- ******* HEADER **************** -->
<div class="sheet-2colrow" width="100%">
<div class="sheet-col">
<span class="sheet-heavy">NAME</span>
@@ -11,15 +11,15 @@
<input type="radio" name="attr_PcOrNpc" class="sheet-tab sheet-tab1" value="1" title="PC1" checked="checked" />
<span class="sheet-tab sheet-tab1">Main</span>
<input type="radio" name="attr_PcOrNpc" class="sheet-tab sheet-tab2" value="2" title="PC2" />
<span class="sheet-tab sheet-tab2">Numen&eacute;ra & Equipment</span>
<span class="sheet-tab sheet-tab2">Numen&eacute;ra &amp; Equipment</span>
<input type="radio" name="attr_PcOrNpc" class="sheet-tab sheet-tab3" value="3" title="PC3" />
<span class="sheet-tab sheet-tab3">Advancement & Background</span>
<span class="sheet-tab sheet-tab3">Advancement &amp; Background</span>
<!--
<input type="radio" name="attr_PcOrNpc" class="sheet-tab sheet-tab4" value="4" title="NPC" />
<span class="sheet-tab sheet-tab4">NPC</span>
-->
<hr class="sheet-two" width="100%"/>
<!------------ ******* NPC **************** ----------------------------------->
<!-- ******* NPC **************** -->
<div class="sheet-section sheet-section-npc" width="100%">
<div class="sheet-2colrow" width="100%">
<div class="sheet-col" width="50%" align="left"> <!-- BEGIN Column 1 -->
@@ -96,11 +96,11 @@
<label>Description:</label><br/>
<textarea name="attr_npcDescription" style="width: 100%; height: 150px;" title=""></textarea>
</div> <!-- END NPC sheet -->
<!------------ ******* PC **************** ----------------------------------->
<!-- PC SECTION 1 -->
<!-- ******* PC **************** -->
<!-- ******* PC TAB 1 -->
<div class="sheet-section sheet-section-pc1" width="100%">
<!-- 2 COLS SECTION 1 -->
<div class="sheet-2colrow" width="100%">
<!-- ******* PC TAB 1 COL 1 -->
<div class="sheet-col" style="width: 35%;"> <!-- BEGIN Column 1 -->
<div width="100%"> <!-- BEGIN Descriptor, Type, Focus -->
<table width="100%">
@@ -158,6 +158,7 @@
</fieldset>
</div> <!-- END inabilities -->
</div> <!-- END column 1 -->
<!-- ******* PC TAB 1 COL 2 -->
<div class="sheet-col" style="width: 60%;"> <!-- BEGIN column 2 -->
<div> <!-- BEGIN stats and Tiers -->
<table width="100%" align="center">
@@ -273,14 +274,13 @@
</fieldset>
</div> <!-- END special abilities -->
</div> <!-- END column 2 -->
</div> <!-- END 2 COLS SECTION 1 -->
</div>
<!-- PC SECTION 2 -->
</div>
</div> <!-- END TAB 1 -->
<!-- ******* PC TAB 2 -->
<div class="sheet-section sheet-section-pc2" width="100%">
<!-- 2 COLS SECTION 2 -->
<div class="sheet-2colrow" width="100%">
<!-- BEGIN Column 1 SECTION 2 -->
<div class="sheet-col">
<!-- ******* PC TAB 2 COL 1 -->
<div class="sheet-col"> <!-- BEGIN Column 1 -->
<div> <!-- BEGIN Numenera -->
<span class="sheet-heavy">NUMEN&Eacute;RA</span></td>
<hr/>
@@ -338,9 +338,9 @@
</table>
</fieldset>
</div> <!-- END Numenera -->
</div>
<!-- BEGIN Column 2 SECTION 2 -->
<div class="sheet-col">
</div> <!-- END Column 1 -->
<!-- ******* PC TAB 2 COL 2 -->
<div class="sheet-col"> <!-- BEGIN Column 2 -->
<div width="100%"> <!-- BEGIN armor -->
<table align="left" width="100%">
<tr>
@@ -382,15 +382,14 @@
<tr><td WIDTH="100%"><textarea name="attr_possessions" style="height: 250px; width: 100%;" title="Miscellaneous equipment"></textarea></td></tr>
</table>
</div> <!-- END Equipment -->
</div>
</div> <!-- END 2 COLS SECTION 2 -->
</div> <!-- END SECTION 2 -->
<!-- PC SECTION 3 -->
</div> <!-- END Column 2 -->
</div>
</div> <!-- END TAB 2 -->
<!-- ******* PC TAB 3 -->
<div class="sheet-section sheet-section-pc3" width="100%">
<!-- 2 COLS SECTION 3 -->
<div class="sheet-2colrow" width="100%">
<!-- BEGIN Column 1 SECTION 3 -->
<div class="sheet-col" width="50%" align="left">
<!-- ******* PC TAB 3 COL 1 -->
<div class="sheet-col" width="50%" align="left"> <!-- BEGIN Column 1 -->
<div width="100%"> <!-- BEGIN advancements -->
<span class="sheet-heavy">ADVANCEMENTS</span>
<div style="font-size: 10px; text-align: left;">
@@ -447,13 +446,13 @@
</div>
</div>
</div> <!-- END advancements -->
</div>
<!-- BEGIN Column 2 SECTION 3 -->
<div class="sheet-col" width="50%" align="right">
</div> <!-- END Column 1 -->
<!-- ******* PC TAB 3 COL 2 -->
<div class="sheet-col" width="50%" align="right"> <!-- BEGIN Column 2 -->
<div width="100%"> <!-- BEGIN background -->
<span class="sheet-heavy">BACKGROUND</span>
<textarea name="attr_background" style="height: 400px; width: 100%;"></textarea>
</div> <!-- END background -->
</div> <!-- END Column 2 SECTION 3 -->
</div> <!-- END 2 COLS SECTION 3 -->
</div> <!-- END SECTION 3 -->
</div> <!-- END Column 2 -->
</div>
</div> <!-- END TAB 3 -->
Numenera_NathasNumenera_English/NathasNumenera_tabs.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

Numenera_NathasNumenera_English/ReadMe.md
+12 -3
View File
@@ -4,6 +4,9 @@ Scroll down to the end of this Readme for the Release Notes.
Note: there's a french version of the very same sheet/macros/scripts, for those interested.
See [Numenera_NathasNumenera_French](https://github.com/Roll20/roll20-character-sheets/tree/master/Numenera_NathasNumenera_French).
# Current version:
Version 3 (november 2014) : [Screenshot](NathasNumenera_tabs.jpg).
# Basic use:
## How to set up the character sheet
@@ -11,15 +14,15 @@ See [Numenera_NathasNumenera_French](https://github.com/Roll20/roll20-character-
2. Click on _"Campaign Settings"_
3. Scroll down to _"Character Sheet Template"_
4. Choose _"Custom"_
5. In the _"HTML Layout"_ tab, paste the contents of the [HTML file](https://github.com/Roll20/roll20-character-sheets/blob/master/Numenera_NathasNumenera_English/NathasNumenera_Roll20_CharacterSheet_Layout.htm)
6. In the _"CSS Styling"_ tab, paste the contents of the [CSS file](https://github.com/Roll20/roll20-character-sheets/blob/master/Numenera_NathasNumenera_English/NathasNumenera_Roll20_CharacterSheet_CSS.css)
5. In the _"HTML Layout"_ tab, paste the contents of the [HTML file](NathasNumenera_tabs.htm)
6. In the _"CSS Styling"_ tab, paste the contents of the [CSS file](NathasNumenera_tabs.css)
7. Scroll down and click _"Save Changes"_
## How to set up a character and its token
1. Start your campaign
2. Create a new _"Character"_ in the _"Journal"_
3. Fill at least the character's name and the 3 Stats (current and max values): Might, Speed and Intellect
4. Create/use a token for the character as in this [screenshot](https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Numenera_NathasNumenera_English/NathasNumenera_setup_the_character_token.jpg):
4. Create/use a token for the character as in this [screenshot](NathasNumenera_setup_the_character_token.jpg):
1. Make sure it representents the character you've created
2. Assign _"bar1"_ to the _"might"_ attribute
3. Assign _"bar2"_ to the _"speed"_ attribute
@@ -44,6 +47,12 @@ See [Numenera_NathasNumenera_French](https://github.com/Roll20/roll20-character-
7. Repeat steps 4 to 6 for every other characters and you're set.
# Release Notes
##Release 3.0 (11/04/2014)
*New tabbed character sheet*, with improved readability, over three tabs : Main (stats, attacks, skills, special abilities), Numen&eacute;ra & Equipment, Advancements & Background.
The attributes are the same (so are the macros and API functions), so you can update your campaign with the new sheet (HTML and CSS) and existing character(s).
The [old sheet](NathasNumenera_Roll20_CharacterSheet_Screenshot.jpg) files (3 columns on one page/tab) are still available, if needed : [HTML file](NathasNumenera_Roll20_CharacterSheet_Layout.htm) and [CSS file](NathasNumenera_Roll20_CharacterSheet_CSS.css).
##Release 2.7 (09/22/2014)
No change to the character sheet.
Moved the API scripts and Macros files to Git.
Numenera_NathasNumenera_English/sheet.json
+1 -1
View File
@@ -4,5 +4,5 @@
"authors": "Nathanael TERRIEN",
"roll20userid": "75857",
"preview": "NathasNumenera_tabs.jpg",
"instructions": "v3.0 (2014/11/03) To set up a token that's linked to the character sheet, and optionally for API scripts and macros to go with the sheet, check the README.md file at https://github.com/Roll20/roll20-character-sheets/blob/master/Numenera_NathasNumenera_English/ReadMe.md."
"instructions": "v3.0 (2014/11/04) To set up a token that's linked to the character sheet, and optionally for API scripts and macros to go with the sheet, check the README.md file at https://github.com/Roll20/roll20-character-sheets/blob/master/Numenera_NathasNumenera_English/ReadMe.md."
}