[How To] Alternate Character Listing Layout via CSS

24

Comments

  • wolfhound
    wolfhound
    Posts: 354
    Ironically... My group tonight requested four wide. :) they liked the larger graphic, so all i did was add a text align center to the containing div to catch odd numbered rows
  • wolfhound
    wolfhound
    Posts: 354 edited April 2013
    Using a tool that allows regular expressions like Notepad++

    You can cut and paste your entire source code for the character listing page to a text file, open it up in Notepad++ and do a

    Search > Find > Select "regular expression" down towards the bottom > in the field search something like "character-list-item-(\d+)" (with or without quotes)

    Then click "Find All In Current Document" and then right click the hits, copy, and paste them into a new document. You now have significantly less to edit and a full list of the items you need.

    The pic is a different matter.

    Just FYI - yes 200+ characters is a lot of work. My werewolf one was right at 100
    Post edited by wolfhound on
  • Kallak
    Kallak
    Posts: 1,090
    Nice.
    All the best,
    - Kallak
  • wolfhound
    wolfhound
    Posts: 354 edited April 2013
    Hmm. Maybe a tutorial will be better.

    Step by Step guide to using Notepad++ and Regular Expressions to get your character list.

    1) Go to your character page. View Source and select all, paste it into a new text file. (MyCharList.txt in this example)
    2) Open Notepad++
    3) File > Open > MyCharList.txt
    4) Search > Find > Select the Replace tab
    5) In the find, input a single quote= "
    6) in the replace, input the newline symbol= \n
    7) Click Replace All
    8) Search > Find > select Regular Expression (down towards the bottom)
    9) Input the following= character-list-item-(\d+)
    10) Click Find All in Current Document
    11) Right click > Select All > Right Click Again > Copy
    12) Paste to a new text file (MyCharListScrubbed.csv) Get External Data "From Text"
    3) On the Text Import wizard make sure you have "Delimited" selected
    4) Click Next
    5) Deselect the Tab checkbox, and then check "Other" and put in a Colon ":" (the Notpad++ scrubbed file has a bunch of those)
    6) Hit next
    7) hit finish
    8) Hit ok
    9) Delete the now useless A column
    10) poof

    You now have an excel spreadsheet, since I deleted the useless A column this is my finished list. I then used my Excel fu to dynamically create all my CSS

    ... the excel side will be another post if needed.
    Post edited by wolfhound on
  • wolfhound
    wolfhound
    Posts: 354
    "Final" update I guess

    "http://www.obsidianportal.com/campaigns/auld-lang-syne/characters":http://www.obsidianportal.com/campaigns/auld-lang-syne/characters

    So even though you can't see all my characters (many are still GM only) I was able to process all 99 characters in just under 60 minutes, and almost all that time was spent cut & pasting the graphic I wanted to use into my spreadsheet.
  • Kallak
    Kallak
    Posts: 1,090
    That almost looks like cardstock character representations from a boardgame or something, pretty cool.
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Really looks awesome Wolfhound!
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • Zeram
    Zeram
    Posts: 19
    This is an awesome thread. Kallak, Wolfhound, madartiste, all awesome!!

    I got through all of Wolfhound's tutorial until Step 9 on the second half. Not sure what you mean by useless A column. Though I'm using Open Office to do this and not Excel, so I may not be seeing the same thing you are. I did the equivalent in your tutorial with Open Office and I was left with one column with all of the character-list-item-###### all in a neat column, which I assume is the end result.

    Wolfhound, how did you create your CSS after creating the spreadsheet with excel?
  • Kallak
    Kallak
    Posts: 1,090 edited May 2013
    By chance, I happened upon the discovery that I inadvertently left off the "#character-list" from the ".tag-list" selector on the default code, causing it to hide not only the tag list on the character page, but on the items page as well. I have updated the code and fixed the mistake but I post this to make sure that everyone is aware of that initial error in case you used it for your campaign. Don't want any item tags hidden that shouldn't be.

    Apologies for any mix-ups.

    EDIT: Also added some minor alterations to the text-shadow to help with readability on lighter color backgrounds.
    Post edited by Kallak on
    All the best,
    - Kallak
  • wolfhound
    wolfhound
    Posts: 354
    Zeram, when I exported from Notepad++ I had line numbers "Line 3:" and "Line 27:" etc. - since we were using the colon as the delimiter I had

    Column A: Line 3
    Column B: The text I actually needed

    If open office allowed you to pull it all in without the line number prefix, awesome. :)

    Re: Spreadsheet-fu
    For me, the way I did it was I used the CONCATENATE() function in excel to take all my columns and create the final output. I didn't save my work, so I'm going off memory here.

    Get the name column
    1) Basically I did the notepad++ thing again, this time just pulling out character names. I believe the Regex I used was
    class="character_link">(.*)
    2) Then do the same import to Excel/Open Office except delimit on >
    3) Then drop the name column into your spreadsheet where you already have the "character-list-item-numbers"

    Get the Image URLS
    1) This is just boring cut and paste URLs into another column on your growing spreadsheet.

    Flesh out the missing columns
    So if my desired CSS is this
    /* Roisin Murphy */ #character-list-item-377265.character-list-item { background-image:url("http://cdn.obsidianportal.com/assets/157499/Rosin4.png");}

    Column
    A = /*
    B = Name Column
    C = */
    D = a # symbol
    E = my character list code column
    F = .character-list-item (I had to use a special character in Excel to get a period all by itself)
    G = { background-image:url("
    H = my url column
    I = ");}

    Then in another column I concatenate all my other columns =concatenate(a1,b1,c1,d1,) etc. etc.

    That final "concatenate" column is the one I paste in.

    Hope that helps at a high level, obviously the more familiar you are with Excel/Open Office formulas etc. the easier this is/more it makes sense.
  • Zeram
    Zeram
    Posts: 19 edited May 2013
    If I knew how to create four box rows, it would help immensely.

    Since I don't yet (I'm still trying to understand how to manipulate the tri-box by referencing the CSS tutorials on your site Wolfhound), I will keep tinkering around with this so when I do have it figured out I can implement it from the get-go.

    What I am shooting for in my "Blood in the River":http://www.obsidianportal.com/campaigns/blood-river site is to get a four box row going my "People" section of the wiki to display the characters as they are in my Characters tab, but have the NPCs divided by city/region so people have a good idea of who is where. I'm thinking about using thre tribox with rollover for the locations and factions but I'm not sure if doing 4 in a row on one page and 3 in a row on others would mess with the continuity of the layout.

    This is the first time I've actually gotten serious about learning CSS and I've made some progress this week but I've got a really long way to go. The information you guys have provided in this thread and on your tutorials have been an immense help and have allowed me to try and fiddle with stuff on my own in order to get an understanding of how this stuff works. Thank you!

    Update: I just figured out the concatenate function on Open office and have that part down and the entire code that matches what's in my CSS that I have confirmed works. Unfortunately this finished product matches exactly what I already have in my CSS for what I have character wise so far. I will be adding many more NPCs to my campaign as we have only just begun, so I will use this method when I start adding more NPCs to the list.

    Now to start fiddling with this quad box method.
    Post edited by Zeram on
  • Kallak
    Kallak
    Posts: 1,090
    So if I'm understanding this correctly, you're looking to make a "People" page which replicates the character page with the 4 wide alteration, but then has the characters divided by location? If such is the case, I could definitely show you how to do it based on my original "character page":http://www.obsidianportal.com/campaign/dangerous-kalamar-4/wikis/characters. I can tell you from experience that it can be more than a little work in the upkeep department if you intend to add characters over time - but don't let that discourage you if it is what you want for your campaign. I certainly didn't.

    Linking to the character page with various filters by location might be an easier system for you, though certainly less visual on your "People" page. Let me know more and I'll see how much I can give you based on my previous work.
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    I will also be happy to share my code- and it is easy to add or change people, as it happens all the time in my game. Here is my "performers page":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/performers
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • Zeram
    Zeram
    Posts: 19 edited May 2013
    Kallak - Yep, that's exactly what I'm looking to do. I'm fine with adding and adjusting over time.

    The Character list is just a jumble of portraits and names, so I'd like to divide it by location.

    EDIT: I saw your post about adding something you forgot. I tried adding it to my CSS but then I realized I am using madartiste's modified code he posted in this thread.

    This is what I currently have:

    /*ALTERATIONS FOR CHARACTER LISTING*/
    .character-list-item { border:2px solid maroon;width:156px;min-height:156px;display:inline-block;margin-bottom:10px;margin-right:7px;text-align:center;background-repeat:no-repeat;background-size:156px 156px;position:relative }

    div.tag-list { display:none; } #character-list img.game-content-image { display:none; }
    a.character_link { font-size:16px;font-weight:bold;color:white;text-shadow: 2px 2px #000000; }
    .character-list-item a { position:absolute;bottom:0px;text-decoration:none;margin-left:-2px;display:block;padding-top:130px;width:100%; }

    This section of code you added in your edit refers to the tags a GM can add to a character or npc, yes?
    Post edited by Zeram on
  • wolfhound
    wolfhound
    Posts: 354 edited May 2013
    Zeram, on my "Uncanny":http://www.obsidianportal.com/campaign/uncanny/wikis/main-page site I did a new version of my wiki buttons that I think might suit you more. For this one I throw out the containing divs and just let the buttons sort themselves out naturally.

    So on the Wiki page itself

    You-button-text here

    and in the CSS

    a.rollover {position:relative; display:block; width:220px; height:110px; text-decoration: none; background:url('your-transparent-highlight-graphic'); background-color:transparent;}

    a.rollover:hover {background-position:-220px 0px;}

    .overtext {position:absolute; top:34%; left:0px; text-align:center; width:220px;}

    .overtext:hover {color:red;}
    Post edited by wolfhound on
  • Zeram
    Zeram
    Posts: 19 edited May 2013
    That's AWESOME, Wolfhound!!

    Does that part of the CSS go in at the very bottom, below the suggested line? (this: /* I WOULD RECOMMEND PUTTING YOUR CUSTOM CSS BELOW THIS LINE */ )

    Hmm.. whenever I try to edit my CSS and add the code you listed, I get an internal server error (500).
    Post edited by Zeram on
  • wolfhound
    wolfhound
    Posts: 354
    Yes, that's what I did. You got it.
  • Zeram
    Zeram
    Posts: 19
    Yea I keep getting the error.
  • wolfhound
    wolfhound
    Posts: 354
    Go in and retype all the single and double quotation marks by hand - this forum jacks them up usually so a cut and paste is a gamble.
  • Zeram
    Zeram
    Posts: 19 edited May 2013
    That worked!! Thanks :)

    However, when I entered the wiki page code, there's nothing that shows up. I have the links and link to the background image in there. Hmm.

    BTW, are you guys using Redcloth 3 or 4?

    EDIT: I got the boxes to show, but they are all showing the same image and not the mosaic. They are also in a stack and not a row. I will continue tinkering.

    EDIT 2: I got the buttons to go 4 in a row but I'm still encountering the button background/rollover graphic issue.

    Wolfhound, your Uncanny site has two different graphics for the button background and rollover image. The code you listed only has one image url. My buttons are two rows of 4, all showing the same corner of the background image. When you mouseover, the rollover shows another corner of the same image.

    "Example":http://www.obsidianportal.com/campaign/blood-river/wikis/test-3
    Post edited by Zeram on
  • wolfhound
    wolfhound
    Posts: 354 edited May 2013
    Oh if you'd like the same mosaic effect I've got on uncanny, lemme post the full CSS and text. It's a bit more tricky.

    My CSS
    ------------------
    /* glow wiki buttons */

    a.rollover {position:relative; display:block; width:220px; height:110px; text-decoration: none; background:url('http://cdn.obsidianportal.com/assets/206951/xmanwikihighlight.png'); background-color:transparent;}

    a.rollover:hover {background-position:-220px 0px;}

    .overtext {position:absolute; top:34%; left:0px; text-align:center; width:220px; color:blue; font-size:x-large; font-family:'Walter Turncoat', 'Comic Sans MS', sans-serif; line-height:97%; text-shadow:-2px 0px yellow,0px -2px yellow, 2px 0px yellow, 0px 2px yellow;}
    .overtext:hover {color:yellow; text-shadow:-2px 0px blue,0px -2px blue, 2px 0px blue, 0px 2px blue;}

    .wikibutton {display:inline-block; vertical-align:top; height:110px; width:220px; margin:2px; background:url('http://cdn.obsidianportal.com/assets/206619/XMenDoorPoster40.jpg'); }

    My WIKI page - note that each button has a background-position value, each button is moving around my single embedded image to create the mosaic.
    ----------------------
    House Rules / System Reference

    Uncanny FATE Overview

    Table: New Ladder

    Stress & Consequences

    Time

    Effort, Shifts, & Difficulty
    Post edited by wolfhound on
  • Zeram
    Zeram
    Posts: 19
    Awesome, thanks.

    I think I'm starting to get the hang of it, slowly but surely.

    "Test Page":http://www.obsidianportal.com/campaign/blood-river/wikis/test-3
  • wolfhound
    wolfhound
    Posts: 354
    Looks great!
  • Zeram
    Zeram
    Posts: 19
    Thanks!!

    The transparency of the background image doesn't seem to be working, though.
  • wolfhound
    wolfhound
    Posts: 354
    On mine it's not a transparency, I actually applied a layer over the image in GIMP and merged it to give it that washed out look. The only transparent image on mine is the "X" PNG
  • Zeram
    Zeram
    Posts: 19
    I got it, I added the opacity bit to the very end of the wiki button code:

    .wikibutton {display:inline-block; vertical-align:top; height:110px; width:160px; margin:2px; background:url('http://farm8.staticflickr.com/7328/8720846141_e197f7351c_b.jpg');opacity:0.8; }
  • Zeram
    Zeram
    Posts: 19
    I'm having trouble trying to replace the rollover graphic though.. When I try to replace the url of highlight image with the graphic I want to use, the replacement graphic overtakes the background image, and you cant even see the background. Do i need to modify the new highlight image to make it like the one you use? Not sure what I need to do there, or if it's just a matter of swapping the URLs in the code once I'm done.
  • wolfhound
    wolfhound
    Posts: 354
    Got a link to your new graphic? I can take a look

    General
    1) Make sure the dimensions are twice the width, and same height, as your final button width (mine were 220x110 buttons, so my graphic was 440x110, yours will be modified accordingly)
    2) Make sure in your graphic editing software you set the transparency to whatever you feel it needs to be. I would start at 50% transparent as a starting point. Then save it as a PNG or GIF (something that supports transparency)
    3) Adjust the a.rollover:hover {background-position:-???px 0px;} to be equal to whatever the value of your new button width
  • Zeram
    Zeram
    Posts: 19
    Yea I've been trying but the image still overlays onto the button without mouseovering it.

    "Example":http://www.obsidianportal.com/campaign/blood-river/wikis/job-board
  • Zeram
    Zeram
    Posts: 19
    No luck yet, I'll keep trying.
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