| Table of Contents Warnings
If you have already customized your profile or received a custom skin from someone, you can edit these changes in yourself to keep your profile skin up to date with all the forum skins (e.g., not like Rurik's busted-ass skin).
Here is your basic profile skin, with all adjustments and updates to account for different forum skins as of January 2010. For an example of wtf this looks like, please see Sicarus de Ericeto's profile.
|
'Souls RPG IPB Archive
- This is a converted archive of our old Invision Power Board forum, live from November 2007–October 2012. It is READ ONLY. You cannot register new accounts. Old IPB accounts can login for their old PMs, but nothing else.
- For further information, including troubleshooting and reporting any errors on the archive, see the IPB Archive Information topic.
- Got broken IC table code? It goes in the Broken Table Code topic.
15 posts
• Page 1 of 1
UNOFFICIAL CSS Profile Skinning Guide
POSTED: Wed Aug 12, 2009 9:48 pm
POSTED: Sat May 08, 2010 8:44 pm
Controls
There are a lot of suggestions on what I do in profiles -- feel free to play around, though! By no means do you have to make your profiles look like mine. XD You should definitely keep your profiles generally in line with the rest of the forum as far as the basic layout, though -- though you can make them align to the left and right (and even add sidebars if you're that awesome with CSS) it may be very jarring to view a profile that is so different from the rest of the forum layout. You should not use display properties to hide elements.
body{ }
This basically just controls the outermost background of your page. Images, colors, whatever. I generally do some kind of repeating background -- there are craptons of useful resources for very simple backgrounds, and if you have Adobe Photoshop, it's ridiculously easy to make your own seamless tiled background.
a:link,a:visited { }
The body links, this controls all general links. Some links are controlled by separate classes -- those are explained later. This controls all links within the profile save for the specialized ones. Even if you want all of your links in the same color, you must then change all of the specialized links to these colors -- deleting the classes won't work, since the skins use different link colors in different places.
#userlinks a:link,#userlinks a:visited{ }
This controls the user links--e.g., "You are logged in as [Profile Name]" and "My Controls - New Messsages" etc. I generally set these to the same color as the body links, but you may wish to change them to a different color.
#navstrip a:link,#navstrip a:visited { }
This controls the navigation strip links--essentially just the "'Souls - Viewing Profile" part. I usually match this with the #navstrip text, but sometimes I make the #navstrip transparent, then I match it to the copyright link color.
.copyright a:link,.copyright a:visited{ }
Controls the copyright link colors and attributes. This is only used at the very bottom of the forum, but as the background color where it sits is generally different enough from the rest of the document that it requires a different shade or a different color altogether
.maintitle { }
This controls most elements of both the help menu bar at the top (Plot, Rules, etc) as well as the In Character and Out of Character headers. Please note that the text of the In Character and Out of Character headers are controlled here, whereas the Help Menu Bar's text is controled by the .maintitle a { } elements except for the little dots between each word. It usually looks wonky if the dots are really, really different from the rest of the text, so keep that in mind.
.maintitle a:link,.maintitle a:visited{ }
This controls the help menu bar's links--the Plot, Rules, etc. Note again that the little separator dots are controlled by the previous class.
.row2{ }
This controls the Announcements box and other elements about that particular box. Sometimes I make this text a shade smaller than the rest of the profile forum. The text of the announcements themselves are controlled by .desc{}
.row2 b{ }
This controls the bolded dates within the Announcements box. I usually don't set this to a different color, but you might want to. It looks best if you keep the other elements (e.g., font, size, spacing) the same as the announcements box text, but you may feel differently.
.row3 { }
This is the primary box control of the profile--this controls all of the text boxes other than the Announcements box, the ones that appear beneath the character's name and the "Out of Character" header. This is what most of your information will be displayed as; make very sure this text is readable. Don't use super-tiny or super-huge fonts, and it's best not to stretch or diminish the letter spacing or line height to ridiculous proportions.
.row3 b{}
This controls the separate category heading text--e.g., "Catacombs", "Appearance" etc. Remember that if you want to use bolded text within your information, you should use the (strong) tag instead, as all (b) tags you'd type for your information are affected.
#userlinks{ }
This controls the userlinks bar--this is the uppermost bar beneath the header image, where it says "You are [Username]" and so forth. Some text is controlled by the strong class, probably as a fix for old layouts. I usually just make sure that the #userlinks and #userlinks strong match as far as font, size, and color, and leave them alone otherwise.
#userlinks strong{ }
This controls the bolded text of the userlinks bar which is just "You are". I think one of the skins had something different about this, so it's included? >_>
#annbox{ }
This essentially controls the outer border of the announcements box. The background color is also used to control the uppermost help menu bar (Plot, Rules, etc.) -- if you want a different color or even an image on the uppermost menu bar, use different colors for this class and the background color of .maintitle{}. I usually just leave this the same as .maintitle{} though.
#annbox2 { }
This controls the border around the help menu bar (Plot, Rules, etc).
#annann { }
This controls the stuff around the "Announcements" box, like background, font color, etc.
.infotable{}
This controls some attributes about the [s]weather[/s] pack ranks box -- the background, removing the curved CSS3 borders in the "Cold Outside" skin, etc. Some of the different texts are controlled by different classes: e.g., [s]the "Current Weather" and[/s] "Pack Ranks" are controlled by the .header{} class, [s]and the date as well as the High/Low text are controlled by the .subheader{} class[/s]. Note, 11 Aug 2010: Since the weather has been shifted over to the Area help topic, I think that the relevant parts are unnecessary anymore? :O Leaving them in struck out just in case.
#extrawrapper{ }
This is the rearmost wrapper around the profile, behind the header and the other text boxes. You can add a background here or set the background-color to transparent and remove the border to remove it altogether and have the profile boxes floating over the profile background (e.g., Harlowe's skin. You can also control the top and bottom margins for the page and give more or less of a margin there, if you'd like.
#logostrip{ }
This is where your header image goes! Pretty much the only thing you have to adjust here is the image and the height of the image. Just put in how tall your image is and you're good here.
Your profile image should be 750 pixels wide. I generally do not venture over roughly 350 pixels for my header images--if I have to scroll past the image to see any text at all, I feel that it's too tall. You can change the background color if you want, but generally as you want your image to fully cover the background here, it is not necessary. If you have an image where the text hangs over a transparent part of the image, you will went the background of this to be the same as the #extrawrapper{} background, and you will also want to disable the bottom border.
A note about profile images -- you should try to find pictures that are stock images, Creative Commons, or otherwise public domain. You should also credit your photographers. You can do this either with embedded comments, or you can throw a link out to them in your profile. :3
#profilename{ }
This controls the character's name as it appears above the "In Character" header.
#navstrip{ }
This basically controls the box where it says "Souls - Viewing Profile." Sometimes I make this transparent, you can do that by editing background-color: and replacing the hex code with transparent. You'll also want to set the border to 0px if you do that.
.titlemedium2{ }
This controls the attributes of the sub-menu of links where it says "Procedures, Packs, etc"
.titlemedium2 a:link,.titlemedium2 a:visited{ }
This controls the submenu of links where it says "Procedures, Packs, etc." This controls the actual link functions.
.desc{ }
This controls the font stylings of the announcements text.
[s].subheader{ }
This controls the color of the weather's date and High/Low text. You can usually leave this the same as your primary text color.[/s] -- Not necessary now, due to the removal of the weather box. However, you could probably keep this the same as the header text or similar -- that way if the meanie admins decide to include it in another class later on, you'll be prepared. XD
.header{ }
This controls the [s]"Current Weather" and[/s] "Pack Ranks" text in the pack ranks box. Please note that the sizes of these cannot be changed for whatever reason; take that into account when selecting a font. Negative letter and word spacing are a good assist on this one if you want to use a funky font.
.copyright{ }
This controls the copyright text.
.tableborder{ }
This is your primary border control for most profile area. Some borders -- e.g., the ones wrapping the announcement box -- are different colors in some skins, and thus you do have the ability to change those and make them unique. The In Character text areas are controlled by the next class, so you can also make those different.
.plainborder{ }
This controls the border in the in character text areas.
#ucpcontent{ }
I am pretty sure this is a fix for a layout.~
.pformstrip { }
Not sure, again I think this is a fix for an older skin.
strong{ }
Once more, I believe this is a fix for an older skin. I generally set this to the same properties as the row3 {} text but with the font-weight set to bold.
.darkrow2{ }
I really don't know. I think this is a fix for an older skin~. :O
POSTED: Thu Sep 02, 2010 3:07 pm
<span style='font-size:12pt;line-height:100%'>Sizing Chart</span>
This works with the .infotable class which is built into every skin, so it doesn't require much messing with colors or anything. :D
01. Here is your HTML. This would probably go in the Appearance box. :o
- Code: Select all
<table class="infotable" id="sizechart"><tr><td colspan="4"><strong>Precise Size</strong></td></tr><tr><td> <strong>Form</strong></td><td> <strong>Weight</strong></td><td> <strong>Height</strong></td><td> <strong>Length</strong></td></tr><tr><td><em>Lupus</em></td><td>xx lbs.</td><td>xx in.</td><td>xx in</td></tr><tr><td><em>Secui</em></td><td>xx lbs.</td><td>xx in</td><td>xx in</td></tr><tr><td><em>Optime</em></td><td>xx lbs</td><td>xft xin</td><td>--</td></tr><tr><td colspan="4"><strong>Preferred Form</strong>: xxx</td></tr></table>
02. Here is your CSS. Tack this onto your stylesheet. I find it's kind of helpful to separate what's the 'core' stylesheet and these special tricks with a CSS comment -- /*This is a CSS comment*/ -- so I know where one begins and the next ends. Then again, I skin profiles and mess with them a lot, so you may not care so much. 8D
- Code: Select all
#sizechart{float:right; width:200px;border-collapse:collapse; margin:10px;}#sizechart td{border:1px solid #000000; padding:3px;font-family:georgia, serif; font-size:12px;}
#sizechart tells it which side to align (float:right; or float:left;), how wide it should be (200 px works just dandy for me, for the table to collapse borders to avoid double borders, and to have a 10px margin.
#sizechart td tells it to give each table cell a 1px border in black, 3px padding for each cell, and font stylings.
----
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION I</span>
Much like the above, this allows you to display your <a href='http://soulsrpg.com/ipb/viewtopic.php?t=11721' target='_blank'>inventory icons</a> in a neat little side-floating table. There is currently an example in Kaena's profile.
HTML
- Code: Select all
<table class="infotable" id="inventoryitems"><tr><td colspan="2" class="header">Inventory Items</td></tr><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>
CSS
- Code: Select all
.#inventoryitems{float:right; width:200px;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px; font-size:75%;vertical-align:top;}#inventoryitems td.item{text-align:center;}
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION II</span>
UNLIKE the above version, this is a stand-alone inventory icons table, intended to have its own containing row. For a working example, you can check <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=4134495#inventoryexamp' target='_blank'>here</a>.
HTML
- Code: Select all
</td></tr><tr><td class="row3" id="inventoryexamp"><b>Inventory Icons</b>: <table class="infotable" id="inventoryitems"><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>
CSS
- Code: Select all
#inventoryitems{width:95%;margin:0px auto;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px;vertical-align:top;}#inventoryitems td.item{text-align:center; width:25%;}
----
<span style='font-size:12pt;line-height:100%'>OOC row3?!</span>
Okay, so it is pretty easy to add extra dividers to your profile in the IC area, but if you try the same code that works there in the OOC area, it gives you a frightening broken profile that makes the HTML spirits weep. Up until recently, it wasn't even possible to HTMLize OOC areas, so... how do we fix this?!
- Code: Select all
</td></tr><tr><td colspan="3" class="row3">
:D In the OOC areas, the one table row consists of the avatar, a column of OOC information, and a column of contact information, so we need for any added rows in the OOC area to span over those 3 columns in order to function properly. HOORAY!
----
<span style='font-size:12pt;line-height:100%'>Age/DOB/Luperci on Same Line</span>
I was gawking at my character profiles and I saw that Age, Date of Birth, and Luperci could easily be condensed to one line, and it was somewhat irritating to have each of them on a separate line, since it makes for a longer profile and as I am insane and my character profiles are already ridiculously long, I like to keep them as short as possible. Thus, there is this hax0ring:
HTML (I just put it right after Catacombs. This works like any other row3 class you'd insert, pretty much. 8D)
- Code: Select all
</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"><b>Age</b>: 10</td><td class="row3"><b>Birthdate</b>: November 7, 1999</td><td class="row3" style="border:0px;"><b>Luperci</b>: Ortus</td></tr></table></td></tr><tr><td class="row3"><b>Heritage</b>: 50% <i title="Northeastern coyote">Canis latrans thamnos</i>, 25% <i title="Red Wolf">Canis rufus rufus</i>, 25% <i title="Dog (mixed breeds)">Canis lupus familiaris</i>
CSS
- Code: Select all
.siehaxorz{width:100%;}.siehaxorz td{border-right:1px solid black; width:33%; padding:5px;}
You may have to adjust the value of padding, depending on whether or not you have custom CSS. SIMPLE AND EFFECTIVE. 8D
POSTED: Sat Sep 04, 2010 2:11 am
Ooh, the three-column fix is lovely! I edited it a bit two get two columns on <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=41342' target='_blank'>my profile</a> near the bottom! :D
- Code: Select all
</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"> <b>Archives</b>: <a href="?viewtopic.php?t=138#entry427" style="font-weight:bold;">I WANT YOUR LOVE,</a></td><td class="row3" style="border:0px;"> <b>Inferni Game Points</b>: <a href="?viewtopic.php?t=138#entry80697" style="font-weight:bold;">AND ALL YOUR LOVE IS REVENGE</a></td></tr></table></td></tr>
I also had to mod the CSS a bit to fit:
- Code: Select all
.siehaxorz td{border-right:1px solid black; width:50%;padding:5px;}
POSTED: Mon Jun 25, 2012 12:51 am
[s]how can you change text color when you wanna put like eye color ..?
ex:
Has <span style='color:gray'>gray</span> eyes ... etc.
It's just showing up black for me.[/s]
[s]EDIT: neeeevermind, I figured it out. I had the words 'stronged', and so they were turning up bold and black .[/s]
EDIT x2: NEW QUESTION: WHY is the bottom part of my profile black !? I thought I changed everything to white... what am I missing here ?
POSTED: Mon Jun 25, 2012 4:01 am
Your table is not closed properly. Try sticking </td></tr></table> at the very end of your profile. If a single thing doesn't work, try </td></tr></table></td></tr></table>. If neither works, come back here and lemme know. <3
POSTED: Mon Jun 25, 2012 6:27 am
Didnt work >.<
I already have all that on the bottom of the actual profile code thingy... the shell is whats screwing up... I think. O.O
ANOTHER QUESTION for you Sie, my dear -- What did I do wrong to make the avatar space stretch out like that? i looked for the problem and I couldnt find anything wrong O.o
POSTED: Mon Jun 25, 2012 6:39 am
lol, three's the charm -- I just stuck another </td></tr></table> in there and it looks to all be fixed now. c;
POSTED: Mon Jun 25, 2012 8:51 pm
Thank you beautiful <3
POSTED: Tue Jul 03, 2012 6:23 pm
Help, I have fallen into coding and I can't get up!
I have three problems--[s]one, I cannot change the background color of the bar where it says Plot, Rules, Joining, etc. You can see I tried to do something... but it only colored the text around it.[/s] Found that. :P
[s]Two, I cannot find where to edit the "Offsite Links" background and font color. I could swear I saw is somewhere above, explaining where it was, but now I cannot find it. |:<[/s] Okay, I was stupid for missing this...
[s]Three, again, cannot find where to edit the background color for the inner Announcements box.[/s] LOL, FOUND THAT TOO. I'm getting good at finding stuff. xD
Yay, I figured all this by myself! xD You can delete this post now.
POSTED: Sun Jul 15, 2012 1:19 am
On my profile I'm making a skin for Toby and can't figure out what I'm missing to make the white box at the top change colors including the text colors ;-;
Also if anyone could resize the top picture I would love you :3 I can't make a picture properly until I get my laptop sometime in mid august:(
Thankya<3
POSTED: Sun Sep 02, 2012 8:28 am
I got another 2 questions :
First : I think we need another fix for these new layouts because I was trying to make my boxes float like in Harlowe's layout and they were 2 days ago -- but not there's an ugly border around them again >.<
How do I get rid of that?
Second: How do I close the last boxes of my height chart (in the profile) ? I've had it like that for the longest, and never asked o.o
Thanks :)
EDIT: Alsooooo, for my NPC title header things... I would like them to be the same color green as all the other titles.... but I can't seem to get that to work >.<
AND my banner picture won't show ! I know there was a catch to make it show... but I don't remember what it wass ...
I have a lot of problems.
POSTED: Sun Sep 16, 2012 4:29 am
bump. I totally still have a question ^^^^
POSTED: Sun Sep 16, 2012 6:40 am
I remember something...not sure if it would work, but it's worth a try.
If you're using the coding for the OOC layout there is a little tidbit in the coding that is
#logostrip { display: none; }
Just get rid of that one ^
[s] It's either get rid of the "none" or the whole little sentence....
Pretty sure that's the fix.
As for the other thing, I don't know.
I advise you try deleting the "none" first because sometimes the placement of the coding depends greatly. But if it still doesn't show, just remove that whole tidbit.[/s]
I found out, it shows your banner!
POSTED: Mon Sep 17, 2012 5:50 am
Thanks :3
I actually figured it out before I read this heehe
- · Page 1 of 1
- 15 posts
POSTED: Wed Aug 12, 2009 9:48 pm
|
|
POSTED: Sat May 08, 2010 8:44 pm
| Controls There are a lot of suggestions on what I do in profiles -- feel free to play around, though! By no means do you have to make your profiles look like mine. XD You should definitely keep your profiles generally in line with the rest of the forum as far as the basic layout, though -- though you can make them align to the left and right (and even add sidebars if you're that awesome with CSS) it may be very jarring to view a profile that is so different from the rest of the forum layout. You should not use display properties to hide elements. body{ } a:link,a:visited { } #userlinks a:link,#userlinks a:visited{ } #navstrip a:link,#navstrip a:visited { } .copyright a:link,.copyright a:visited{ } .maintitle { } .maintitle a:link,.maintitle a:visited{ } .row2{ } .row2 b{ } .row3 { } .row3 b{} #userlinks{ } #userlinks strong{ } #annbox{ } #annbox2 { } #annann { } .infotable{} #extrawrapper{ } #logostrip{ } Your profile image should be 750 pixels wide. I generally do not venture over roughly 350 pixels for my header images--if I have to scroll past the image to see any text at all, I feel that it's too tall. You can change the background color if you want, but generally as you want your image to fully cover the background here, it is not necessary. If you have an image where the text hangs over a transparent part of the image, you will went the background of this to be the same as the #extrawrapper{} background, and you will also want to disable the bottom border. A note about profile images -- you should try to find pictures that are stock images, Creative Commons, or otherwise public domain. You should also credit your photographers. You can do this either with embedded comments, or you can throw a link out to them in your profile. :3 #profilename{ } #navstrip{ } .titlemedium2{ } .titlemedium2 a:link,.titlemedium2 a:visited{ } .desc{ } [s].subheader{ } .header{ } .copyright{ } .tableborder{ } .plainborder{ } #ucpcontent{ } .pformstrip { } strong{ } .darkrow2{ } |
|
|
POSTED: Thu Sep 02, 2010 3:07 pm
<span style='font-size:12pt;line-height:100%'>Sizing Chart</span>
This works with the .infotable class which is built into every skin, so it doesn't require much messing with colors or anything. :D
01. Here is your HTML. This would probably go in the Appearance box. :o
02. Here is your CSS. Tack this onto your stylesheet. I find it's kind of helpful to separate what's the 'core' stylesheet and these special tricks with a CSS comment -- /*This is a CSS comment*/ -- so I know where one begins and the next ends. Then again, I skin profiles and mess with them a lot, so you may not care so much. 8D
#sizechart tells it which side to align (float:right; or float:left;), how wide it should be (200 px works just dandy for me, for the table to collapse borders to avoid double borders, and to have a 10px margin.
#sizechart td tells it to give each table cell a 1px border in black, 3px padding for each cell, and font stylings.
----
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION I</span>
Much like the above, this allows you to display your <a href='http://soulsrpg.com/ipb/viewtopic.php?t=11721' target='_blank'>inventory icons</a> in a neat little side-floating table. There is currently an example in Kaena's profile.
HTML
CSS
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION II</span>
UNLIKE the above version, this is a stand-alone inventory icons table, intended to have its own containing row. For a working example, you can check <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=4134495#inventoryexamp' target='_blank'>here</a>.
HTML
CSS
----
<span style='font-size:12pt;line-height:100%'>OOC row3?!</span>
Okay, so it is pretty easy to add extra dividers to your profile in the IC area, but if you try the same code that works there in the OOC area, it gives you a frightening broken profile that makes the HTML spirits weep. Up until recently, it wasn't even possible to HTMLize OOC areas, so... how do we fix this?!
:D In the OOC areas, the one table row consists of the avatar, a column of OOC information, and a column of contact information, so we need for any added rows in the OOC area to span over those 3 columns in order to function properly. HOORAY!
----
<span style='font-size:12pt;line-height:100%'>Age/DOB/Luperci on Same Line</span>
I was gawking at my character profiles and I saw that Age, Date of Birth, and Luperci could easily be condensed to one line, and it was somewhat irritating to have each of them on a separate line, since it makes for a longer profile and as I am insane and my character profiles are already ridiculously long, I like to keep them as short as possible. Thus, there is this hax0ring:
HTML (I just put it right after Catacombs. This works like any other row3 class you'd insert, pretty much. 8D)
CSS
You may have to adjust the value of padding, depending on whether or not you have custom CSS. SIMPLE AND EFFECTIVE. 8D
This works with the .infotable class which is built into every skin, so it doesn't require much messing with colors or anything. :D
01. Here is your HTML. This would probably go in the Appearance box. :o
- Code: Select all
<table class="infotable" id="sizechart"><tr><td colspan="4"><strong>Precise Size</strong></td></tr><tr><td> <strong>Form</strong></td><td> <strong>Weight</strong></td><td> <strong>Height</strong></td><td> <strong>Length</strong></td></tr><tr><td><em>Lupus</em></td><td>xx lbs.</td><td>xx in.</td><td>xx in</td></tr><tr><td><em>Secui</em></td><td>xx lbs.</td><td>xx in</td><td>xx in</td></tr><tr><td><em>Optime</em></td><td>xx lbs</td><td>xft xin</td><td>--</td></tr><tr><td colspan="4"><strong>Preferred Form</strong>: xxx</td></tr></table>
02. Here is your CSS. Tack this onto your stylesheet. I find it's kind of helpful to separate what's the 'core' stylesheet and these special tricks with a CSS comment -- /*This is a CSS comment*/ -- so I know where one begins and the next ends. Then again, I skin profiles and mess with them a lot, so you may not care so much. 8D
- Code: Select all
#sizechart{float:right; width:200px;border-collapse:collapse; margin:10px;}#sizechart td{border:1px solid #000000; padding:3px;font-family:georgia, serif; font-size:12px;}
#sizechart tells it which side to align (float:right; or float:left;), how wide it should be (200 px works just dandy for me, for the table to collapse borders to avoid double borders, and to have a 10px margin.
#sizechart td tells it to give each table cell a 1px border in black, 3px padding for each cell, and font stylings.
----
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION I</span>
Much like the above, this allows you to display your <a href='http://soulsrpg.com/ipb/viewtopic.php?t=11721' target='_blank'>inventory icons</a> in a neat little side-floating table. There is currently an example in Kaena's profile.
HTML
- Code: Select all
<table class="infotable" id="inventoryitems"><tr><td colspan="2" class="header">Inventory Items</td></tr><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>
CSS
- Code: Select all
.#inventoryitems{float:right; width:200px;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px; font-size:75%;vertical-align:top;}#inventoryitems td.item{text-align:center;}
<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION II</span>
UNLIKE the above version, this is a stand-alone inventory icons table, intended to have its own containing row. For a working example, you can check <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=4134495#inventoryexamp' target='_blank'>here</a>.
HTML
- Code: Select all
</td></tr><tr><td class="row3" id="inventoryexamp"><b>Inventory Icons</b>: <table class="infotable" id="inventoryitems"><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>
CSS
- Code: Select all
#inventoryitems{width:95%;margin:0px auto;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px;vertical-align:top;}#inventoryitems td.item{text-align:center; width:25%;}
----
<span style='font-size:12pt;line-height:100%'>OOC row3?!</span>
Okay, so it is pretty easy to add extra dividers to your profile in the IC area, but if you try the same code that works there in the OOC area, it gives you a frightening broken profile that makes the HTML spirits weep. Up until recently, it wasn't even possible to HTMLize OOC areas, so... how do we fix this?!
- Code: Select all
</td></tr><tr><td colspan="3" class="row3">
:D In the OOC areas, the one table row consists of the avatar, a column of OOC information, and a column of contact information, so we need for any added rows in the OOC area to span over those 3 columns in order to function properly. HOORAY!
----
<span style='font-size:12pt;line-height:100%'>Age/DOB/Luperci on Same Line</span>
I was gawking at my character profiles and I saw that Age, Date of Birth, and Luperci could easily be condensed to one line, and it was somewhat irritating to have each of them on a separate line, since it makes for a longer profile and as I am insane and my character profiles are already ridiculously long, I like to keep them as short as possible. Thus, there is this hax0ring:
HTML (I just put it right after Catacombs. This works like any other row3 class you'd insert, pretty much. 8D)
- Code: Select all
</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"><b>Age</b>: 10</td><td class="row3"><b>Birthdate</b>: November 7, 1999</td><td class="row3" style="border:0px;"><b>Luperci</b>: Ortus</td></tr></table></td></tr><tr><td class="row3"><b>Heritage</b>: 50% <i title="Northeastern coyote">Canis latrans thamnos</i>, 25% <i title="Red Wolf">Canis rufus rufus</i>, 25% <i title="Dog (mixed breeds)">Canis lupus familiaris</i>
CSS
- Code: Select all
.siehaxorz{width:100%;}.siehaxorz td{border-right:1px solid black; width:33%; padding:5px;}
You may have to adjust the value of padding, depending on whether or not you have custom CSS. SIMPLE AND EFFECTIVE. 8D
|
|
POSTED: Sat Sep 04, 2010 2:11 am
Ooh, the three-column fix is lovely! I edited it a bit two get two columns on <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=41342' target='_blank'>my profile</a> near the bottom! :D
- Code: Select all
</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"> <b>Archives</b>: <a href="?viewtopic.php?t=138#entry427" style="font-weight:bold;">I WANT YOUR LOVE,</a></td><td class="row3" style="border:0px;"> <b>Inferni Game Points</b>: <a href="?viewtopic.php?t=138#entry80697" style="font-weight:bold;">AND ALL YOUR LOVE IS REVENGE</a></td></tr></table></td></tr>
I also had to mod the CSS a bit to fit:
- Code: Select all
.siehaxorz td{border-right:1px solid black; width:50%;padding:5px;}
|
|
POSTED: Mon Jun 25, 2012 12:51 am
[s]how can you change text color when you wanna put like eye color ..?
ex:
Has <span style='color:gray'>gray</span> eyes ... etc.
It's just showing up black for me.[/s]
[s]EDIT: neeeevermind, I figured it out. I had the words 'stronged', and so they were turning up bold and black .[/s]
EDIT x2: NEW QUESTION: WHY is the bottom part of my profile black !? I thought I changed everything to white... what am I missing here ?
ex:
Has <span style='color:gray'>gray</span> eyes ... etc.
It's just showing up black for me.[/s]
[s]EDIT: neeeevermind, I figured it out. I had the words 'stronged', and so they were turning up bold and black .[/s]
EDIT x2: NEW QUESTION: WHY is the bottom part of my profile black !? I thought I changed everything to white... what am I missing here ?
|
|
POSTED: Mon Jun 25, 2012 4:01 am
Your table is not closed properly. Try sticking </td></tr></table> at the very end of your profile. If a single thing doesn't work, try </td></tr></table></td></tr></table>. If neither works, come back here and lemme know. <3
|
|
POSTED: Mon Jun 25, 2012 6:27 am
Didnt work >.<
I already have all that on the bottom of the actual profile code thingy... the shell is whats screwing up... I think. O.O
ANOTHER QUESTION for you Sie, my dear -- What did I do wrong to make the avatar space stretch out like that? i looked for the problem and I couldnt find anything wrong O.o
I already have all that on the bottom of the actual profile code thingy... the shell is whats screwing up... I think. O.O
ANOTHER QUESTION for you Sie, my dear -- What did I do wrong to make the avatar space stretch out like that? i looked for the problem and I couldnt find anything wrong O.o
|
|
POSTED: Mon Jun 25, 2012 6:39 am
lol, three's the charm -- I just stuck another </td></tr></table> in there and it looks to all be fixed now. c;
|
|
POSTED: Mon Jun 25, 2012 8:51 pm
Thank you beautiful <3
|
|
POSTED: Tue Jul 03, 2012 6:23 pm
Help, I have fallen into coding and I can't get up!
I have three problems--[s]one, I cannot change the background color of the bar where it says Plot, Rules, Joining, etc. You can see I tried to do something... but it only colored the text around it.[/s] Found that. :P
[s]Two, I cannot find where to edit the "Offsite Links" background and font color. I could swear I saw is somewhere above, explaining where it was, but now I cannot find it. |:<[/s] Okay, I was stupid for missing this...
[s]Three, again, cannot find where to edit the background color for the inner Announcements box.[/s] LOL, FOUND THAT TOO. I'm getting good at finding stuff. xD
Yay, I figured all this by myself! xD You can delete this post now.
I have three problems--[s]one, I cannot change the background color of the bar where it says Plot, Rules, Joining, etc. You can see I tried to do something... but it only colored the text around it.[/s] Found that. :P
[s]Two, I cannot find where to edit the "Offsite Links" background and font color. I could swear I saw is somewhere above, explaining where it was, but now I cannot find it. |:<[/s] Okay, I was stupid for missing this...
[s]Three, again, cannot find where to edit the background color for the inner Announcements box.[/s] LOL, FOUND THAT TOO. I'm getting good at finding stuff. xD
Yay, I figured all this by myself! xD You can delete this post now.
|
|
POSTED: Sun Jul 15, 2012 1:19 am
On my profile I'm making a skin for Toby and can't figure out what I'm missing to make the white box at the top change colors including the text colors ;-;
Also if anyone could resize the top picture I would love you :3 I can't make a picture properly until I get my laptop sometime in mid august:(
Thankya<3
Also if anyone could resize the top picture I would love you :3 I can't make a picture properly until I get my laptop sometime in mid august:(
Thankya<3
|
|
POSTED: Sun Sep 02, 2012 8:28 am
I got another 2 questions :
First : I think we need another fix for these new layouts because I was trying to make my boxes float like in Harlowe's layout and they were 2 days ago -- but not there's an ugly border around them again >.<
How do I get rid of that?
Second: How do I close the last boxes of my height chart (in the profile) ? I've had it like that for the longest, and never asked o.o
Thanks :)
EDIT: Alsooooo, for my NPC title header things... I would like them to be the same color green as all the other titles.... but I can't seem to get that to work >.<
AND my banner picture won't show ! I know there was a catch to make it show... but I don't remember what it wass ...
I have a lot of problems.
First : I think we need another fix for these new layouts because I was trying to make my boxes float like in Harlowe's layout and they were 2 days ago -- but not there's an ugly border around them again >.<
How do I get rid of that?
Second: How do I close the last boxes of my height chart (in the profile) ? I've had it like that for the longest, and never asked o.o
Thanks :)
EDIT: Alsooooo, for my NPC title header things... I would like them to be the same color green as all the other titles.... but I can't seem to get that to work >.<
AND my banner picture won't show ! I know there was a catch to make it show... but I don't remember what it wass ...
I have a lot of problems.
|
|
POSTED: Sun Sep 16, 2012 4:29 am
bump. I totally still have a question ^^^^
|
|
POSTED: Sun Sep 16, 2012 6:40 am
I remember something...not sure if it would work, but it's worth a try.
If you're using the coding for the OOC layout there is a little tidbit in the coding that is
Just get rid of that one ^
[s] It's either get rid of the "none" or the whole little sentence....
Pretty sure that's the fix.
As for the other thing, I don't know.
I advise you try deleting the "none" first because sometimes the placement of the coding depends greatly. But if it still doesn't show, just remove that whole tidbit.[/s]
I found out, it shows your banner!
If you're using the coding for the OOC layout there is a little tidbit in the coding that is
#logostrip { display: none; }
Just get rid of that one ^
[s] It's either get rid of the "none" or the whole little sentence....
Pretty sure that's the fix.
As for the other thing, I don't know.
I advise you try deleting the "none" first because sometimes the placement of the coding depends greatly. But if it still doesn't show, just remove that whole tidbit.[/s]
I found out, it shows your banner!
|
|
POSTED: Mon Sep 17, 2012 5:50 am
Thanks :3
I actually figured it out before I read this heehe
I actually figured it out before I read this heehe
|
|
- · Page 1 of 1
- 15 posts
15 posts
• Page 1 of 1