Custom Characters Page

Custom Characters Page

This is a guide on how to change the default layout of the Characters page after the reforging.

This is version 2.0 of the character page guide. With the first version, if you resized your window, the character spaces would “squish.” Now they won’t! Also: Removed many of the “!important” tags, which are lazy and bad coding, but got us to where we needed to be after the reforge.

Everything here is done through CSS, and everything is automatic; there isn’t unique code for individual characters, once you create a new character everything will work itself out.

The Main Code:

#content .character-list-item-container {position: relative; width: 256px; height: 345px; background-image: url(;background-size:90% 320px;background-position:10px 0px;
background-repeat :no-repeat ;opacity: 1; display: inline; clear: none !important; color: transparent; padding: 0px 2% ; background-position: center top}

#content .character-list-item {background-color:transparent;}

“width” will define how many characters you display per row. Basically, divide your .main-content width by the number of characters you want to display. Or simply try out some numbers and see how they look!

Obviously, you don’t need a background image. You could make it a color, completely transparent… partially transparent!

The “clear:none !important;” code is critical for having more than two columns of characters. Without this, Obsidian Portal will automatically default to two columns. That one bit of code is probably what took me the longest to figure out in all of this.

#content .character-list-item: If you want a solid background color, this is the place to do it! I wanted a background image, so I made this transparent.

.character-list {width:134%; padding-left: 10px;}

.character-list {width:134%; padding-left: 10px;} is a new addition to this. On the characters layout page, there seems to be a lot of unused space to the right. So, let’s put some character portraits there! We’re increasing the width by 134%, which depending on the width you chose above, should be just enough for one additional character. The nice thing about this is, if you resize your browser window, the character portraits will bump down and realign themselves, so instead of 4 columns you’ll have 3. The “padding-left” instruction moves all of the characters away from the left navigation bar, as at least for Tyellador, it was getting a bit crowded there.

GM-Only Character Transparency: {opacity:0.5; }

Obsidian Portal makes the GM only characters slightly transparent so they’re a bit easier to see. I haven’t figured out how to do this with a background image yet, but this will make the text and character image slightly transparent.

Moving Things Around:

#content .character-info {height: 300px; padding:20px;}

.game-content-image {margin-left:27%; margin-right:auto; top:84px; width:96px;}

.right-side-fade-out {display:none;}

.character-info .character-name.title {position:relative; margin-left:auto; margin-right:auto; width:108%; text-align:center;}

.character-info: Should have a similar height to your .character-list-item-container above. Basically, .character-info is the container all of your character info is contained! So, make sure that this is large enough to move everything around to where you want it.

.game-content-image: Is your character’s image.

.right-side-fade-out: Takes away some fade effect that Obsidian Portal had.

.character-info .character-name-title: This is your character’s name. If you want to change the font, this is the place to do it. Personally, I did. Sans-Serif and medieval fantasy campaigns don’t mix.


.character-info .tags-list {position:absolute; top:178px;left:20%; width:60%; overflow:hidden; white-space:normal; padding-left:0px; margin:0px;max-height:45px; color:transparent; text-align:center;}

Obviously, this moves your tags around.

“overflow” will change how excess tags are dealt with. If you want to see all of your tags, put “overflow:visible”.

“white-space:normal” is what lets the tags loop around to the next line. Without this, your tags will only take up one line.

“max-height” is used if you want to limit the amount of tags listed vertically, useful for when you use “white-space:normal”. I recommend using with “overflow:hidden” so that your tags don’t go on forever.

“color:transparent” is what gets rid of the little tag icon that doesn’t really suit a custom theme.

I couldn’t figure out how to move .quick-description, seems as though Obsidian Portal isn’t allowing this, as they don’t allow any changes to anything with the word “script” in it. Which happens to be right in the middle of “description”.

Transparent Search Bar:

#content .character-quick-search {background-color:transparent;}

#quick_search {opacity:0.5;}

.postfix {opacity:0.5;}

.character-quick-search h4 {font-weight:bolder; font-size:150%;}

#content .character-quick-search: You could also throw a background image here, which we’ll probably do in the near future.

.character-quick-search h4: this specifically changes the “Character Quick Search” title. Mine still needs a bit of tweaking, but without the solid background it definitely needed to be bigger/bolder.

Back to Tutorials

Custom Characters Page

Tyellador Thorvaldr Thorvaldr