[SOLVED by anagrammar] Replace div (newby lost)

edited March 2018 in Style Development Chrome
Hello, I play D&D on roll20 and I'm trying to modify my character sheet a bit so my skills are sorted by ability instead of alphabetical order. I have never attempted to script anything before so I'm very lost, anyway, I used the console to modify the associated "DIV" and order my skills the way I wanted, it's in the txt file; I just have no clue how to make a script out of it that would replace the current order. Here's also a screenshot how I wish it looked and how it actually looks.

PS: As a special query, I'd love to also add a tiny bit of spacing (maybe a 1px white line) between categories (those with different numbers, so they looks like blocks).



  • edited March 2018 Chrome
    With the exception of a few predefined keyframe animations/effects, CSS is for visual changes only. Switching the order of that list visually can be accomplished, but the order would need to be organized for each element individually in the stylesheet, it will be dependent on the original order in the html, and once you've defined that order it will remain that way unless you change it or the site alters that list in the html.

    There are a lot of variables since we can't easily inspect the elements, unless someone here plays, or is willing to play the game. Mostly, I imagine those numeric values change as you play the game, but they may not, for all I know. With CSS, you can't change the order of the html, but you could change their position. The two ways to do that would be to position each "absolutely" in the desired order, or better yet, use a flex: display which allows you to spoof the order: of items in the html.

    Problem with that would be if those "ability" numeric values change, you'd need to reorder them in the CSS manually. If it doesn't happen often maybe that's doable. If that's gonna be an issue too often, you'll need a userscript instead.

    Userscripts are a bit more complicated, but you can ask for help here. This one would need to check the text for those numeric values and reorder them accordingly. If they change a lot and you want them to adjust dynamically without reloading the page, you'll need an observer to watch for changes.

    You may run into the same issue, that this is not a typical page that anybody can easily access with one click, so it can be a little more difficult to get help. If those values don't change often, or at all, and/or you don't mind reordering them manually, I can take a stab at writing the CSS from that html you provided without testing it. Otherwise, I've wasted enough time explaining this already.

    Btw, if you do decide the CSS route is good enough, you'll probably only want it to run on specific URLs where it's needed, so it doesn't interfere with other games on that site if you play them. I'm speculating of course, because I don't know how the site works, but perhaps that particular game has a specific URL like: https://roll20.net/dndgame/randomstring
  • Hello, thank you so much for putting the time and effort to explain to me all of that, I truly appreciate it, I wasn't expecting anything so thorough. I think I understand the issue a bit more, and I realise I didn't provide enough tools to understand the situation entirely. The roll20 website indeed requires creating an account and joining a game to see what I'm talking about. Since you seem very nice, I've gone and taken the liberty of creating a bogus account for testing, I created an empty session you can join, that way you'd be able to access the character sheet.
    The login address is: https://app.roll20.net/sessions/new

    logins are: cnoor@islamm.gq
    pwd: stylish

    And then click on "launch game" on the left.
  • Yeah, I don't have the patience for that. It'd be one thing if you simply click a button and the game starts, but it takes me to develop a character, then I have to search for games, and it's giving me a schedule. To hell with trying to figure that out.

    If you understand the limitations I described, and you still wanna try the CSS, I came up with my best guess based on the html you provided:
    @-moz-document url-prefix("https://app.roll20.net/") {
    div[data-i18n-list="skills-list"] {
    display: flex!important;
    flex-direction: column!important;
    div[data-i18n-list="skills-list"] > .sheet-skill:not(:last-of-type) {
    border-bottom: 1px solid #fff!important;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(1) {
    order: 2;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(2) {
    order: 10;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(3) {
    order: 5;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(4) {
    order: 1;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(5) {
    order: 15;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(6) {
    order: 6;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(7) {
    order: 11;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(8) {
    order: 16;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(9) {
    order: 7;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(10) {
    order: 12;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(11) {
    order: 8;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(12) {
    order: 13;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(13) {
    order: 17;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(14) {
    order: 18;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(15) {
    order: 9;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(16) {
    order: 3;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(17) {
    order: 4;
    div[data-i18n-list="skills-list"] > .sheet-skill:nth-of-type(18) {
    order: 14;
    I use Stylus, not Stylish, but assuming theirs still works as it should, you'd go to "write a new style"/Mozilla format/Import/name and save. The "applies to" URL prefix rule may need to be tweaked, and as I mentioned, you likely wanna make it specific to that particular game URL if possible.

    There's a good chance it'll work, but it's guess-work. I'll only be around for a little bit right now, if there's any issues. Otherwise, I'll be back around tonight, or anyone else is welcome to jump in and help.
  • Thank you so so so much for taking the time to help me out like that man. I genuinely appreciate it, you're a good guy :) . I modified the bottom border a tiny bit to my liking and it was perfect. Here's a screenshot. Again, thank you so much anagrammar, have a nice day.
  • edited March 2018 Firefox

    First of all: Just checked by here and realized that I've never sent my answer from yesterday evening. It's still here in the edit frame :(
    You don't need it anymore, but I'll still send it as I can't throw stuff away ;-)

    Give the wrapping div a display:flex and every item an order number to resort them. You may add a line with boder-bottom.

    div[data-i18n-list="skills-list"] { display:flex !important; flex-direction:column !important; }
    div[data-i18n-list-item="athletics"]       { order:2 !important; }
    div[data-i18n-list-item="arcana"]          { order:3 !important; }
    div[data-i18n-list-item="stealth"]         { order:4 !important; border-bottom:1px solid white !important; }
    div[data-i18n-list-item="sleight_of_hand"] { order:5 !important; }
    div[data-i18n-list-item="investigation"]   { order:6 !important; }
    div[data-i18n-list-item="history"]         { order:7 !important; }

    Higher number means lower position. Same numbers will be treated as connected group.

    Have fun playing D&D!

Sign In or Register to comment.