Resource: S2 Layout How-to (LJ)

[sapphoatsunset]

Standard Elements in Every FlexibleSquares Layout

These are the elements you want to modify to create the look and feel of your journal. Underlined things are items that you're pretty likely to want to modify.

1. Standard things to configure at the beginning:
   
   • html{}
   • body{}
   • a, a:link, a:visited{}
   • a:hover{}
2. General Page Alignment Configuration:
   • #content{}
   • #maincontent{}
   • #siderbar{}
3. Header/Title/Subtitle/Header Graphic:
   • #header{}
   • .headerimage{}
   • .title{}
   • .subtitle{}
4. Top Navigation:
   • ul.navheader{}
   • ul.navheader li{}
   • .view{}
   • div#header a, div#header a:link, div#header a:visited{}
   • div#header a:hover{}
5. Footer Navigation:
   • div#footer a, div#footer a:link, div#footer a:visited{}
   • div#footer a:hover{}
   • #footer{}
   • ul.navfooter{}
   • ul.navfooter li{}
6. Entry Stuff:
   • .subcontent{}
   • .entry{}
   • .date{}
   • .subject{}
   • .subject a, .subject a:link, .subject a:visited{}
   • .subject a:hover{}
   • .datesubject{}
   • .entry ul li{}
   • .entry ol li{}
   • .ljtags{}
   • .ljtags a{}
   • .ljtags a:hover{}
   • .currents{}
   • .currentlocation{}
   • .currentmood{}
   • .currentmusic{}
   • .comments{}
   • div.comments a, div.comments a:link, div.comments a:visited{}
   • div.comments a:hover{}
   • .separator{}
7. Userpics:
   • .userpic{}
   • .userpicfriends{}
   • .userpiccomment{}
     • this element is where you also modify the shape and/or border, etc on icons for in the comments.
   • .userpic img{}
     • this element is where you modify the shape and/or border, etc on icons. Note that this element has "img" in it where .userpiccomment does not.
   • .userpicfriends img{}
     • this element is where you modify the shape and/or border, etc on icons. Note that this element has "img" in it where .userpiccomment does not.
   • .userpic a font, .userpic a:link font, .userpic a:visited font{}
     • this can be repeated for all italics above
   • .userpic a:hover font{}
8. Siderbar:
   • .defaultuserpic{}
     • you can also modify the shape, border, etc of your defaultuserpic. Note: I suggest you keep this separate so the code used to float the icon to one side or another doesn't mess up the alignment of your default icon in your sidebar.
   • .sbarheader{}
   • .sbarbody{}
   • div#sidebar a, div#sidebar a:link, div#sidebar a:visited{}
   • div#sidebar a:hover{}
   • .sbarbody2{}
   • #sidebar_tags, .tagcloud{}
   • #sidebar_tags a{}
   • #sidebar_linklist{}
   • ul.sbarlist{}
   • li.sbaritem{}
   • li.sbartitle{}
   • td.sbarcalendar{}
   • td.sbarcalendarposts{}
9. Archive Pages:
   • ul.year{}
   • ul.year li{}
   • table.yeartable{}
   • table.yeartable td.yeardate, table.yeartable td.yearday{}
   • td.yearmonth{}
10. Comment Pages:
    • .datesubjectcomment{}
    • .box{}
    • input, textarea, option, select{}
    • textarea.textbox{}
    • .reply{}
    • .replytosubject{}
    • .commentreply{}
    • .commentbox{}
    • .datesubjectcomment a, .datesubjectcomment a:link, .datesubjectcomment a:hover{}
    • .datesubjectcomment a:hover{}
    • .commentboxpartial{}
    • .commentinfo{}
    • .skiplinks{}
    • #add_comment{}
11. Contextual Popup:
    • div.ContextualPopup div.Inner{}
    • div.ContextualPopup .Content{}
    • div.ContextualPopup .Userpic{}
    • div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited{}
    • div.ContextualPopup .Relation{}
12. Miscellaneous:
    • b, strong{}
    • i, em{}
    • h1{}
    • h2{}
    • h3{}
    • blockquote{}
    • u{}
    • s{}
    • table{}
    • .subject img[src*="icon_sticky.png"], .summaryList img[src*="icon_sticky.png"] {}
    • img[src*="img/icon_protected.gif"] {}
    • span.i-ljuser img[src*="img/community.gif"] {}
    • span.i-ljuser img[src*="img/userinfo.gif"] {} (etc with tinyicons)

Modifications You Can Make to the above (remember to close with a semi-colon for each of these)

• background-image
• background-color
• color (for text color)
• font-size
• font-weight
• font-family
• padding (around text)
• margin
• background-position (position of background image)
• list-style
• list-style url (to supply your own image for bullets)
• text-transform
• text-shadow
• border
• background-repeat (for background image)
• shape using border-radius.com/
• etc!!! :)

Hints:
♥ you can always use multiple elements in one line if you want them formatted the same way (like where a, a:link, & a:visited are called together)
♥ w3schools is your friend.
♥ Do your layout in sections so you can troubleshoot easier if it's not looking like you expected
♥ Always test on multiple browsers

I think that's it..... ^^;

Comments

[evening12]

That sounds like another language to me. lol

[sapphoatsunset.livejournal.com]

Haha, I speak code. XDDDD

I need to go through and explain the ones that aren't self-explanatory for people who want to learn, but I've been staring at code for a while now so it all makes sense XD;;;

[nathalieweasley.livejournal.com]

I had a question. Someone I know wants to change his actual lj name. I remember someone doing so a while back but I never asked how they did so and when I Googled it, it mentioned payments... Do you know how to change the name?

[sapphoatsunset.livejournal.com]

You go to the LJ store and purchase a rename. I did mine a couple of months ago. It I remember correctly, it was $15 USD so it's not too bad in the grand scheme of things. And you can set it to auto-forward.

Unfortunately, I don't know a nifty free code way to do the same thing.

[nathalieweasley.livejournal.com]

Ok I'll let him know. Thanks!

[flyingharmony.livejournal.com]

OMG I LOVE YOU. SO DAMN MUCH RIGHT NOW XD. I'm still intimidated by CSS way more than I am by HTML, but this looks so helpful, gaaaah <333

[sapphoatsunset.livejournal.com]

♥ you can do it! I think my first layout was very successful! You should check my other layout resources post ;)

And, it's mainly helpful if you understand CSS a bit. If you don't understand CSS at all, this is likely not the resource for you, lol!

[flyingharmony.livejournal.com]

As I said, I'm not nearly as good with it as I am with HTML, but I speak some CSS ;) So this looks okay xD <3

[sapphoatsunset.livejournal.com]

♥ I love all the coding! And I can't wait for the voting post to go up with the layouts and then for the makers to be revealed!

Are you also participating in the banner maker challenge at sortedchallenge?