Trying to change color of labels

Hi I have made a character sheet based on the demo one it works great, I’m trying to change the color of the label text. I’ve tried style colour:black &nbsp;in various places can’t get it to work also the sheet seems to be narrower than the background .. html details&nbsp; &lt;main&gt; &nbsp; &lt;section class="header f-center"&gt; &nbsp; &nbsp; &lt;h1&gt;Example RPG&lt;/h1&gt; &nbsp; &nbsp; &lt;span&gt;The Template Sheet&lt;/span&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="common"&gt; &nbsp; &nbsp; &lt;label&gt;Char name: &lt;input name="attr_character_name" type="text"&gt;&lt;/label&gt; &nbsp; &nbsp; &lt;label&gt;Class: &lt;input name="attr_class" list="class" type="text" &gt;&lt;/label&gt; &nbsp; &nbsp; &lt;label&gt;Race: &lt;input name="attr_race" type="text" &gt;&lt;/label&gt; &nbsp; &nbsp; &lt;label&gt;HP: &lt;input type="number" name="attr_hp" value="20"&gt; / &lt;input type="number" name="attr_hp_max" value="20"&gt;&lt;/label&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="skill f-col nowrap"&gt; &nbsp; &nbsp; &lt;h3&gt;Attributes&lt;/h3&gt; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Body&lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_body" value="3"&gt; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_body" value="&amp;{template:rolls} {{title=Body}} {{subtitle=@{character_name} }} {{roll= [[d20+@{body}[body] ]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Mind&lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_mind" value="3"&gt; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_mind" value="&amp;{template:rolls} {{title=Mind}} {{subtitle=@{character_name} }} {{roll= [[d20+@{mind}[mind] ]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Soul&lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_soul" value="3"&gt; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_soul" value="&amp;{template:rolls} {{title=Soul}} {{subtitle=@{character_name} }} {{roll= [[d20+@{soul}[soul] ]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;h3&gt;Skills&lt;/h3&gt; &nbsp; &nbsp; &lt;div class="f-col nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Initiative &lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_init" value="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_init" value="&amp;{template:rolls} {{title=Initiative}} {{subtitle=@{character_name} }} {{roll= [[d20+(@{init}[init]) &amp;{tracker}]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="f-col nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Stealth &lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_stealth" value="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_stealth" value="&amp;{template:rolls} {{title=Stealth}} {{subtitle=@{character_name} }} {{roll= [[d20+(@{stealth}[stealth]) ]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="f-col nowrap"&gt; &nbsp; &nbsp; &nbsp; &lt;label&gt;Grapple &lt;/label&gt; &nbsp; &nbsp; &nbsp; &lt;div class="f-row nowrap"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_grapple" value="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="roll" name="roll_grapple" value="&amp;{template:rolls} {{title=Grapple}} {{subtitle=@{character_name} }} {{roll= [[d20+(@{body}[body])+(@{grapple}[grapple]) ]]}}"&gt; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp;&nbsp; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="power f-col"&gt; &nbsp; &nbsp; &lt;h3&gt;Powers&lt;/h3&gt; &nbsp; &nbsp; &lt;fieldset class="repeating_power"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_power" type="text" &gt; &nbsp; &nbsp; &lt;/fieldset&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="attack"&gt; &nbsp; &nbsp; &lt;h3&gt;Attacks&lt;/h3&gt; &nbsp; &nbsp; &lt;textarea name="attr_attacks"&gt;&lt;/textarea&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="inv"&gt; &nbsp; &nbsp; &lt;h3&gt;Inventory&lt;/h3&gt; &nbsp; &nbsp; &lt;textarea name="attr_inventory"&gt;&lt;/textarea&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;section class="misc"&gt; &nbsp; &nbsp; &lt;h3&gt;Physical Description&lt;/h3&gt; &nbsp; &nbsp; &lt;textarea name="attr_description"&gt;&lt;/textarea&gt; &nbsp; &lt;/section&gt; &nbsp; &lt;footer class="f-col f-center"&gt; &nbsp; &nbsp; &lt;span&gt;Generic copyright disclaimer&lt;/span&gt; &nbsp; &lt;/footer&gt; &lt;/main&gt; &lt;!-- Datalists &amp; thing that don't show directly on sheet --&gt; &lt;datalist id="class"&gt; &nbsp; &nbsp; &lt;option value="Fighter"&gt;Fighter&lt;/option&gt; &nbsp; &nbsp; &lt;option value="Mage"&gt;Mage&lt;/option&gt; &nbsp; &nbsp; &lt;option value="Expert"&gt;Expert&lt;/option&gt; &lt;/datalist&gt; &lt;!-- roll template --&gt; &lt;rolltemplate class="sheet-rolltemplate-rolls"&gt; &nbsp; &lt;div class="sheet-container"&gt; &nbsp; &nbsp; &lt;div class="sheet-header"&gt; &nbsp; &nbsp; &nbsp; {{#title}}&lt;div class="sheet-title"&gt;{{title}}&lt;/div&gt;{{/title}} &nbsp; &nbsp; &nbsp; {{#name}}&lt;div class="sheet-name"&gt;{{name}}&lt;/div&gt;{{/name}} &nbsp; &nbsp; &nbsp; {{#subtitle}}&lt;div class="sheet-subtitle"&gt;{{subtitle}}&lt;/div&gt;{{/subtitle}} &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="sheet-content"&gt; &nbsp; &nbsp; &nbsp; {{#allprops() title name subtitle desc}} &nbsp; &nbsp; &nbsp; &lt;div class="sheet-key"&gt;{{key}}&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-value"&gt;{{value}}&lt;/div&gt; &nbsp; &nbsp; &nbsp; {{/allprops() title name subtitle desc}} &nbsp; &nbsp; &nbsp; {{#desc}}&lt;div class="sheet-desc"&gt;{{desc}}&lt;/div&gt;{{/desc}} &nbsp; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;/rolltemplate&gt; CSS details &nbsp; /*----------------- Main Layout ------------------*/ /* A CSS Grid example using "grid-template-areas" &nbsp; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas</a> */ main { &nbsp; display: grid; &nbsp; width: 800px; &nbsp; height: 900px; &nbsp; grid-gap: 4px; &nbsp; grid-template-columns: 160px 1fr 1fr 1fr; &nbsp; grid-template-rows: 90px 1fr 1fr 1fr 20px; &nbsp; grid-template-areas:"header header &nbsp;header &nbsp;header" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "skill &nbsp;common &nbsp;common &nbsp;power" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "skill &nbsp;attack &nbsp;inv &nbsp; &nbsp; power" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "misc &nbsp; misc &nbsp; &nbsp;inv &nbsp; &nbsp; power" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "footer footer &nbsp;footer &nbsp;footer"; } /*----------------- GENERAL CSS ------------------*/ section { &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; border-style: solid; } /* CSS Flexbox styling, used for adjusting how content inside section behaves */ .f-col { &nbsp; display: flex; &nbsp; flex-direction: column; } .f-row { &nbsp; display: flex; &nbsp; flex-direction: row; } .wrap { &nbsp; display: flex; &nbsp; flex-wrap: wrap; } .nowrap { &nbsp; display: flex; &nbsp; flex-wrap: nowrap; } .f-center { &nbsp; align-items: center; &nbsp; justify-content: center; } /*----------------- Text &amp; Input styling -----------------*/ @import url("<a href="https://fonts.googleapis.com/css?family=Lexend&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Lexend&amp;display=swap</a>"); /* these are for overwriting default CSS that comes from Roll20 */ .charsheet * { &nbsp; font-family: "Lexend"; } .charsheet h3{ &nbsp; text-align: center; } .charsheet label{ &nbsp; margin: 3px; &nbsp; padding: 3px 0 0 0; } .charsheet input[type="text"], input[type="number"]{ &nbsp; margin: 2px 4px; } .charsheet textarea { &nbsp; width: 95%; &nbsp; height: 85%; } /*------------- Section-specific CSS -------------*/ .header { &nbsp; grid-area: header; &nbsp; background-color: olive; &nbsp; flex-direction: column; } .skill { &nbsp; grid-area: skill; &nbsp; background-color: orange; &nbsp; justify-content: space-evenly; } .common { &nbsp; grid-area: common; &nbsp; background-color: brown; } .power { &nbsp; grid-area: power; &nbsp; background-color: coral; } .power .repcontainer[data-groupname="repeating_power"]{ &nbsp; padding-bottom: 0.2em; } .power .repcontainer[data-groupname="repeating_power"] .repitem{ &nbsp; margin: 4px 0px; } .attack { &nbsp; grid-area: attack; &nbsp; background-color: green; } .inv { &nbsp; grid-area: inv; &nbsp; background-color: grey; } .misc { &nbsp; grid-area: misc; &nbsp; background-color: chocolate; } footer { &nbsp; grid-area: footer; &nbsp; background-color: lightgray; } /*------------------------------------*\ &nbsp; #ROLL TEMPLATES \*------------------------------------*/ .sheet-rolltemplate-rolls { &nbsp; font-family: "Lexend"; } .sheet-rolltemplate-rolls .sheet-container { &nbsp; border: 3px solid black; &nbsp; border-radius: 3px; } .sheet-rolltemplate-rolls .sheet-header { &nbsp; background-color: var(--header-bg-color, #a83521); &nbsp; color: var(--header-text-color, #FFF); &nbsp; text-align: left; &nbsp; text-transform: capitalize; &nbsp; padding: 5px; &nbsp; border-bottom: 2px solid black; } .sheet-rolltemplate-rolls .sheet-title, .sheet-rolltemplate-rolls .sheet-name { &nbsp; font-size: 1.4em; &nbsp; font-weight: bold; } .sheet-rolltemplate-rolls .sheet-subtitle { &nbsp; font-size: 1em; } .sheet-rolltemplate-rolls .sheet-container { &nbsp; --header-bg-color: #a83521; &nbsp; --header-text-color: #FFF; } .sheet-rolltemplate-rolls .sheet-content { &nbsp; display: grid; &nbsp; background: #FFF; &nbsp; grid-template-columns: auto auto; &nbsp; line-height: 1.4em; } .sheet-rolltemplate-rolls .sheet-content &gt; div { &nbsp; padding: 5px; } .sheet-rolltemplate-rolls .sheet-content .sheet-key { &nbsp; font-weight: bold; &nbsp; padding-right: 10px; &nbsp; text-align: right; } .sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3), .sheet-rolltemplate-rolls .sheet-content :nth-child(4n) { &nbsp; background: #EEE; }

Hi Chris, so adding color like this isn't working? .charsheet label { color: black; margin: 3px; padding: 3px 0 0 0; } If the color is getting overwritten, you might try adding some more specificity like so; .ui-dialog .tab-content .charsheet label { color: black; margin: 3px; padding: 3px 0 0 0; } or even adding a wild card to catch everything inside the label. example; .ui-dialog .tab-content .charsheet label * {...} Hard to tell on "...sheet seems to be narrower than the background" Is it your main element that is not wide enough?&nbsp; I often add outline: 2px solid red; or similar to better see what is happening with various elements when I'm working with layout issues. Outline is nice because it does not mess with the layout (ie taking up extra space) like border does.&nbsp; Maybe try adding an outline to main to help see what is happening.&nbsp; A screenshot may help demonstrate what the issue is as well.

vÍnce said: I often add outline: 2px solid red; or similar to better see what is happening with various elements when I'm working with layout issues. Outline is nice because it does not mess with the layout (ie taking up extra space) like border does.&nbsp; This is a nice technique, I'll start to do that.

Are main, section, footer and similar container names allowed in character sheet names? I always advise avoiding them because I know before CSE they weren't supported, but I don't know about now.

I have used section and have seen it used on other sheets, but cannot say for sure on the others.

GiGs said: vÍnce said: I often add outline: 2px solid red; or similar to better see what is happening with various elements when I'm working with layout issues. Outline is nice because it does not mess with the layout (ie taking up extra space) like border does.&nbsp; This is a nice technique, I'll start to do that. Thanks this helped the main size didn’t match the column sizes it was smaller. &nbsp;