CSS isn't the easiest thing in the world for a lot of people, especially those most familiar with HTML who have barely or rarely ventured into learning it. So, below I've explained each part in such a way that - hopefully - anyone can edit this layout to thoroughly suit their RPG needs. Before you begin, go here: http://asylums.insanejournal.com/rp_tutorials/39419.html and read the section 'Moar Control over Fonts'. (Use CTRL+F and type that into the search box to skip to it.) It gives a quick explanation about how CSS works.

Got that? Good. Okay. CSS doesn't need the span style="" bit. Instead, of span style, you'd name the thing the CSS is going to change. Instead of quotation marks (" ") you use { and }. And the only thing you need to remember to do to close it is put the }. See:



What's awesome about doing layouts is that sections already have names (unlike if you were writing a page from scratch). There's a really kickass guide by carrie63 here that tells you the name of everything (I also explain below). In the example above, the section you're formatting is named body. This refers basically to the entire page. So, we've changed the font on the entire page to verdana. V. KICKASS.

Got that? Good.

All right. Now, come with me now on a journey through time and space... To the world of layout editing! Go here.

Basics > Style System > S2
Under this you'll see a link to your link list. You can use this to link sections of your RPG (premise, rules, characters, etc). Make sure to add a heading as the first link (10) that says either "directory" or "navigation". Then delete everything under URL. Add in links for the rest and you're in business. It should look like this:



Look and Feel > Layout & Language > Layout: Bloggish, Themes: None

Custom Options > Layout Type > Two Column (Sidebar on Left), Use layout's "Base Weblog": Yes

Now scroll down and you'll see Custom stylesheet. That's what we're going to be editing. Bitch yeah. Paste what's in the textarea above to the custom stylesheet and you'll be in business.

Crediting is placed in a note. A note is also where each part is introduced to you. The browser ignores these when writing to the page to format stuff. Text outside of these has to be solely CSS. Notes look like this:

/* TEXT */

This is where you put the background that's outside of everything else as well as where you can change the text's font, size, color, and the line height.

PAGE BACKGROUND. To add a background image, insert a link to the image you would like to use as the background in the parenthesis following background-image: url.

