Basic Character Sheet Hi. I am working on getting this setup. I am not sure how I want to style my resource posts just yet, so I'm leaving this blank for a minute.

I plan to extend this code as I develop gallery and tracker templates, but I wanted to get this part of it up for use as soon as possible for the beta open.

This template will be expanded soon! (I will also add documentation for the skin when I figure out how I want to format it.)

--ch-portrait-png is best used with a transparent png of your character. If you are unable to cut out a png yourself, you can use a service like remove.bg(external link) to do it for you! The Codes
Preview
CSS/***********************************
Character Sheet by Cherry of The Character Cloud
Customized by: Cherry
************************************/

:root {/* CSS COLORS EXAMPLE var(--ch-gradient) */
--ch-gradient: linear-gradient(38deg, rgba(12,36,0,1) 0%, rgba(9,121,11,1) 35%, rgba(0,151,255,1) 100%);
--ch-background: rgba(197,197,197, 0.8);
--ch-text: rgba(0,0,0,0.87);
--ch-links: rgba(9,121,11,1);
--ch-border-color: rgba(0,0,0,0.87);

/* BORDER RADIUS */
--ch-bigborder: 20px;
--ch-lilborder: 10px;

/* IMAGES */
--ch-bodybg:url(https://placehold.co/5000x5000); /* Body Background */
--ch-banner:url(https://placehold.co/500x150); /* Banner 500x150 */
--ch-portrait-background:url(https://placehold.co/400x400); /* Portrait Background 400x400*/
--ch-portrait-png:url(https://placehold.co/400x400); /* Transparent Portrait 400x400 */
}


/***********************************
Some General Stuff
************************************/

body{
background-image: var(--ch-bodybg);
background-size: cover;
background-attachment: fixed;
}

.sheetwrap{
display:relative;
width:900px;
margin:0 auto;
color:var(--ch-text);
}

.bar-wrap {
width: 190px;
margin-bottom:15px;
}
.bar-wrap span{
display: inline-block;
text-align: center;
width: 100%;
}
.the-bar {
height: 10px;
background: var(--ch-gradient);
display: block;
position:relative;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.the-bar::after{
content:'';
display: block;
height: 10px;
border: 1px solid var(--ch-border-color);
width:190px;
position: absolute;
top:-1px;
left:0px;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}

/***********************************
The Blocks
************************************/

.in{
height: 100%;
background: var(--ch-background);
padding:5px;
position: relative;
z-index: 5;
border: 4px double var(--ch-border-color);
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.in h3 {
margin-top: 0px;
text-align: center;
border-bottom: 1px solid var(--ch-border-color);
}

content {
display: block;
overflow: auto;
height: 88%;
margin-top: -10px;
padding: 0px;
}

.ch-basics .in ul {
list-style: none;
padding:0px;
margin: 0px;
}
.ch-basics .in li, .ch-inventory .in li {
padding:5px 0px;
border-bottom:1px solid var(--ch-border-color);
}

.ch-banner{
width:fit-content;
float:left;
display:inline-block;
padding:10px;
}
.ch-banner div.in{
align-content: center;
max-width:500px;
height:150px;
overflow: hidden;
margin-top:0px;
border:none;
padding:0px;
background-size: cover;
background-position: center;
background-image: var(--ch-banner);
}
.ch-banner img{
max-width:500px;
height:auto;
}
.ch-name{
height:150px;
margin-left: 10px;
width: 350px;
display: inline-block;
text-align: center;
}
.ch-name .in {
height: 130px;
}
.ch-name .in span{
font-size:2em;
}
.ch-basics {
float: left;
width: 220px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
height: 380px;
}
.ch-stats{
float: right;
width: 220px;
padding: 10px;
margin-top: 10px;
margin-left: 10px;
display: inline-block;
height: 380px;
}
.ch-stats .in, .ch-basics .in {
height: 360px;
overflow: auto;
}
.ch-portrait{
display: inline-block;
margin: 10px auto;
width: 400px;
height: 400px;
text-align: center;
overflow: hidden;
position:relative;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.ch-portrait .in{
background-color: transparent;
border: 0px;
padding: 0px;
box-shadow: inset 0px 0px 50px var(--ch-border-color);
background-size: cover;
background-position: center;
background-image: var(--ch-portrait-background);
z-index: 1;
width: 380px;
height: 380px;
margin: 0 auto;
margin-top: 10px;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.ch-portrait .in:before {
content: '';
display: block;
height: 410px;
width: 410px;
position: absolute;
top: -6px;
left: -5px;
z-index: 4;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}

.ch-portrait .ch-png{
position: absolute;
height: 400px;
width: 400px;
background-image: var(--ch-portrait-png);
background-position-x: center;
background-repeat: no-repeat;
background-size: contain;
top: 0px;
z-index: 10;
}
.ch-inventory{
width: 370px;
float: left;
display: inline-block;
margin-right: 10px;
height: 300px;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.ch-inventory .in ul {
list-style: none;
padding:0px;
margin: 0px;
}
.ch-inventory .in li:before {
font: var(--fa-font-solid);
font-family: 'FontAwesome';
content: '\f111';
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 0.4em;
margin: 0px 10px;
position: relative;
top: -3px;
}
.ch-inventory li.sub-item::before {
font: var(--fa-font-regular);
content: '\f111';
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 0.4em;
margin: 0px 10px 0px 25px;
}
.ch-appearance {
height: 300px;
display: inline-block;
width: 480px;
}
.ch-inventory .in, .ch-appearance .in, .ch-personality .in, .ch-bonds .in{
height: 280px;
overflow: auto;
}
.ch-personality{
width: 530px;
height: 300px;
display: inline-block;
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.ch-bonds{
width: 320px;
display: inline-block;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
}
.bondwrap {
margin-top: 10px;
border-bottom: 1px solid;
padding-bottom: 15px;
overflow: hidden;
}
.bond-guts {
margin-top: -20px;
height: 65px;
}
.bond{
display: block;
font-size: 0.8em;
}
.bond a {
color: var(--ch-links);
font-weight: bolder;
text-transform: uppercase;
font-size: 1.2em;
}
.bond-av {
padding: 10px;
display: block;
width: 50px;
border-radius: var(--ch-lilborder);
-o-border-radius: var(--ch-lilborder);
-webkit-border-radius: var(--ch-lilborder);
-moz-border-radius: var(--ch-lilborder);
}
.bond-av img{
width: 50px;
height: auto;
display: block;
float: left;
margin-right: 15px;
border-radius: var(--ch-lilborder);
-o-border-radius: var(--ch-lilborder);
-webkit-border-radius: var(--ch-lilborder);
-moz-border-radius: var(--ch-lilborder);
}
.bond-desc {
height: 45px;
overflow: auto;
display: block;
margin-right: 3px;
}
.ch-origin{
margin-bottom: 10px;
}
.ch-other{
margin-bottom: 10px;
}


.ch-banner, .ch-name, .ch-basics, .ch-inventory, .ch-appearance, .ch-stats, .ch-personality, .ch-bonds, .ch-origin, .ch-other{
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
padding:10px;
}

.clrchange{
position: relative;
}
.clrchange::after {
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: var(--ch-gradient);
opacity: 0.5;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}
.ch-portrait.clrchange .in::after {
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: var(--ch-gradient);
opacity: 0.2;
z-index:2;
border-radius: var(--ch-bigborder);
-o-border-radius: var(--ch-bigborder);
-webkit-border-radius: var(--ch-bigborder);
-moz-border-radius: var(--ch-bigborder);
}

.bond-av.clrchange::after{
width: 70px;
height: 70px;
opacity: 0.3;
border-radius: var(--ch-lilborder);
-o-border-radius: var(--ch-lilborder);
-webkit-border-radius: var(--ch-lilborder);
-moz-border-radius: var(--ch-lilborder);
}

::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: var(--color-surface-600);
}
::-webkit-scrollbar-thumb {
background: var(--ch-gradient);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-surface-500);
}
HTML[dohtml]<div class="sheetwrap">

<! –– Banner module begin ––>
<div class="ch-banner clrchange">
<div class="in">

<img src="https://files.jcink.net/uploads2/lovemeundead/Cherry/silas_app.gif">

</div>
</div>
<! –– Banner module begin ––>

<! –– Name Card module begin ––>
<div class="ch-name clrchange">
<div class="in">

<h3>Character Name</h3>

<span>First Last</span>


</div>
</div>
<! –– Name Card module end ––>

<div style="clear:both;"></div>

<! –– Information module begin ––>
<div class="ch-basics clrchange">
<div class="in">

<h3>Basics</h3>

<content>
<ul>

<li><strong>Nickname:</strong> Answer</li>
<li><strong>Pronouns:</strong> Answer</li>
<li><strong>Birthdate:</strong> Answer</li>
<li><strong>Age:</strong> Answer</li>
<li><strong>Location:</strong> Answer</li>
<li><strong>Occupation:</strong> Answer</li>

</ul>
</content>
</div>
</div>
<! –– Information module end ––>

<! –– Portrait module begin ––>
<div class="ch-portrait clrchange">
<div class="in"></div><div class="ch-png"></div>
</div>
<! –– Portrait module end ––>

<! –– Stats module begin ––>
<div class="ch-stats clrchange">
<div class="in">

<h3>Stats</h3>

<content>

[bar=Courage]80[/bar]
[bar=Strength]72[/bar]
[bar=Intelligence]54[/bar]
[bar=Street Smarts]88[/bar]
[bar=Survival Instinct]76[/bar]

</content>
</div>
</div>
<! –– Stats module end ––>

<! –– Inventory module begin ––>
<div class="ch-inventory clrchange">
<div class="in">

<h3>Inventory</h3>

<content>
<ul>

<li>List item</li>
<li class="sub-item">Sub list item</li>
<li class="sub-item">Sub list item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>

</ul>
</content>
</div>
</div>
<! –– Inventory module end ––>

<! –– Appearance module begin ––>
<div class="ch-appearance clrchange">
<div class="in">

<h3>Appearance</h3>

<content>

<p>This is where the appearance content will go.</p>

</content>
</div>
</div>
<! –– Appearance module end ––>

<div style="clear:both;"></div>

<! –– Personality module begin ––>
<div class="ch-personality clrchange">
<div class="in">

<h3>Personality</h3>

<content>

<p>This is where the personality content will go.</p>

</content>
</div>
</div>
<! –– Personality module end ––>

<! –– Bond module begin ––>
<div class="ch-bonds clrchange">
<div class="in">

<h3>Bonds</h3>

<content>

<! –– Connection begin ––>
<div class="bondwrap"><span class="bond-av clrchange">

<img src="https://placehold.co/50x50"></span><div class="bond-guts"><span class="bond">

<a href="#">First Last</a> - Best friend</span>

<span class="bond-desc">A short description of the relationship.</span>

</div></div>
<! –– Connection end ––>

<! –– Connection begin ––>
<div class="bondwrap"><span class="bond-av clrchange">

<img src="https://placehold.co/50x50"></span><div class="bond-guts"><span class="bond">

<a href="#">First Last</a> - Crush</span>

<span class="bond-desc">A longer description of the relationship that will cause the text to stretch past the threshold and force the scrollbar to appear.</span>

</div></div>
<! –– Connection end ––>

<! –– Connection begin ––>
<div class="bondwrap"><span class="bond-av clrchange">

<img src="https://placehold.co/50x50"></span><div class="bond-guts"><span class="bond">

<a href="#">First Last</a> - Trusted friend and stuff and things</span>

<span class="bond-desc">A short description of the relationship.</span>

</div></div>
<! –– Connection end ––>

<! –– Connection begin ––>
<div class="bondwrap"><span class="bond-av clrchange">

<img src="https://placehold.co/50x50"></span><div class="bond-guts"><span class="bond">

<a href="#">First Last</a> - Trusted friend</span>

<span class="bond-desc">A short description of the relationship.</span>

</div></div>
<! –– Connection end ––>

</content>
</div>
</div>

<! –– Bond module end ––>
<div style="clear:both;"></div>


<! –– Full width module begin ––>
<div class="ch-origin clrchange">
<div class="in">

<h3>Origin</h3>

<content>

<p>This is where the orgin content will go.</p>

</content>
</div>
</div>
<! –– Full width module end ––>

<! –– Full width module begin ––>
<div class="ch-other clrchange">
<div class="in">

<h3>Other</h3>

<content>

<p>This can be used to create more full width blocks.</p>
</content>
</div>
</div>
<! –– Full width module end ––>

</div>[/dohtml]
Panel One CSS.help-css.ponecss{display:none;}
Panel One HTML
Panel Two CSS.help-css.ptwocss{display:none;}
Panel Two HTML
Panel Three CSS.help-css.pthreecss{display:none;}
Panel Three HTML
CreditsBasic Character Sheet created by [url=https://rpgcharacter.cloud/member.php?action=profile&uid=1]Cherry[/url].
 Cherry (07-04-2024, 10:28 PM)
Quote

Comments
No comments to show at this time. You could be the first!