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

Spaceing radio buttons, and otherwise making them look pretty

1650162006

Edited 1650195777
okay so I want each numbered circle to have a radio option, I'd also like the radio spheres to be semi-transperent, and be the color of the colomn they're on, finally I'd like them to be as large as the spheres they're ontop of HTML: &lt;div class="navigable-section-navigable-section--ship-power ship-power"&gt; &lt;div class="speed"&gt;&lt;!--&gt;Speed&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_speed" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_speed" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_speed" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_speed" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_speed" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_speed" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_speed" value="0"&gt; &lt;/div&gt; &lt;div class="OOC"&gt;&lt;!--&gt;O.O.C.&lt;--&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_ooc" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_ooc" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_ooc" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_ooc" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_ooc" value="0"&gt; &lt;/div&gt; &lt;div class="helm"&gt;&lt;!--&gt;Helm&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_helm" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_helm" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_helm" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_helm" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_helm" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_helm" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_helm" value="0"&gt; &lt;/div&gt; &lt;div class="guns"&gt;&lt;!--&gt;Guns&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_guns" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_guns" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_guns" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_guns" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_guns" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_guns" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_guns" value="0"&gt; &lt;/div&gt; &lt;div class="shields"&gt;&lt;!--&gt;Shields&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_shields" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_shields" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_shields" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_shields" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_shields" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_shields" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_shields" value="0"&gt; &lt;/div&gt; &lt;/div&gt; CSS code: div.ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: repeat(5, 40px); } div.speed, div.helm, div.guns, div.shields { position: relative; top: 150px; } div.speed { position: relative; left: 103px; } div.OOC { position: relative; top: 290px; left: 168px } div.helm { position: relative; left: 278px } div.guns { position: relative; left: 343px } div.shields { position: relative; left: 408px } [ edit ]
1650194426
GiGs
Pro
Sheet Author
API Scripter
You'll also need to post the html you're using for that section.
GiGs said: You'll also need to post the html you're using for that section. done
1650196572
GiGs
Pro
Sheet Author
API Scripter
I may be being dense, but it seems like you already have what you're asking for. What does the code not do, that you want it to do?
1650198337

Edited 1650198478
GiGs said: I may be being dense, but it seems like you already have what you're asking for. What does the code not do, that you want it to do? positioning I would like each radio to be above the value it represents in it's column, I know to the computer it'll just see ship speed is 4, but 4 right now, to people, is hovering between 5 &amp; 6, I would also like each radio to be transperant and the colour of each column (grey, blue, yellow, red, green) while active and invisible otherwise, and I would like them to as large as the circles they stand for aka. I'm trying to recreated what the glass marbles do in the IRL copy of the game like this:
1650199937

Edited 1650200909
GiGs
Pro
Sheet Author
API Scripter
You can use opacity:0 to hide an element, like this: div.ship-power div { &nbsp; &nbsp; margin-top : -20px ; &nbsp; &nbsp; margin-left : -15px ; } div.ship-power input [ type = radio ] { &nbsp; &nbsp; height : 60px ; &nbsp; &nbsp; width : 60px ; &nbsp; &nbsp; margin-bottom : 10px ; &nbsp; &nbsp; /* opacity: 0;*/ } The opacity is commented out so you can see the buttons. You probably also want to highlight which button is clicked right now (like an image of the marble that is displayed above the currently selected radio). I eyeballed the size, might be different. This code is after removing all the &lt;br&gt; elements from the html. The height, width, and margin is used for spacing. Look at the CSS wizardry page on the wiki for less clunkys way to layout the buttons. Edit: You probably want to give the 0 values a checked attribute, like so: &lt;input type="radio" id="1" name="attr_ship_speed" value="0" checked&gt; That's so the value is set to 0 by default. You also probably don't need the id's in there, unless you are using them for something else.
1650201894

Edited 1650203810
GiGs said: You can use opacity:0 to hide an element, like this: div.ship-power div { &nbsp; &nbsp; margin-top : -20px ; &nbsp; &nbsp; margin-left : -15px ; } div.ship-power input [ type = radio ] { &nbsp; &nbsp; height : 60px ; &nbsp; &nbsp; width : 60px ; &nbsp; &nbsp; margin-bottom : 10px ; &nbsp; &nbsp; /* opacity: 0;*/ } The opacity is commented out so you can see the buttons. You probably also want to highlight which button is clicked right now (like an image of the marble that is displayed above the currently selected radio). I eyeballed the size, might be different. This code is after removing all the &lt;br&gt; elements from the html. The height, width, and margin is used for spacing. Look at the CSS wizardry page on the wiki for less clunkys way to layout the buttons. okay with some value tweaks I got this, nailing position and size, leaving colour and transperancy, I'll test invisibility at the end CSS: div.ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: 700px 700px; display: grid; grid-template-columns: repeat(5, 40px); } div.ship-power div { margin-top: -20px; margin-left: -15px; } div.ship-power input[type=radio] { height: 60px; width: 60px; margin-bottom: -8px; } div.speed, div.helm, div.guns, div.shields { position: relative; top: 131px; } div.speed { position: relative; left: 102px; } div.OOC { position: relative; top: 272px; left: 167px } div.helm { position: relative; left: 277px } div.guns { position: relative; left: 342px } div.shields { position: relative; left: 407px }
1650202003
Finderski
Plus
Sheet Author
Compendium Curator
So, possibly a dumb question, but looking at the IRL game, that looks more like a game board. &nbsp;Does this need to be part of the character sheet, or can you create the layout on a page and provide a pog of some sort the players can move on the board as needed?
1650203949

Edited 1650209191
Finderski said: So, possibly a dumb question, but looking at the IRL game, that looks more like a game board. &nbsp;Does this need to be part of the character sheet, or can you create the layout on a page and provide a pog of some sort the players can move on the board as needed? well I'm installing it into the vehicle sheet as they have properties worth metioning including differeing values of this card incedentally I have gotten it to this but those boarders are anoying&nbsp; &nbsp;nevermind got it