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
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
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.
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.
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?
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.
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.
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.
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.
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/
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 }
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.
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.
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
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
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.
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
Comments
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
- Kallak
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.
"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
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.
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?
Apologies for any mix-ups.
EDIT: Also added some minor alterations to the text-shadow to help with readability on lighter color backgrounds.
- Kallak
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.
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.
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.
- Kallak
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.
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?
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;}
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).
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
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
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
The transparency of the background image doesn't seem to be working, though.
.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; }
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
"Example":http://www.obsidianportal.com/campaign/blood-river/wikis/job-board