Main Page

Implementation Instructions

Step 1: (Listing Alterations)
Copy and paste the following code block into your Custom CSS entry field:

.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;
.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;

Step 2: (Image Assignment Code)
Copy and paste the following code into your Custom CSS entry field:
(repeating the second line once for each character)

.game-content-image[title="XXXXXX"] + .character-info {background-image:url(YYYYYY);}

Step 3: (Actual Image Assignment)
Edit the per character entry at follows:

  • Replace the XXXXXX with the “.game-content-image” title entry for the character in question. You can get this in a couple different ways. Probably the easiest is to just view the page source. You’ll want to right click on the page and then select View Source, or View Page Source (this will change slightly depending on what browser you use). You can also use Inspect Element or the like to get this.

  • Go to the Character Page of the character in question and copy the address for the image of that character. In Firefox, you can right click on the picture and select Copy Image Location, in Internet Explorer you can right click on the image, select Properties and then highlight and copy the Address (URL) entry (other browsers may differ). Once done, paste the address for the character in question in place of YYYYYY.

Things to Note:

  • As this process involves use of the Custom CSS, you must be an Ascendant member with Obsidian Portal to implement this layout on your campaign.
  • If you are using Internet Explorer as your browser, the images will not display re-sized to fit into the dimensions of the box as expected. This is because IE does not recognize the “background-size” portion of the code.
  • The above default code block is setup for a “#main-content” width of 730px, if your campaign is using a size other than this, you will need to tweak the various height, width, margin and padding values to scale the layout to the correct dimensions for your campaign.
  • Character Tags are deliberately hidden on this layout.

And there you have it, all done. From this point you should be able to save your custom CSS and refresh your character page. I Hope you and your players enjoy this layout and have a lot of fun adding your own tweaks and additions to it. There are plenty of styling options that you can add to truly make it your own, from a new theme, to mouseover effects – the possibilities are myriad indeed.

All the best,

Main Page

CSS Character Layout Demo Kallak