Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
Advertisement Create a free account Compendium in Game, Join Today

Styling questions

1397067121
Josiah B.
Plus
Sheet Author
I am trying to style some specific buttons to have a set width but I cant seem to get it to work. here is my css so far .sheet-MacroButtons { width: 400px; } html: class='sheet-MacrosButtons' is this one of the security issues?
1397068589
Riley D.
Roll20 Team
You have .sheet-MacroButtons in the CSS but sheet-MacrosButtons in the HTML (note the extra "s" after Macro). Fix that and it should work, if not let me know!
1397071400
Josiah B.
Plus
Sheet Author
Riley D. said: You have .sheet-MacroButtons in the CSS but sheet-MacrosButtons in the HTML (note the extra "s" after Macro). Fix that and it should work, if not let me know! oops! Sorry!
1397135185
Josiah B.
Plus
Sheet Author
Can we use ID's for styling, or are we limited to classes? Im trying to style a specific sheet-col, but i want to use the css file rather than putting it in the html.
1397136556
Riley D.
Roll20 Team
Josiah B. said: Can we use ID's for styling, or are we limited to classes? Im trying to style a specific sheet-col, but i want to use the css file rather than putting it in the html. Don't use IDs. Since there is multiple copies of each sheet on the page, for example if you had a sheet-col with an ID of "#specialcol", there would actually be a "specialcol" for each Character in the game -- which from an HTML standpoint isn't a good idea (there should only be on unique ID of each element on a page). So you may just have to use a class even if you only have one col with that class.
1397141157
Brian
Sheet Author
API Scripter
That said, an element can have multiple classes: <div class="sheet-col3 pretty-col super-awesome-class red">...</div>
1397161031
Josiah B.
Plus
Sheet Author
Brian said: That said, an element can have multiple classes: <div class="sheet-col3 pretty-col super-awesome-class red">...</div> I did not know that. thanks!
1397190613
Ryan
Pro
Something's not flowing right for me. None of the css I've tried so far applies to my preview. The simplest example of the problem is shown below. It's meant to make all the text use the Navy Blue color, and inspecting the elements, the class names are being html'd properly, yet there is no color change unless I use a Style attribute in sheet-main-container. My CSS: .sheet-main-container { color: navy; } My HTML: <div class="sheet-main-container"> ... <p>Lorem Ipsum...</p> </div> Any thoughts what's failing?
1397216905

