Sytling Repeater Buttons

So everything has been going absolutely great on the sheets I've been working on.  They are working mostly across the board. However, I do have one question:  Is there anyway to restyle/resize the +Add and +Modify buttons for Repeating sections?  They are sized wrong and of the wrong color scheme (more notable from the huge size) for the rest of the sheet. Thanks again for the help, it's made everything much easier.  I've tried googling this a hundred different ways and can't quite find information on it.

I did a whole bunch of css tweaks for the D&D 5e by Roll20 sheet. You can find them here . I modified the section that controlled add and edit buttons  with this css code: /* makes edit and add buttons less obtrusive */ .charsheet .repcontrol .repcontrol_add:before, .charsheet .repcontrol .repcontrol_edit:after { background-color: #eee; border: 1px solid #eee; color: #888; padding: 0px; } Hopefully there's something there you can use.

Thanks so much, a great place to start - and a very useful link.  Much appreciated!

Sorry if I am sounding like a newbie here, I just gave this a try and it doesn't seem to have an impact on the buttons; I put it in the CSS code section, and even when I pick something garish for the color codes to test it, it's not impacting anything.  Is there a certain way it has to be placed?

.charsheet { &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; background-color: black; &nbsp;&nbsp;&nbsp; background-image: url(" <a href="https://cdn.wallpapersafari.com/44/88/qJnRFV.jpg" rel="nofollow">https://cdn.wallpapersafari.com/44/88/qJnRFV.jpg</a> "); } .charsheet .repcontrol .repcontrol_add:before, .charsheet .repcontrol .repcontrol_edit:after { &nbsp;&nbsp;&nbsp; background-color: #000000; &nbsp;&nbsp;&nbsp; border: 1px solid #eee; &nbsp;&nbsp;&nbsp; color: #888; &nbsp;&nbsp;&nbsp; padding: 0px; } Apologies for the placeholder background image link.&nbsp; I've tried putting the closing bracket at a few different points; the top part of the code works fine but the bottom part does not.

I've never built a sheet, so I don't know how the CSS is implemented there. I just know that those style tweaks work for Stylus and hoped you could pull something useful from it. You'll probably need insight from someone who has a Sheet Author tag after their name. :)

I haven't tried editing those yet (though I am certainly thinking about it).&nbsp; There is a section in the CSS Wizardry wiki page about those.&nbsp;&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a>

Definitely very useful stuff and appreciated, thank you again.

Kraynic said: I haven't tried editing those yet (though I am certainly thinking about it).&nbsp; There is a section in the CSS Wizardry wiki page about those.&nbsp;&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a> I'm not 100% following here, largely because I'm unsure what the names of the buttons are to make invisible.&nbsp; I'd very much like to hide the buttons and replace them with something smaller; they're extremely obtrusive and clash badly with the sheet, at the moment. If you have any luck with it, I'd love to hear more.&nbsp; Been trying everything I can think of.

If you want to change all the edit and add buttons on your sheet you can do it with just this: .btn.repcontrol_add, .btn.repcontrol_edit&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #000000; &nbsp;&nbsp;&nbsp; border: 1px solid #eee; &nbsp;&nbsp;&nbsp; color: #888; &nbsp;&nbsp;&nbsp; padding: 0px; } If you want to target a specific repeatign section, use .repcontrol[data-groupname="repeating_stats"]&nbsp;&gt;&nbsp;.btn.repcontrol_add, .repcontrol[data-groupname="repeating_stats"]&nbsp;&gt;&nbsp;.btn.repcontrol_edit&nbsp;{ replacing "repeating_stats" with whatever repeating section you want to target. One problem you'll have is that some properties cannot be overriden, and others only appear when you hover over the button (like background-color). According to the wiki page linked above, the way around this is to set&nbsp; opacity:0 &nbsp; , &nbsp;and use ::before or ::after to overlay your own button over them, but I'm not sure of the correct syntax to do that.

I'm adding that exact code to the CSS and nothing seems to happen.&nbsp; Even if I change it to something more obvious (like a hexcode for neon green) nothing changes.&nbsp; Is there some special place it needs to be inserted? I've tried adding it straight to the HTML too and it doesn't seem to change anything.&nbsp; Do I want to put it within the repeating section itself?

This is one instance where it is useful to go through the Roll20 github and look at sheets (or at least the preview images).&nbsp; Most of the "by Roll20" sheets have modified those buttons to a plus sign for add, and an open or closed lock for modify.&nbsp; Other sheets have done other things like the Godbound sheet that has altered the color, and in some sections modified the wording of the labels.&nbsp; Looking at practical examples in working code from other sheets might be a way to wrap your head around how they work.&nbsp; At least, that is what I plan to do when I redesign the buttons on mine. Pick something that makes changes you are interested in and poke around in the code.&nbsp; You may want to download the css for that sheet for ease of interacting with it in the editor of your choice.

Ah thanks for suggesting Godbound.&nbsp; I actually was going through them but didn't find any sheets that actually used a changed the buttons.&nbsp; I'll see if I can figure it out from Godbound, thanks.

Kraynic said: This is one instance where it is useful to go through the Roll20 github and look at sheets (or at least the preview images).&nbsp; Most of the "by Roll20" sheets have modified those buttons to a plus sign for add, and an open or closed lock for modify.&nbsp; Other sheets have done other things like the Godbound sheet that has altered the color, and in some sections modified the wording of the labels.&nbsp; Looking at practical examples in working code from other sheets might be a way to wrap your head around how they work.&nbsp; At least, that is what I plan to do when I redesign the buttons on mine. Pick something that makes changes you are interested in and poke around in the code.&nbsp; You may want to download the css for that sheet for ease of interacting with it in the editor of your choice. Forgive me for being obtuse, but this is largely why I'm having a trouble figuring this out more than any other code which was easy to learn from the reference:&nbsp; It doesn't seem to function at all with Roll20, even if it does in an editor. I just tried completely even copying the Godbound code to see if it would work and nothing; no matter what code I put in (from this thread, the wiki, or the examples) it seems to completely reject changing these buttons. I've had much less trouble learning from the examples from this point, as I can see a result occurring.&nbsp; With this, nothing I do seems to make any difference.&nbsp; I cannot seem to make any impact on the buttons even using apparently working examples.&nbsp; I'm extremely stumped what I could possibly be doing wrong at this point. My CSS styling at the moment is extremely simplified.&nbsp; Any help would be greatly appreciated and sorry if I'm overlooking something completely obvious.&nbsp; You guys keep giving me working code I'm sure, and I've gone over the wiki multiple times but my guess is I am somehow applying it into the wrong place.&nbsp; Any suggestions are more than welcome. :)

We cant suggest changes without knowing what you have tried. CSS is very dependent on what already exists in the sheet, and interacts with everythign tht comes before and can be affected by everything that follows. What CSS have you tried?

Right now, my default CSS is very simple; almost everything is html. .charsheet { &nbsp;&nbsp;&nbsp; background-color: black; &nbsp;&nbsp;&nbsp; background-image: url("<a href="https://i.imgur.com/SbvBLEa.png?1" rel="nofollow">https://i.imgur.com/SbvBLEa.png?1</a>"); } I've tried adding the following to it, but it doesn't seem to impact any repcontrol buttons at all.&nbsp; I've also tried placing this within the brackets of .charsheet.&nbsp; I'm having a hard time getting CSS and Roll20 to interact at all, really, beyond this simple background shift.&nbsp; Inside of Editors, most CSS stuff works perfectly, so I think I must be missing a vital detail. .btn.repcontrol_add, .btn.repcontrol_edit&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #000000; &nbsp;&nbsp;&nbsp; border: 1px solid #eee; &nbsp;&nbsp;&nbsp; color: #888; &nbsp;&nbsp;&nbsp; padding: 0px; }

Usually its the other way round - the editor failing to display some stuff that does work. Can you give an example of other CSS that you've tried, that works in the editor but doesnt work in the campaign? Specifically things that dont have anything to do with the repeating section buttons.

One thing I do sometimes is create a specific game for snippets of code that I am having trouble with.&nbsp; Then I will put in the code for a specific repeating section (just as an example) and absolutely nothing else.&nbsp; If I have been having problems with it in my complete sheet, but it works on its own, I know I have a conflicting class name, typo, or whatever that is interfering.&nbsp; If it doesn't work totally on its own, then I have a place to work on it without messing up any work on the sheet as a whole.&nbsp; Once it is working, then I can copy/paste from there into the full sheet code. Not sure if this is recommended workflow or not, but if I am having trouble wrapping my mind around something, working on it by itself, or with just the nearby surrounding sections of sheet code can help (and keep me from screwing up other things as I work through something).&nbsp; Anyway, something you might try if you think it may help you.