![]() |
You know that I am psycho under my hat - Printable Version +- 'Souls IPB Archive (November 2007–October 2012) (https://soulsrpg.com/ipb) +-- Forum: Dead IC (https://soulsrpg.com/ipb/forumdisplay.php?fid=110) +--- Forum: Dead Profiles (https://soulsrpg.com/ipb/forumdisplay.php?fid=23) +--- Thread: You know that I am psycho under my hat (/showthread.php?tid=15335) |
- Pandemic D'Angelo - 02-15-2011 [html]
Pandemic D'Angelo
00. you won't ever save your soul - birthing thread
heartbreaker :: 2011
/*Just some general notes: You can use this to keep track of your Word of the Day or game points, too. It counts them automatically for you, then. 8D An example of this can be found in Sie's postlog (http://www.soulsrpg.com/ipb/index ... st&p=95421). Please feel free to quote the post and lift that example, though I swear there's nothing different about that code than the code provided here! Also, remember, if you use the basic DIV shell in multiple posts, you only need to include the CSS once! That's it! And then you can control all of your archives with one CSS, if you please! If not, and you want multiple different layouts for each character and you plan to customise each one, *PLEASE* remember to change your class names from .char to your character's name or another unique identification, otherwise your CSSes will overlap and it will be bad.*/ .char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px;} /* Main DIV control. This controls your base text. If you want a background or border, you can add them here. You can combine this with my pure css table tutorial, sort of, and set a background image with padding to make it pretty, if you want. ![]() .char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold;} /*This controls the list items and gives them 2px padding on the top and bottom, 0px padding to the left and right, and a leading zero on the list numbers. It also makes the font weight of the numbers bold.*/ .char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; } /*This is so that we can use a different text/font weight/color/etc for our numbers, and have our actual list item content text differ from the numbers. COOL RITE? */ .char-archive ol { list-style-position:inside; padding:0px; margin:0px; } /* This sets the position of the numbers inside; you can also have them display outside, if you like, which will push all of the text over to the right and separate out the numbers to the left slightly. I wouldn't mess with the padding or margin unless you want to add spacing around your archive list.*/ .char-archive p {text-indent:25px; margin:0px; padding:0px; } /*Gives your paragraphs a text indent. I generally only would wrap the thread description with a paragraph tag. If you want to give your thread description a little padding or margin or something, you can adjust those values.*/ .char-archive-warn {color:#AA0000; font-weight:bold;} /*Mature thread warning text color and weight. Please remember to mark your mature threads in their titles, the first post with the provided warnings, (http://www.soulsrpg.com/ipb/index ... t&p=107437), and in profiles, archives, and post logs. Anywhere you can give people a heads up about a mature thread is good.*/ .char-archive li a {text-transform:lowercase;} /*Controls the links used in your list items. If you want all of them to display upper or lowercase, I would recommend setting it via CSS rather than manually typing it in capitalized or all lowercase, because it is far, far easier to go back and change things later if you use CSS to set such things. ![]() .char-post {font-size:15px; color:#8C0404;} /*If you want to use the little symbols, this controls their color and size. I like for the symbols to stick out from the rest of the text, hence the color. They also don't look very good at smaller sizes, that is why they are set for 15px. Feel free to experiment, of course. :3*/ .char-archive .separator { font-family:'times new roman', times, serif; font-size:12px; text-transform:uppercase; border-bottom:1px dotted #000000; font-weight:bold; text-align:right; padding-right:10%;} /*This is the separator control. Font variables and so forth. A note for the separators, you have to place them WITHIN a list item tag (li) in order for them to function properly for every instance except the first one, which is placed outside of the first ordered list tag (ol). An example of this has been done for you--please remember this, otherwise the separators are liable to break something somehow and you will have to rescue your codez and it will not be fun. */ .char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; } /*Controls the "Character Name" part's font and etc.*/ .char-title {width:50%; float:left;} /* Makes the part with your character name and the notes beneath it float to the left. You can change this to right, just remember to set char-notes float to left. */ .char-notes {float:right; width:50%;} /*Makes your character notes float to the right. You can change this to left, just remember to set char-post float to right too.*/ .char-list {clear:both; padding-top:10px;} /*This makes your list clear the title and character notes divs. Don't touch this. ;P You can change the padding so that there is a different amount between the thread list and your upper two divs; beyond that leave this part alone.*/ </style> [/html] - Pandemic D'Angelo - 02-15-2011 [html] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. “Donec pellentesque condimentum pretium.” Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit. Table by Sie; Image from Flickr
<style>.pand-o12 .ooc {font-style:italic; } .pand-o12 p {padding:2px 20px; margin:0px; text-indent:35px;} .pand-o12 b {color:#211903; letter-spacing:-.2px; } .pand-o12 {background-color:#A5966B; background-image:url(http://sleepyglow.net/souls/gifts/2010d ... emic01.png); background-position:top center; background-repeat:no-repeat; border:2px solid #000000; font-family: georgia, serif; font-size:12px; color:#494129; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:450px; text-align:justify; padding:200px 0px 10px 0px; } .pand-o12-border {width:454px; border:1px solid #FFFFFF; margin:0 auto;} .pand-o12-credit {margin:0px auto; text-align:center; width:450px; font-family:georgia, serif; padding:2px 0px; } </style>[/html] Code: [dohtml]<div class="pand-o12-border"><div class="pand-o12"> [html] OOC here! Table by Sie; Image from Flickr Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. “Donec pellentesque condimentum pretium.” Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit. .pand-a01 .ooc {font-style:italic; } .pand-a01 p {padding:2px 20px; margin:0px; text-indent:35px;} .pand-a01 b {color:#FFFFFF; letter-spacing:-.2px; } .pand-a01 {background-color:#000000; background-image:url(http://sleepyglow.net/souls/gifts/2010d ... emic02.png); background-position:top center; background-repeat:no-repeat; border:2px solid #000000; font-family: georgia, serif; font-size:12px; color:#C4C4C4; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:450px; text-align:justify; padding:250px 0px 10px 0px; } .pand-a01-border {width:454px; border:1px solid #FFFFFF; margin:0 auto;} </style>[/html] Code: [dohtml]<div class="pand-a01-border"><div class="pand-a01"> [html] OOC here! Table by Sie; Image from Flickr Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. “Donec pellentesque condimentum pretium.” Cras ante nulla, interdum id volutpat et, lacinia sed augue. Aenean vitae libero sed quam ultricies facilisis ac quis velit. .pand-b02 .ooc {font-style:italic; } .pand-b02 p {padding:2px 20px; margin:0px; text-indent:35px;} .pand-b02 b {color:#FFFFFF; letter-spacing:-.2px; } .pand-b02 {background-color:#A66D46; background-image:url(http://sleepyglow.net/souls/gifts/2010d ... emic03.png); background-position:top center; background-repeat:no-repeat; border:2px solid #000000; font-family: georgia, serif; font-size:12px; color:#432816; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:480px; text-align:justify; padding:275px 0px 10px 0px; } .pand-b02-border {width:484px; border:1px solid #FFFFFF; margin:0 auto;} </style>[/html] Code: [dohtml]<div class="pand-b02-border"><div class="pand-b02"> [html]
Code: [dohtml]<center><div style='width:400px;border:1px solid #ffffff;background-image:url(http://i25.photobucket.com/albums/c73/physe_revlis/pandemictab1.png);background-repeat:no-repeat;padding-bottom:180px;background-position:bottom center;background-color:#3a3b36;'><div style='text-align:justify;margin:10px;font-size:10px;color:#d9d4cd'><center><i>ooc talk</center></i><p> [html]
Code: [dohtml]<center><div style='width:385px;border:1px solid #ffffff;background-image:url(http://i25.photobucket.com/albums/c73/physe_revlis/pantab2.png);background-repeat:no-repeat;padding-bottom:95px;background-position:bottom center;background-color:#67a3cc;'><div style='text-align:justify;margin:10px;font-size:10px;color:#153d5c'><center><i>ooc talk</center></i><p> [html] This is ooc text for your viewing pleasure. YAY, viewing pleasure. THE MOON IS FULL AGAIN
tellus accumsan massa, nec ullamcorper lectus lacus sit amet dolor. Curabitur enim sem, gravida eget mollis vitae, venenatis at est. Proin ac accumsan lacus. Sed imperdiet lectus eros, pretium elementum nibh. <style> .pandemic-moon {width:75%;max-width:700px;min-width:500px;margin:0px auto;text-align:justify;line-height:15px;font-family:Georgia, Helvetica, serifs;font-size:12px;letter-spacing:.1px;word-spacing:1px;margin-top:3px;} .pandemic-moon .ooc {font-size:11px;font-style:italic;letter-spacing:.5px;word-spacing:1px;line-height:14px;} .pandemic-moon .quote {font-family: 'Corben', serif;float:right;font-size:25px;line-height:30px;padding:0px 5px 0px 5px;text-shadow:0px 0px 20px #000000;color:#ffffff;text-transform:uppercase;font-weight:900;} .pandemic-moon p {text-indent:30px;padding:0px 5px 5px 5px;} .pandemic-moon b {font-size:13px;letter-spacing:.5px;word-spacing:1px;text-shadow:0px 0px 1px #000000;} </style>[/html] Code: [doHTML]<div class="pandemic-moon"><p class="ooc">This is ooc text for your viewing pleasure. YAY, viewing pleasure.</p> [html] Wonderful table by Cait!
Fusce tortor mi, malesuada non imperdiet sit amet, fringilla sit amet velit. Donec fermentum, diam nec ullamcorper tincidunt, dolor enim luctus erat, ut rutrum elit dolor ut lorem. Nam auctor semper erat, ac fringilla urna mollis imperdiet. Aenean eu nunc est, nec tempus nibh. Sed sit amet sagittis mauris. Aliquam mollis metus vulputate est vulputate et euismod ipsum vehicula. Curabitur non lacinia lacus. Vestibulum a lacus magna, eget mattis lectus. <style type="text/css"> .pan1cai b {font-weight:bold; color:#b9c57d; text-shadow:#181b07 1px 1px 2px;} .pan1cai p {padding:5px 15px; margin:0px; text-indent:0px;} .pan1cai {margin:0px auto; width:500px; background-color:#515f2c; background-image:url(http://i.imgur.com/8Obl0.png); background-position:top center; background-repeat:no-repeat; border:1px solid #485527; padding:180px 0px 5px 0px; font-family:georgia, sans-serif; font-size:12px; color:#acb290; line-height:16px; text-align:justify; border-radius:10px;} .pan1cai .ooc {font-style:italic; font-size:11px; text-align:center;} .pan1cai p b:before { content: open-quote; } .pan1cai p b:after {content: close-quote; } </style> [/html] Code: [dohtml]<div class="pan1cai"> |