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

Changing the Text on a Tab Radio Button

On the L5R sheet, the first thing I noticed trying to run the Topaz Championship (pretty much a perfect microcosm of the game), is that the traits needed to be visible on every tab. So I moved them above the tab selection. No problem (well, few problems.) The issue is the first tab is called "Traits" and the traits aren't there anymore. I want to change it to something like "Information." (Or something better if I can think of it.) Before I try, it looks like this: <div> <input type="radio" name="attr_tab" value="traits" checked="checked" /><span data-i18n="traits-u" title="Traits"></span> <input type="radio" name="attr_tab" value="skills" /><span data-i18n="skills-u" title="Skills"></span> <input type="radio" name="attr_tab" value="weapons" /><span data-i18n="weapons-u" title="Weapons"></span> <input type="radio" name="attr_tab" value="spells" /><span data-i18n="spells-u" title="Spells"></span> <p></p> <div> After the change it looks like this: <div> <input type="radio" name="attr_tab" value="traits" checked="checked" /><span data-i18n="information-u" title="Information"></span> <input type="radio" name="attr_tab" value="skills" /><span data-i18n="skills-u" title="Skills"></span> <input type="radio" name="attr_tab" value="weapons" /><span data-i18n="weapons-u" title="Weapons"></span> <input type="radio" name="attr_tab" value="spells" /><span data-i18n="spells-u" title="Spells"></span> <p></p> <div> I've also changed the translation file, of course. After the change, it puts a gap between the Information and Skill button and prints "Information" both on the button and again in the gap. The "information" in the gap appears to be the span data lable, if I pull it from the translation file, that's the one that turns red with brackets. If I change the value setting from traits it does the same thing (But breaks the sheet switching logic, so I haven't bothered yet). Any ideas why this behaves differently from when it says "Traits"? I've tried with "Vitals" in case information was too long. It does the same thing.
1496663149
Pat S.
Forum Champion
Sheet Author
Try changing the first value=traits  in the line to what you want and see if that changes your output.
I've changed that again just to be thorough. No difference. Found the references in CSS and changed them too.
1496683129
Lithl
Pro
Sheet Author
API Scripter
This is likely being caused by the CSS somewhere. If you could share the CSS (and a screenshot of the problem), we might be able to help more.
Thanks, Brian, I wasn't sure what to narrow in on. Here's a screenshot: I believe this is all the relevant CSS (not sure which is the most relevant): input.sheet-tab { width: 100px; height: 18px; position:inherit; } input.sheet-tab:first-of-type { margin-left: 5px; } input.sheet-tab:first-of-type + span::before { margin-left: -85px; } input.sheet-tab + span::before, input.sheet-tab:checked ~ input.sheet-tab + span::before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #DDC69A; background-image: -webkit-gradient(linear, left top, left bottom, from(#DDC69A), to(#745035 )); background-image: -webkit-linear-gradient(top, #DDC69A, #745035 ); background-image: -moz-linear-gradient(top, #DDC69A, #745035 ); background-image: -ms-linear-gradient(top, #DDC69A, #745035 ); background-image: -o-linear-gradient(top, #DDC69A, #745035 ); background-image: linear-gradient(to bottom, #DDC69A, #745035 ); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#DDC69A, endColorstr=#745035 ); color: #f8f8f8; content: attr(title); font-size: 14px; font-weight: 700; width: 100px; height: 18px; margin-left: -90px; margin-right: 10px; padding-top: 2px; text-shadow: -1px -1px 0 rgba(0,0,0,0.5); } input.sheet-tab:checked + span::before { background-color: #62442d; background-image: -webkit-gradient(linear, left top, left bottom, from(#62442d), to(#d7bb87)); background-image: -webkit-linear-gradient(top, #62442d, #d7bb87); background-image: -moz-linear-gradient(top, #62442d, #d7bb87); background-image: -ms-linear-gradient(top, #62442d, #d7bb87); background-image: -o-linear-gradient(top, #62442d, #d7bb87); background-image: linear-gradient(to bottom, #62442d, #d7bb87); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#62442d, endColorstr=#d7bb87); border: 1px solid #6a7000; } .sheet-tab-content { display: none; } .sheet-tab[value=information]:checked ~ .sheet-information-tab, .sheet-tab[value=skills]:checked ~ .sheet-skills-tab, .sheet-tab[value=weapons]:checked ~ .sheet-weapons-tab, .sheet-tab[value=spells]:checked ~ .sheet-spells-tab { display: block; }
1496695177
Lithl
Pro
Sheet Author
API Scripter
Ah-hah! That screenshot is very helpful to get a clear picture (pun not intended) of your problem. Try changing data-i18n to data-i18n-title and see if that fixes things for you.
Thank you! That fixed it. Any idea why that's the only tab that needs it, or will that happen to any tab I change and it has to do with legacy code in some way?