CSS Styling for custo, sheet

Hi all, I've posted this before but the answers were just too advanced for me. I have figured a couple of things with Github so I think that I'm ready to attempt to put a background image on my character sheet.  Just want the background to look like a sheet of parchment vs plain grey.  I have the Image uploaded to git hub, I just need the simplest code possible to make an image the background for my sheet.  thanks in advance -J

As a side note. I was looking at my master sheet on Github, the sheet on Github had many of the changes that I made to the sheet in the Roll20 custom sheet editor. I have not re-uploaded the sheet since I made the changes, but the sheet is changed. I made some more changes and checked Github, and they weren't reflected in Github.  What is happening?

You must have uploaded after making those changes. There is absolutely no link between the custom sheet editor and github. For your original question, all you need is css backgrounds . For your use case I'd recommend setting the background to repeat like so (assuming you have a div with a class of wrapper enclosing your whole sheet): .sheet-wrapper{ background-color: yellow; /*sets a default color to fall back to if the image fails*/ background-image:url(your_image_url_here.png);/*your image*/ background-repeat:repeat;/*repeat it as needed across and down*/ }

Thanks, I tried this to no effect. .sheet-wrapper{ background-color: yellow;&nbsp; background-image:url(<a href="https://github.com/jasoncrayne/roll20-character-sheets/blob/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg" rel="nofollow">https://github.com/jasoncrayne/roll20-character-sheets/blob/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg</a>); background-repeat:repeat; } is this correct?

Did you add a "wrapper" element around your sheet's html. something like; &lt;div class="sheet-wrapper"&gt; &nbsp; existing sheet code &lt;/div&gt; or if you already have a similar parent element, try adding the "sheet-wrapper" class to it.

holy shit!&nbsp; my sheet is yellow!! thanks soooooooo much now I just need to figure out why my image is not working.

Also is there a way to color the insides of the text cells?

What is the URL to your background image? Try this URL: <a href="https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg" rel="nofollow">https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg</a> .sheet-wrapper { background-color: yellow; background-image:url(<a href="https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg" rel="nofollow">https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg</a>); background-repeat:repeat; } Have you assigned a class to your text inputs yet?&nbsp; You can try a very general style like; input[type="text"] { &nbsp; background-color: red; } It's best to assign a class to various elements so you can better target your styles. ie &lt;input class="sheet-input-text" ...&gt;, then you can add the class to your css for more specificity input[type="text"].sheet-input-text { &nbsp; background-color: red; } You don't have to include "sheet-..." in your html class names because roll20 will automatically add it if it's not there when your sheet is loaded, but I often like to include it while I'm still working on a sheet.&nbsp; It helps me visually make the connection between my css and html and I often copy and paste directly from the browser inspector window and the code I'm working on.

things are coming up Millhouse! that fixed the Image, thank you so much.&nbsp; the people who help on the forums on Roll20 are incredible. I'm gonna try the rest of your ideas, cheers

JCrayne said: the people who help on the forums on Roll20 are incredible. Roll20's BIGGEST asset. ;-P

Is there a list of colors that work?&nbsp; I tried some off of&nbsp; <a href="https://www.w3schools.com/cssref/css_colors.asp" rel="nofollow">https://www.w3schools.com/cssref/css_colors.asp</a> but I could only get primary colors to work I figured this out

Last couple of questions, thanks a lot. this is my CSS styling as it stands. I have gotten most of it to work, but I don't understand what you mean by adding a Class? also, I can't seem to get the textarea to turn a color, I changed the code on the text area, the example below between the Talents and Feats, when I make the textarea an input= it loses its properties to expand when text is entered. Lastly, the background image keeps repeting lots of small images to make the background, how can I expant the image to cover the whole background? .sheet-wrapper{ background-color: yellow;&nbsp; background-image:url(<a href="https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg" rel="nofollow">https://raw.githubusercontent.com/jasoncrayne/roll20-character-sheets/4460ed5957cd933c4da2485712e01544edf89b5e/parchmentbackground.jpeg</a>); } input[type="text"] { &nbsp; background-color: yellow; } input[type="number"] { &nbsp; background-color: yellow; } input[type="textarea"] { &nbsp; background-color: yellow; } input[type="radio"] { &nbsp; background-color: yellow; } &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;h4&gt;:Talents:&lt;/h4&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;textarea name="attr_Magic-Talents"&nbsp; style="height: 50px" &gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;h4&gt;:Feats:&lt;/h4&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type=textarea name="attr_Magic-Feats"&nbsp; style="height: 50px"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp;&nbsp;

fixed my color and background image issues

You can enter any color you want (limited by standards and technology of course) This may help:&nbsp; <a href="https://htmlcolorcodes.com/" rel="nofollow">https://htmlcolorcodes.com/</a> &nbsp;You are not limited to pre-defined color names either.&nbsp; You might want to use a hex code ie #000000 When I mentioned adding a class; You can assign a class name to an element in the html and create a style for it in your css file.&nbsp; This helps you "target" specific elements for styling. So in the html; &lt;div class="sheet-something-blue" &gt;...&lt;/div&gt; and in the css file; .sheet-something-blue { &nbsp; &nbsp;background-color: blue; &nbsp; &nbsp;color: white; } That's a very basic example.&nbsp; CSS applies style to elements which "cascade" from general to specific.&nbsp; For example, you might have all div styled with a green background, div { &nbsp; &nbsp;background-color: green; } but if you wanted a div to be blue instead, you would include class="sheet-something-blue" to it.&nbsp; Adding the additional class assigns it a higher specificity &nbsp;which styles it with blue instead of green.

great thanks, I found the hex # for the color! any ideas on adding a color to the textarea.&nbsp; I've messed around a bit but in the code, there is no type= for the textarea if I add a type= then the cell isn't expanding with the text anymore. thanks again, this will solve all of my sheet css stuff for now. I actually ditched the background image for a solid color, it's so much easier on the eyes

You can try to style all textarea elements "generally" textarea { &nbsp; background-color: red; } You can also apply the same styling to multiple elements (just add a comma after each element, but not the last one.) like so; input[type="text"], input[type="number"], textarea { background-color: red; } But again, you can assign a class to your textarea to better target your styling. html; &lt;textarea class="sheet-textbox"&gt;...&lt;/textarea&gt; css; .sheet-textbox { background-color: red; }

awesome, that looks easy, which is my style. wherein the code do I place this? at the beginning, before a textarea? and the comma will help me clean up the code. Honestly, the last time I wrote any programming, before working on these sheets, was on an Apple 2+ html; &lt;textarea class="sheet-textbox"&gt;...&lt;/textarea&gt;

If you are able to style textarea elements without adding a class, that's fine and no need to edit the html. example; textarea { &nbsp; background-color: red; } Maybe try that first. Otherwise, you'll need to edit the html of the sheet.&nbsp; Look for &lt;textarea&gt; elements and either add class="sheet-textbox" to them or if there is already a class ie "sheet-foo"&nbsp;, you can simply include your additional class as well.&nbsp; ie &lt;textarea class="sheet-foo sheet-textbox"&gt;&lt;/textarea&gt;&nbsp; This allows you to apply different class styles to the same element.&nbsp; Maybe you have certain font choices in one class and background color, margins, padding, etc. in another.&nbsp; Lots of choices.

I see since all of my text, number, and textarea will look the same I don't have to worry about a class, but if I wanted one textarea to be different I would put that into the HTML code for a specific textarea cool,

There's lots of great tutorials/resources online for HTML and CSS.&nbsp; There are some specific rules/guidelines that sheet editors/authors need to be aware of that are unique to roll20 as pointed out in the wiki.&nbsp; Building a Character Sheet &nbsp; Have fun.