To change the color of the background: after 'background-color', you have to enter a hexcode or a color name like 'red'. (An example of a hexcode is #333333.)

Only enter a background image or a background color. Leave the other blank.

PAGE FONT. Font family is the font face -- or font you want to use (like verdana). Font size is the size. Color is the color of the text. And line height is the height of the line. For more information on changing text with CSS, go to MOAR CONTROL here: http://asylums.insanejournal.com/rp_tutorials/39419.html.

Below is where you can change the color and width of the page container (which is basically the white part that all the stuff is in and provides a border around the image and everything else). If you want everything wider, you'd change the width from something like 700 to 800, of course. Then, follow the steps further down the page to change the borders and widths of the sidebar and entries to match.

To change the background color, fill in another color after "background-color:". It could be a color name like "black" or a hex color like #333333. Doing that should change the color of the border around the image.

This part controls how links look.

Link is a normal link's color. Visited is how a link will look once you've clicked on it already. And hover is the color it changes into when you scroll your mouse over it.

Color is the color that link will be. Font-weight is used for bolding. Text-decoration takes the line away under it.

Font-weight: You can do it the simple way (as is done here) and just use 'bold' to bold your fonts.

Text-decoration is used here to take away the underline but it can do all of the following (what you type in after 'text-decoration:' is in parenthesis like this): make text blink (blink), strike through text (line-through), draw a line horizontally above the text (overline), underline the text (underline), or get rid of all text effects like the underline (none). Links are underlined by default. For this layout, we don't want the link underlined so we're going to set our text decoration as 'none'. But say we wanted our text to be underlined with a dotted line. We'd use the following code:
text-decoration: underline; text-underline-style: dotted;. That underlines it (the first part) and then it styles it (the second).

If you wanted to style the text instead, perhaps to give it a green background you would use the following code: style="background: green;. This, however, won't control the line only text-decoration does that.

This is where you put your BAMF 643x302 banner. Paste a link to it in the parenthesis following URL. background: no-repeat tells the page not to repeat the banner. The height is how high of a space you need for your banner, of course. Background-position: center makes sure it's centered on the page. Not displaying the banner-header and description (where display: none is) make it so your journal's title and description go away and show only your banner.

Alpha refers to the side bar, beta to the entries. Around the edges of each there's a border. And around that border they have another border.

If you want to edit the size of the page (to be bigger or small), it's pretty simple. Just make sure you follow along.

To make this easier on yourself to edit, make each border a different color (enter a different color into border=color:). Maybe red, blue, green, and yellow. Then, you can adjust the side and padding as needed.

Padding has four values (ex. 0px). They specify whether you want to add padding to the top, right, bottom and left (in that order). So, if I only wanted to add 10px worth of padding to the left, I'd have: padding: 0px 0px 0px 10px;. So If I wanted my banner to be 800px across, I would do the following to be exact:

1) Change all the border colors as mentioned above so I can see what I'm doing.
2) Subtract the size of the banner from the page container (let's say it's 800px).
3) Divide that number by two. That's how much padding needs to go on on the OUTER border of the left side of your sidebar and the right side of your entries.
4) Now, decide on how big you want your sidebar to be not including your borders (I recommend using 188 regardless.
5) Look back at how wide the page container is. Subtract the number you got after doing step 2 from it. Now, subtract the sidebar from that. Good. Now, that's how much space you have for the left and right sides of your inner borders, the right side of your sidebar's outer border, and the outer side of your entries' left border.
6) If you want a border around your entries, the inner border should be the same all around (like right now for the sidebar border: 6px 6px 6px 6px). If not, you could just make it like 15px all around (so the entries aren't pressed up against things) and forget about it.
7) Now, figure out how much space you need for the sidebar's right outside border and the entries' left inside border so keep them apart a good distance. Subtract that and the left and right side of the entries' inner border from the number you were left with after step 5.
8) The remaining number is the width your entries should be. If your entries have fallen down the page under the sidebar (check it in both firefox and internet explorer to make sure it doesn't), your sidebar (or the outer padding on the left side of the side bar or right side of the sidebar) is too wide.

This just adds some padding to the top (30) and bottom (25) of your icon.

This adds some padding to the left side (8px) of your navigation links (user info, recent entries, friends, and archive links).

This styles the text of the sidebar headers (like the calendar's month and year, tags, page summary) on the sidebar (h2.module-header) and the date on the entries (h2.date-header). Think of the comma between h2.module-header and h2.date-header as meaning 'or' because the style could apply to both. The comma is also used in font family to signify if one font isn't available to use the one after it. So "century gothic OR trebuchet MS OR verdana).

Text-transform uppercase makes the text capitalized. Letter spacing spaces out the letters. The rest is explained about under 'Page Background and Font'.

Above after "font-weight:" we put "bold". Say you want it to be bolded but you don't want it THAT bold. Maybe you want your text somewhere in the middle of being as bold as it can be and not bolded at all. To do that, use a number from 500-800. This gives you more control over how bold your text is. 500 is non-bolded text and 800 is as bold as it gets. So, putting 675 would be around somewhere in the middle. In your CSS, you're using the most it can be bolded (800).

H1, H2 (above for the sidebar and dates), and H3 are header tags. Each represents the importance (usually shown by size) of the things on your page. H1 is the largest (primarily used for titles), H2 the second biggest, and H3 is the third biggest. And it goes on until H6. Like this:

h1 is here

h2 is here

h3 is here

Because we want the second biggest thing on the page to be the headers and date (H1 would be the title of the page - but remember we hide that so it wouldn't mess up our banner), it's H2. Even so, we can still change the size (as is done) to better suit our needs and not have it affect anything.

Up above, we styled the text for the sidebar header and entries' date. Well, now we want to center the headers on the sidebar but not the entries' dates. If we entered it into the code above, the entries' dates would be centered so we have the do this bit of code its own separate place so it only applies to the headers on the sidebar. That's done by writing the bit that applies to the sidebar's headers (h2.module-header) and applying the following to it: text-align: center.

Now, we're going to style the entries' subject. Since this is an H3 header, it's already the size we want so we don't need to include a new size. Instead, all we're going to do is set it the same font as above (you can change it) with some defaults (the "century OR trebuchet OR..." thing we talked about above) in case that's not on someone's computer and bold it (font-weight: bold). If you want to change the color or something, you can.

What this does is makes it so after you enter about seven tags (or so many that the box they're in is more than 150px, it makes a scrollbox for them. If you'd rather not have a scroll box, simply take out this code.

This sets the padding around the icons in your entries. There's 10px of padding around each side except the right (which has 0).

This formats the bolded text on your entries that says "tags:" and the commas between different tag names. We have it set as bold and everything lowercase. You can change the color, take out lowercase so it reads Tags instead of make it uppercase so it says TAGS, whatever you want.

This formats the text that says "Posted at 10:19 am" as well as the "|"s between different links. Like above, you can format it as you wish. The margin is set so it lines up with the stuff above it. The color is set to #999 (a shorthand version of the hex color #999999).

This hides the page summary.

This hides the syndication buttons.

This hides the 'powered by insanejournal' text.