[How To] Alternate Character Listing Layout via CSS

13

Comments

  • wolfhound
    wolfhound
    Posts: 354
    Can you link just the graphic itself? What format is it? PNG or GIF?
  • Zeram
    Zeram
    Posts: 19
    Sure

    "Link":http://farm8.staticflickr.com/7314/8726881822_502ea15968.jpg
  • wolfhound
    wolfhound
    Posts: 354
    Unless something's changed (always a possibility I don't keep close tabs) I don't believe JPG will support transparency. Try a PNG with a transparent background and your green text.
  • Zeram
    Zeram
    Posts: 19 edited May 2013
    That's odd. I saved it as a .png

    Edit: Flickr converts it to a .jpg from a .gif and .png when I upload it.

    I uploaded with photobucket instead and it stayed a .png, however it's still the same result. Also, every time I try to make a transparent background in paintshop it always comes out white.

    I had to rename the class because I'm already using "rollover", and this is what I have. Perhaps I missed something?

    a.posterroll {position:relative; display:block; width:160px; height:110px; text-decoration: none; background:url('http://img.photobucket.com/albums/v684/Deckman/Complete.png');background-color:transparent;}

    a.posterroll:hover {background-position:-320px 0px;}
    Post edited by Zeram on
  • Zeram
    Zeram
    Posts: 19
    I got it. I was stretching the text over the entirety of the image and not keeping it to the far right side. After some testing and positioning I have it working as I want it now.

    Thanks for your help!!
  • ReverseG
    ReverseG
    Posts: 17
    @Kallak

    Thanks very much for the idea and the initial code to get it started. I've done some modification on the positioning and scaling, kept the text consistent to my global style, and added a couple of rounded corners (I couldn't resist). My players love it.

    This is my modified 'portrait window' code:


    bq. .character-list-item {
    position:relative;border:2px solid black;border-radius:25px 0px 25px 0px;width:156px;min-height:156px;
    display:inline-block;margin-bottom:5px;margin-right:7px;text-align:center;
    background-repeat:no-repeat;background-size:165px 220px;background-position: 50% 10%;overflow:hidden;
    }

    "And this is how it turned out":http://www.obsidianportal.com/campaigns/descha-central-city-adventures/characters
  • Kallak
    Kallak
    Posts: 1,090
    Looks sharp, well done.
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    After receiving multiple private message requests, I have added a "Next Step" entry to the tutorial and made minor size and margin alterations to the original code block to update the _default_ version of the four wide layout to be a "plug and play" reskin of the standard character page - with a theme that matches OP. In the beginning I was against adding any theme based elements to the tutorial, as I intended it to just be an updated way to list characters - leaving those who used it to theme the rest of the page as they wished. However, I have come to decide that making this change will provide a starting framework for those who wish to integrate the four wide layout into the theme alterations for their campaign. This change also allows people who do not wish to be code monkeys the opportunity to have a nice, visual (and complete) character page that they can just "drag and drop" onto their campaigns.
    Post edited by Kallak on
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Where is the link to the tutorial Kallak?

    Just trying to help out.

  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    The original posts in this thread have been updated to include the newest version of the material. You can also find it on my "Layout Demo Campaign":http://www.obsidianportal.com/campaign/css-character-layout-demo/wikis/main-page
    Post edited by Kallak on
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090
    As an update of sorts, i have moved the ul margin alterations from the "next step" block into the "step 1" block. When I added the "next step" theme block, I created slightly revised height/width dimensions for the character boxes to make maximum use of the space. However, these new dimensions are too wide without the ul margins to go with them. This was causing people who wanted to use the list only without the theme "next step" to have spacing errors with the layout as a whole.

    Moving the ul margin changes to the "step 1" block fixes this issue and will avoid this confusion for any future users.
    All the best,
    - Kallak
  • tommy19
    tommy19
    Posts: 62
    I know the thread has been quite for a bit, but I just want to say this is an awesome bit of code. Love it.

    I also have two questions, first is there any way to move the character names so that they appear directly under their photo? Unfortunately the color of my links clash with the photos and I'm hoping to move them so that they are a bit clearer and easier to read. If you want to see what's going on with the page you can see it here: http://www.obsidianportal.com/campaigns/ageofdarknessdragonagehack/characters

    And second, how would I go about adding an image or transparent color over the existing image to indicate that the particular NPC is dead?

    Thanks in advance.
    -- Tom
  • wolfhound
    wolfhound
    Posts: 354 edited August 2013
    Like this? "http://www.obsidianportal.com/campaigns/dfd/characters":http://www.obsidianportal.com/campaigns/dfd/characters

    I'm going off memory, but I believe all I did was
    * In .character-list-item I set the min-height to 195px (i.e. a bigger number)
    * in .character-list-item a I set the padding-top to a larger value, and set max-height to the same number I used for .character-list-item's min-height.

    To show a character is dead, I "tombstone" the graphic by setting a border-top-X-radius value which turns the tops of the picture into a rounded tombstone.

    #character-list-item-367552.character-list-item{BACKGROUND-IMAGE:url(http://cdn.obsidianportal.com/images/889022/BrandonHolton.jpg);BORDER-TOP-LEFT-RADIUS:50% 50%;BORDER-TOP-RIGHT-RADIUS:50% 50%;}

    EDIT: Oh and I add a line of blank characters that have no graphic set, and prefix the names with Zzz to cause them to sort down to the bottom
    Post edited by wolfhound on
  • twiggyleaf
    twiggyleaf
    Posts: 2,006
    Wolfhound, you are one crazy clever artist! LOL!

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • tommy19
    tommy19
    Posts: 62
    I do like the tombstone effect I think it fits very well with the Wild West theme you have going for your DF Dallas game.

    The reason I asked about overlaying the images is that I have two images I made (one for deceased and one for missing) that I made up in photoshop that can be overlayed onto the photo directly and then uploaded as normal. But I thought being able to overlay them onto the character page images without affecting the main image would be better.

    Here are the images, as an example and free for anyone to use if they like.

    Deceased - https://dl.dropboxusercontent.com/u/935372/DoG/deceasedphotooverlay.png
    Missing - https://dl.dropboxusercontent.com/u/935372/DoG/Missingphotooverlay.png
  • Kallak
    Kallak
    Posts: 1,090 edited August 2013
    Hey tommy19, thanks for your interest in the four wide layout. From what I've seen, you already have the moving of the character names sorted out, so I'll just move right into the overlay images. All you need to do for your overlay plan is amend the "background-image" property of the character in question to add the overlay as part of a layered background. When doing this, it's important to note that the overlay image needs to appear first in the property listing. Here is a sample of how to do it using one of my own characters for demonstration purposes:

    @#character-list-item-443400.character-list-item {
    background-image: url("http://dl.dropboxusercontent.com/u/935372/DoG/deceasedphotooverlay.png"),
    url("http://cdn.obsidianportal.com/images/1086938/darth-krayt.jpg"); }@
    Post edited by Kallak on
    All the best,
    - Kallak
  • tommy19
    tommy19
    Posts: 62
    Thank you so much Kallak, that is exactly what I was looking for!
  • tommy19
    tommy19
    Posts: 62
    Okay, one more (hopefully) quick question. I've decided that the only characters I want to be visible on the Character page are current and past Player Characters (current are labeled PC's and Past PC's are labeled NPCs for sorting). All I need to do to make it work is to change the titles that appear over each section. Changing "h3.pc-list-title" to read "h3.Current Player Characters" didn't work, so I'm kinda stumped.

    I'd like them to read "Current Player Characters" over the PC list and "Other Player Characters" over the NPC list. Any thoughts?
  • Kallak
    Kallak
    Posts: 1,090 edited August 2013
    If you look in the CSS FAQ post, there is an entry for changing the text on the default navigation tabs. You can use the same method to change that title text
    Post edited by Kallak on
    All the best,
    - Kallak
  • tommy19
    tommy19
    Posts: 62 edited August 2013
    That's great. I've actually used that code to change the titles of two of my tabs. The problem is that it seems like no matter where I try to add content all it seems to accomplish is making the font tiny but otherwise the text stays the same. I'm using this code:

    >>.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;max-height:14px;} .adventure-log a:before {content: "Character Journals";font-size:10px;}
    Post edited by tommy19 on
  • Kallak
    Kallak
    Posts: 1,090 edited August 2013
    Actually you'll want to remove the references to max-height and/or font size, those bits were in there to ensure the height if the tabs wasn't altered. Obviously you won't want that for your title on three character page.
    Post edited by Kallak on
    All the best,
    - Kallak
  • tommy19
    tommy19
    Posts: 62
    So essentially I would replace:

    >>.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;max-height:14px;} .adventure-log a:before {content: “Character Journals”;font-size:10px;}>.tabnav pc-list-title a, .tabnav pc-list-title a.active .pc-list-title a:before {content: “Active Characters”}
  • Kallak
    Kallak
    Posts: 1,090 edited August 2013
    You will not want the tabnav or the a.active stuff. It'll just be the class name for the title and the before code, if you're just adding text before or after. If you want to replace the text entirely, you'll need the font size to hide the current text
    Post edited by Kallak on
    All the best,
    - Kallak
  • tommy19
    tommy19
    Posts: 62
    Thanks Kallak. With a bit of assistance I was able to get it set exactly the way I wanted it. Awesome bit of code.
  • Supergeek_Mike
    Supergeek_Mike
    Posts: 2
    Hey guys,

    So, I have absolutely no experience with coding, but I love how easy these tutorials are! That said, I had a follow-up question re: Kallak's code:

    For Step 3, the instruction is: "Replace the XXXXXX with the correct number for the character in question." It also says you can find that number in View Source - but where within View Source would I find this number? I tried copying and pasting several strings of numbers, but to no avail - where would be the best place to look for the magic number?

    Also, one more question - you might have answered this previously and I missed it, but how would I make a separate section for 'Deceased / Retired Player Characters', like how they appear in Kallak's campaign? I have a few player characters who have gone the Way Of All Things, and would like to make a separate section for that...

    Thanks guys! All help is appreciated for an amateur (read: tourist) such as myself!
  • Kallak
    Kallak
    Posts: 1,090
    @ Supergeek_Mike, thanks for your support of the four wide layout. I've done my best to make it as easy to implement as possible. On to your questions:

    In order to find the correct character number for a given character via View Source, All you need to do is right click on the character page and click View Source or View Page Source (might be slightly different based on browser). Then you will want to go into the Edit menu of the View Source window and choose Find. This will open a dialog box enabling you to enter text. Enter the name of the character in question and it will pull you to that character and highlight the name. It will look something like this:

    @

    Antares Draco

    Empire (Fel)
    Imperial Knight
    Human
    Male

    @

    The number you will want is the one at the end of the "li id=" entry. In the case of this character, Antares Draco, that number is 445539.

    As for the Deceased/Retired section from my "Kalamar 4":http://www.obsidianportal.com/campaign/dangerous-kalamar-4/wikis/characters character page, please note that this is not the stock character page. The page seen is the custom one I made for myself prior to the creation of the Custom CSS for Obsidian Portal users - and thus prior to my creation of the four wide layout. You can see the stock version of my Kalamar 4 character page "here":http://www.obsidianportal.com/campaigns/dangerous-kalamar-4/characters
    All the best,
    - Kallak
  • Supergeek_Mike
    Supergeek_Mike
    Posts: 2
    Thank you, Kallak! That was a big help!
  • Joedylan2000
    Joedylan2000
    Posts: 21
    Thanks Kallak, I am having a go at integrating this into my campaigns right now :)
  • Kallak
    Kallak
    Posts: 1,090
    Not a problem, let me know if you need any help with anything.
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090
    Update: Obviously the Reforge has boggled this "mod" all up. I'll see about fixing it once my campaign has been repaired. I'll update this post when that happens.
    All the best,
    - Kallak
Sign In or Register to comment.

March 2024
Wrath of the Highborn

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