Individual character icons for adventure log teasers

ElAdoran
ElAdoran
edited November 2013 in Campaign Portal Building
I was scrolling through the adventure logs for my campaign when I realized I hadn't done enough to distinguish the different characters' voices from each other in their adventure logs. I've seen a lot of great campaigns where each character's logs appear in a different kind of script, but for my setting (Warhammer 40k) I'd prefer not to have any handwritten fonts.

Instead I decided to use the awesome game icons found at "Game-icons.net":http://game-icons.net/. The following CSS will put an icon on each teaser on the adventure log page but hide it when the log entry is viewed in full.

@/* Sets a space for the icon in the teaser */
.teaser .adv-summary {
width:80px;
float:right;
margin:0px 0px 5px 5px;
border-radius:5px;
}@

If you don't actually want to hide the icon in the full log entry, change the following to something that highlights the icon to fit the style on your page:

@/* Hides the logo in the full log */
.full .adv-summary {width:0px;}@

I uploaded each image at full 512x512 size so that I can scale it down at will. I want to use these icons in other places eventually and keeping them in CSS will allow me flexibility to change icons en masse if I find a different scheme that I like more. The icons are all associated with characters here:

@/*Defines a different icon for each character */
.gm-logo {content:url(https://db4sgowjqfwig.cloudfront.net/assets/259169/bookmarklet.png?1383878258);}
.victrix-logo {content:url(https://db4sgowjqfwig.cloudfront.net/assets/259279/missile-pod.png?1383895868);}
.kavik-logo {content:url(https://db4sgowjqfwig.cloudfront.net/assets/258935/winged-sword.png?1383855555);}@

When you're writing a log, put the following line at the very top to insert the character logo:

@@

You can see this in action at my "adventure log page":https://into-that-vast-expanse.obsidianportal.com/adventure-log where I'm just starting to implement it. Please excuse the haphazard styling all around; I'm still rebuilding from the Reforge and the campaign is a bit of a mess in places.

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 3,037
    Cool idea! I use parchments of different color to indicate each character- this icon idea is cool!
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
    Here to help anyone- Send me a PM

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    I like the icons! I've been using individual fonts, but this is an excellent idea.
  • dawnhawk
    dawnhawk
    Posts: 113
    Huh...just a heads up in case someone asks if it's broken - the icons work well in Chrome (they look very cool), but not in either Firefox or IE10.
  • ElAdoran
    ElAdoran
    Posts: 6 edited November 2013
    Thanks for the heads up. I am not very professional about how I develop my CSS (I do it all in Chrome at the resolution on my home monitor, with no other testing) so I should have known that it would come back to haunt me one day. It looks like Firefox and IE don't like content:url('XXXX') when it's an image URL.

    The fix for this is to use background-image instead of content. (And also explicitly specify a height for the div.) Like so:

    @/* ADD INDIVIDUAL ICONS TO EACH ADVENTURE LOG SUMMARY */
    /* Sets a space for the icon in the teaser */
    .teaser .adv-summary {
    width:80px;
    height:80px;
    float:right;
    margin:0px 0px 5px 5px;
    border-radius:5px;
    background-size:contain;
    }
    /* Hides the icon in the full log */
    .full .adv-summary {
    width:0px;
    }
    /*Defines a different icon for each character */
    .gm-logo {
    background-image:url(https://db4sgowjqfwig.cloudfront.net/assets/259169/bookmarklet.png?1383878258);
    }@
    Post edited by ElAdoran on
  • ElAdoran
    ElAdoran
    Posts: 6
    Using background-image also means that you don't actually have to specify anything for .full .adv-summary, since without content the div and its background will be invisible on the full page. But I'm leaving that code in as a placeholder in case I decide I want to display the icon in a different style on the full log page instead of hide it.
  • Wild_Gazebo
    Wild_Gazebo
    Posts: 14 edited November 2013
    Been doing something similar on our "adventure log":https://meta-ruins-of-myvolia.obsidianportal.com/adventure-log as well. I'm still planning to combine our PBP site with my original once I eradicate all of my old HTML code and replace with the new CSS. Lots of work.
    Post edited by Wild_Gazebo on
  • ElAdoran
    ElAdoran
    Posts: 6
    Now I'm thinking about how fun it would be to add some transparency to the icons and color-code them according to character. Make them pop even more.

    I should probably finish fixing the color scheme for the campaign first, though...
Sign In or Register to comment.

September 2026
City of Shadows

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions

Categories