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;}
Comments
@.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';@