Edited 1397217199
Alicia
Sheet Author
Did you try it without the dash between main and counter? edit. You may want to try this first. Just remembered when you define another class it usually wants the parent of .charsheet. .charsheet div.sheet-main-container {
1397233028
Brian
Sheet Author
API Scripter
Does the template work in the VTT but only fail on the preview tab? I've had some issues which only occur on preview but work in practice.
1397247687
Alicia
Sheet Author
Maybe someone can help me with this.. If I have an input and select next to each other it's been doing this weird caddy corner layout rather than being on the same line. <a href="https://docs.google.com/file/d/0BzHYulLjxAGXSVlZSn" rel="nofollow">https://docs.google.com/file/d/0BzHYulLjxAGXSVlZSn</a>... Code can be found here: <a href="https://github.com/alicia86/roll20-character-sheets/tree/master/Star%20Wars%20Saga%20Edition" rel="nofollow">https://github.com/alicia86/roll20-character-sheets/tree/master/Star%20Wars%20Saga%20Edition</a>
1400094713
Josiah B.
Plus
Sheet Author
perhaps someone can help. I am trying to use the display property to keep some of my elements inline. but it's not seeming to take. Display:none works, but inline doesnt seem to do anything. &lt;div class='sheet'&gt; &lt;div class='sheetrow'&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="text" name="attr_name" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;label&gt;Rank:&lt;/label&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="text" name="attr_rank" value="Novice" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;label&gt;XP:&lt;/label&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="number" name="attr_xp" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;img class='logo' src="<a href="http://i.imgur.com/iwIoTlT.png" rel="nofollow">http://i.imgur.com/iwIoTlT.png</a>" style='display:block;'/&gt; &lt;/div&gt; &lt;div class='sheetrow'&gt; tesxt1 &lt;/div&gt; &lt;div class='sheetrow'&gt; tesxt1 &lt;/div&gt; &lt;/div&gt; css .charsheet { background-image: url("<a href="http://freeseamlesstextures.com/images/28-faded-parchment-background-sml.jpg" rel="nofollow">http://freeseamlesstextures.com/images/28-faded-parchment-background-sml.jpg</a>"); } .sheet { width: 900px; } .charsheet div { width: 900px; border: 1px solid black; } .charsheet table tr td { border: 1px solid black; } .logo { display:none; }
1400100627
Riley D.
Roll20 Team
I don't see display: inline anywhere in your sample code?
1400100629
Brian
Sheet Author
API Scripter
What's supposed to be inline? You've got the logo class set to display: none in your CSS, but the image in your HTML with the class logo has an inline style setting it to display: block.
1400101300
Josiah B.
Plus
Sheet Author
ah, that's supposed to be inline, i was testing none and none worked on the element on the element worked but not when it's in the class.
1400102099

Edited 1400102160
Brian
Sheet Author
API Scripter
Inline styles (&lt;img style="foo: bar" /&gt;) will always override styles in a &lt;style&gt; block, which will always override styles linked from another file. This is part of where the "cascading" part of "cascading style sheets" comes from. Is that what your problem was?
1401387934
Josiah B.
Plus
Sheet Author
So another issue, I am trying to work with display:inline but it's not seeming to work. I am trying to build this sheet and was thinking I could use inline display to get things to flow. &lt;div class='sheet-character'&gt; &lt;div&gt; &lt;label style='display:inline;'&gt;Name: &lt;/label&gt; &lt;input name='attr_name' style='display:inline;' type='text'&gt; &lt;/div&gt; &lt;div class='sheet-stats' style='margin-top:10px; display:inline; border: 1px black solid; width:400px;'&gt; &lt;div&gt; &lt;div style='width:200px; display:inline;'&gt;Body:&lt;/div&gt; &lt;input name='attr_body' style='display:inline; width:125;' type='text'&gt; &lt;/div&gt; &lt;div&gt; &lt;div style='width:200px; display:inline;'&gt;Mind:&lt;/div&gt; &lt;input name='attr_mind' style='display:inline; width:125;' type='text'&gt; &lt;/div&gt; &lt;div&gt; &lt;div style='width:200px; display:inline;'&gt;Soul:&lt;/div&gt; &lt;input name='attr_soul' style='display:inline; width:125;' type='text'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='sheet-calcs' style='display:inline; width:250px'&gt; something &lt;/div&gt; &lt;/div&gt; namely, stats and calcs are not aligning next to eachother. Also, the divs surrounding body mind and soul are not going out to the width I am trying to specify. thanks!
1401392475
Brian
Sheet Author
API Scripter
Stats is an inline element, but it contains three children which are all block-level elements. That's causing problems; you can see that the problem goes away if I comment out the block elements: jsfiddle Instead of display: inline, you might try float:left: jsfiddle
1401392855
Josiah B.
Plus
Sheet Author
Brian said: Stats is an inline element, but it contains three children which are all block-level elements. That's causing problems; you can see that the problem goes away if I comment out the block elements: jsfiddle Instead of display: inline, you might try float:left: jsfiddle thanks! How about the divs not going to the width stated?
1401394102
Brian
Sheet Author
API Scripter
The width of an inline element is ignored. You could use inline-block instead. (inline-block would also work for stats as an alternative to float.)
1401394330
Moving this to the Character Sheet forum as it may be more helpful there as well.
1401397891
Josiah B.
Plus
Sheet Author
Brian said: The width of an inline element is ignored. You could use inline-block instead. (inline-block would also work for stats as an alternative to float.) thanks, I finished the sheet, but I may go back and optomize it a bit more. <a href="https://github.com/herrozerro/roll20-character-sheets/tree/master/Fugue" rel="nofollow">https://github.com/herrozerro/roll20-character-sheets/tree/master/Fugue</a>