Help needed wth custom character page code

Blitzburger

Hi,

I'm trying to get my campaign up and running, and I'm trying to use Kallak's (spelling?) Code, but i'm hoping to make 2 changes, and I'm hoping someone who is good at this stuff can help:

1. I'd prefer to slightly shrink the size of the character previews to show 5 to a row, and line up better with the margin on the right-side of the page

2. Shrink the text slightly

Bonus: also, is there any way to change the font to old german style or, at least, old English?

This is the link to the page: https://gotterdammerung-1.obsidianportal.com/characters and below is the code I'm currently using. Thanks!

/*ALTERATIONS FOR CHARACTER LISTING*/
.character-index .character-list-item-container {
position:relative !important; width:178px !important;height:178px !important;
display:inline; clear:none !important; color:transparent;margin-bottom:6px;
margin-left:3px;margin-right:3px;
}
.character-index.campaign-public-layout .character-list-item .character-info, .character-index .character-list li {padding:0px !important;}
.character-index .character-info .tags-list,
.character-index .character-list-item .game-content-image,
.character-index .character-list-item .character-info .right-side-fade-out,
.character-index .character-info div:first-of-type div:first-of-type {display:none !important;}
.character-index.campaign-public-layout .character-list-item h4.character-name {border-bottom:0px !important;}
.character-index.campaign-public-layout .character-list-item h4.character-name a {
color:white !important;text-decoration:none;position:absolute !important;bottom:0px !important;
left:0px !important;width:178px;padding-top:153px;padding-bottom:3px;padding-left:3px;
padding-right:3px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
}
.character-index .character-list-item .character-info {
text-align:center !important;border:3px solid black;background-size:178px, 178px;
background-repeat:no-repeat;height:178px !important;width:178px !important;
}
.character-index .character-list ul {padding-left:6px;padding-right:6px;}
.character-index .character-list-item .icon-edit {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;color:white;}

Basileus

That first entry:

@.character-index .character-list-item-container {
position:relative !important; width:178px !important;height:178px !important;
display:inline; clear:none !important; color:transparent;margin-bottom:6px;
margin-left:3px;margin-right:3px;
}@

You'll want to reduce the value of the width and height properties from 178px to something that you like better. For example, 160px seems to fit 5 entries per row.

You may need to fiddle with the margin values as well (most likely, increase the margin-bottom), to get the spacing to look right afterward.

Next, for the font size, a few lines down find this CSS rule:

@.character-index.campaign-public-layout .character-list-item h4.character-name a {
color:white !important;text-decoration:none;position:absolute !important;bottom:0px !important;
left:0px !important;width:178px;padding-top:153px;padding-bottom:3px;padding-left:3px;
padding-right:3px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
}@

You'll want to add an entry for font-size. Something like:

@.character-index.campaign-public-layout .character-list-item h4.character-name a {
color:white !important;text-decoration:none;position:absolute !important;bottom:0px !important;
left:0px !important;width:178px;padding-top:153px;padding-bottom:3px;padding-left:3px;
padding-right:3px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
font-size: 1em;
}@

And finally, for the font, you can link to the "Google Fonts API" under Settings > Advanced. Just enter the name of the Google font you want to use and save, then in your CSS, just after where you added the font-size, add font-family, like this:

@font-family:'SomeFont';@

Blitzburger

Awesome, thanks!