Custom character sheet: coding question

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" (https://github.com/EtoileLion/roll20-nibiru).

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.

https://github.com/Floofffy/Sentinels

So what I want is this: 

And what I currently have is this: 

Could anyone help me? ;^;

If you are using a custom sheet you need to check the Legacy Sanitization  check box  above the place where you placed the html and css or add sheet- to all the classes in your html.  You will also need the contents of the translation.json file from the  original sheet pasted into the translation tab of the custom sheet to get rid of the red text. 

David said:

If you are using a custom sheet you need to check the Legacy Sanitization  check box  above the place where you placed the html and css or add sheet- to all the classes in your html.  You will also need the contents of the translation.json file from the  original sheet pasted into the translation tab of the custom sheet to get rid of the red text. 

I did that already, though I don't think that was the problem

The header (image) is in its own div with its own css rules.  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.  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.  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. 

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.

Floofffy said:

David said:

If you are using a custom sheet you need to check the Legacy Sanitization  check box  above the place where you placed the html and css or add sheet- to all the classes in your html.  You will also need the contents of the translation.json file from the  original sheet pasted into the translation tab of the custom sheet to get rid of the red text. 

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  div with the col class moved using position: absolute. Kyranic solutions is much better. 

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?

Also, is there anywhere where I can find information on the colours and their meaning?

Name it whatever you want and then set the css rules for it as you wish.  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.

Here is the source https://github.com/Lockbox313/nibiru/tree/main/Sentinels