Making changes to the default character page

theS1m

Hi guys,

I wanted to ask some of the kind souls here how to make changes to the design of the default characters page:







Maybe you can help me out with the following:

1. How can I edit the colors and font of the search window?

2. Is there any way to make the tag sorting follow a certain order / make sense?

3. How can I change the colors for fonts and background of the character panels?

3.1 Is there a way to change character panels, for example panel size or make only the character images appear larger within each panel

I am okish at understanding / editing existing CSS so if there was an example of the default characters page with all the CSS in it, I could probably just go from there.



Thanks a lot in advance :)

Abersade

#1:

The main search window is targeted by ".character-index.campaign-public-layout .content-quick-search", so adding a background-color to that will change it to the color you desire. The filter area below is targeted by ".character-index.campaign-public-layout .filter-options", again setting background-color will update it to the color that you desire. To update the filter options section font, target ".character-index.campaign-public-layout .filter-options", font-family allows you to change the font.

To update the font color there you will need to use something like:



.character-index .custom-filter-options label {color: red;}

.character-index .tag-check-list label {color: red;}

For the top of the quick search section, use something like this to change the color:

.character-index.campaign-public-layout .content-quick-search {background-color: blue;}

Use something like this to change the font family:

#content > div.row.collapsable-nav-row > div.columns.main-content-container.full-width.dynamic-sheet-width > main > div.content-search-area > div.content-quick-search > a {font-family: fantasy;}

And something like this for the font color:

#content > div.row.collapsable-nav-row > div.columns.main-content-container.full-width.dynamic-sheet-width > main > div.content-search-area > div.content-quick-search > a {color: yellow;}



 

Abersade

As for 3 and 3.1, several other tweaks can be found here:

https://abersade-testbed.obsidianportal.com/wikis/css-characters

 

As for changing the sizes of things in the panels, images are targeted by:

.character-index.campaign-public-layout .content-list-item img (set height and width as you desire)

And set panel size by tweaking:

.character-index.campaign-public-layout .content-list-item {set height and width as you desire}

It is important to note that changing either the images or the panel sizes won't change the type of grid that they are displayed on, that gets more complicated.

Abersade

As for #2:

Your guess is as good as mine. They don't populate in the list in the order that they were created, alphabetical order, reverse alphabetical order, or any other order as far as I can tell, which seems kinda silly.

Evidence here: https://abersade-testbed.obsidianportal.com/characters

Reading left to right, can't be alphabetical or chronological - I created the "2nd strongest mole" tag prior to creating the "Actually Test PC 2" tag.

Case doesn't seem to make a difference either.

thaen

2. Is there any way to make the tag sorting follow a certain order / make sense?

I never noticed that before. Thanks for pointing it out!

Should be fixed now.

Let me know if you see any issues, and feel free to point out any other places that have this kind of wonkiness. I applied similar sorting to the Email Notifications and the Player Secrets "Who can see this?" sections, but there could be other places that I still missed.

theS1m

Holy moly, thaen.

That was fast. Thanks a lot, that makes life a lot easier because the filter system in itself is really powerful :)

Also thanks for your answers, Abersade. I will only get to check your suggestions on the weekend but I'm looking forward to it :)