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 .
×
Create a free account

[Help] CSS: Doctor Who Character Sheet

I thought I would try and pull this sheet together myself and have got so far literally by cutting and pasting from other sheets (Star Frontiers, and Atomic Highways to be precise). The sheet I am using for inspiration can be found here: Character Sheet Link I am struggling to achieve a couple of things and hope for some help: 1. The Doctor Who banner to center align. 2. Dark Blue Borders for the White Attributes and Skills boxes. 3. The Unchecked radio boxes (Attributes) are very faint. I would like to make them bolder. 4.I would like to use diamonds rather than Circles for Skills, as on the linked sheet. From an HTML standpoint: 1) The linked character sheet has three columns, not only two. I am unable to add the third column without seriously affecting the layout of the other two columns. Advice on how to add the third column appreciated. Many thanks if any advice can be offered. I will continue to work on this with trial and error, but would appreciate a steer.
Usually, there are multiple ways to accomplish most everything in css and html.  Brian will likely show up and tell you the quickest, and most elegant way to accomplish your goals, but until then: 1. Try setting the left and right margins of the you banner to "auto".   .sheet-banner { margin-left: auto; margin-right: auto; } 2. That would be box-shadow or text-shadow, if I am reading it right. 3. Ooo...this one is  here , if you are interested in the origin of those checkboxes.  To darken up the checkbox, find the code for the fake radio/checkbox and either thicken the border or use a darker color. code  4.   I would try finding a diamond (or square canted to the side via: transform:rotate) image, linking it to a div, and putting the number inside of that with the position set to 'relative'.  As for the columns, you can go in and tinker with the column widths.  Be mindful that the data may not fit properly into three columns, and switching to two columns may be the better choice.
Many Thanks. I will give the solutions a try. For 2. I am trying to round the edges and add a blue border as below. Rounding the edges I'm not sure where to start. Adding a border hasn't been a problem before but I am struggling to make it work here.  
1440332572
Lithl
Pro
Sheet Author
API Scripter
Rounded corners is accomplished with the border-radius  property.
Brian said: Rounded corners is accomplished with the border-radius  property. Thank You. I have got the rounded border working. A further question. How do you nudge the table names (Name and Description) in a small bit they are sitting a bit close to the border? Many Thanks
Coal Powered Puppet and Brian. Thank You for the information in your posts. I have a couple of tweaks to make but I am pleased with the overall result. Thanks