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

Custom character sheet: coding question

1631174111

Edited 1631174149
Hi! I'm trying to make a character sheet for an upcoming Nibiru-style campaign and I'm using the base of the character sheet that was made for the show "GONE" ( <a href="https://github.com/EtoileLion/roll20-nibiru" rel="nofollow">https://github.com/EtoileLion/roll20-nibiru</a> ). However I want to change quite a few things because I'm taking out or replacing alot of things, I've managed to change almost everything to how I want it. One thing I can't do is to place the things where you type basic information in right next to the header/logo. I've tried several methods going off of youtube tutorials and what not, but I failed horribly. I'm very new to HTML/CSS and at the moment I'm trying to do things by looking at things that work, copypasting and experimenting. <a href="https://github.com/Floofffy/Sentinels" rel="nofollow">https://github.com/Floofffy/Sentinels</a> So what I want is this:&nbsp; And what I currently have is this:&nbsp; Could anyone help me? ;^;
1631178763

Edited 1631181424
David
Sheet Author
If you are using a custom sheet you need to check the&nbsp;Legacy Sanitization&nbsp; check box&nbsp; above the place where you placed the html and css or add sheet- to all the classes in your html.&nbsp; You will also need the contents of the translation.json file from the&nbsp; original sheet pasted into the translation tab of the custom sheet to get rid of the red text.&nbsp;
David said: If you are using a custom sheet you need to check the&nbsp;Legacy Sanitization&nbsp; check box&nbsp; above the place where you placed the html and css or add sheet- to all the classes in your html.&nbsp; You will also need the contents of the translation.json file from the&nbsp; original sheet pasted into the translation tab of the custom sheet to get rid of the red text.&nbsp; I did that already, though I don't think that was the problem
1631209212
Kraynic
Pro
Sheet Author
The header (image) is in its own div with its own css rules.&nbsp; That is fine, you could incorporate that into a row with other stuff. However, the 2colrow is something that is built into the Roll20 character sheet framework.&nbsp; You would need to change that class where the name and habitat entries are so that you can style them differently in the css without anything interfering.&nbsp; You would also need to wrap that section and the header in another div with whatever class name makes sense to you and use that to set them on the same row, set widths, etc.&nbsp; There might be other ways to go about it (maybe someone else will respond with something), but that is how I would approach getting those 2 inputs in line with the header.
1631210309

Edited 1631214554
David
Sheet Author
Floofffy said: David said: If you are using a custom sheet you need to check the&nbsp;Legacy Sanitization&nbsp; check box&nbsp; above the place where you placed the html and css or add sheet- to all the classes in your html.&nbsp; You will also need the contents of the translation.json file from the&nbsp; original sheet pasted into the translation tab of the custom sheet to get rid of the red text.&nbsp; I did that already, though I don't think that was the problem Duh. Should have read the query better. The widths of the inputs will have to be changed which will mean the images underneath then as well need to be changed. Here are the inputs with the surrounding&nbsp; div with the col class moved using&nbsp;position: absolute. Kyranic solutions is much better.&nbsp;
1631218297
David
Sheet Author
1631298529

Edited 1631298756
Ok, I now have the two fields next to the logo! David said: I really love how the labels are at the bottom, I'ma try to get to that! A question: Does "col" have to be "col" in order to work, or can I name it however I want? &nbsp; Also, is there anywhere where I can find information on the colours and their meaning?
1631298739
Kraynic
Pro
Sheet Author
Name it whatever you want and then set the css rules for it as you wish.&nbsp; I think that class name is used other places in that sheet, so it might be best to go with new class names with anything you touch to be sure it doesn't mess with parts you didn't want to change.
1631299067
David
Sheet Author
Here is the source&nbsp; <a href="https://github.com/Lockbox313/nibiru/tree/main/Sentinels" rel="nofollow">https://github.com/Lockbox313/nibiru/tree/main/Sentinels</a>