09 April 2008 @ 05:11 pm
Flexible Squares Layouts  
* There are very few CSS guides on LJ. I think very few people have the time or patience. I was inspired by the guide at Cartonage, which is so incredibly helpful and well put together. I thought it would help those who visit my journal if I had a similar guide.

* This is a work in progress, so keep checking back for updates. ;]

The RED color in each picture will indicate
what section I am talking about. Click the small images to get a larger view.


body {

click it
Controls the look of the entire page, including background color or image, the main font and font size of the entire page. Usually looks like this:

body {
margin: 50px 0px 50px 0px;
background-color: #444444;
font-family: "Verdana", sans-serif;
text-align: left;
font-size: 10px;
color: #777777;
background-image: url(''); <-- you would add a background URL here
background-repeat: repeat;
}


#content {

click it
Controls the look of the part of the page that contains every section (like entry, sidebar, header links, etc.) Usually looks like this:

#content {
width: 780px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}


.comments {

click it
Controls the look of the comment section at the bottom of each entry. You can add a background, change the text alignment, etc. Controlled by this section:

.comments {
font-size: 8pt;
text-align: right;
font-weight: none;
padding: 5px;
position: relative;
color: #888888;
top: 10px;
border-top: 1px dashed #cccccc;
}

but also includes these sections when it comes to the links:

div.comments a, div.comments a:link, div.comments a:visited {
color: #999999;
padding: 8pt;
text-transform: uppercase;
}

div.comments a:hover {
color: #777777;
}


blockquote {

click it
Controls the look of any text you add into a blockquote tag. Allows you to change the background color, text size, text color, or add a border so this text will stand out in any entry. Looks like this:

blockquote {
margin: 5px; padding: 5px;
color: #666666;
font-size: 10px;
border: 1px solid #bbbbbb;
background: #f5f5f5;
text-align: justify;
}


#header, #footer {

click it
This IS NOT where you are supposed to put your header image. This section controls the "Entry, Calendar, Friends, and Profile" links that are located at the very top of the layout. Its sister section called #footer { controls the back # entries and forward # entries links at the very bottom of the layout. Looks like this:

#header, #footer { (sometimes these will be in separate sections)
width: auto;
padding: 10px;
text-align: center;
background-color: #444444;
font-size: 10px;
color: #999999;
text-transform: lowercase;
}

these sections control the header and footer links:

div#header a, div#header a:link, div#header a:visited {
color: #FDFDFD;
font-size: 10px;
text-transform: uppercase;
}

div#header a:hover {
color: #999999;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #FDFDFD;
font-size: 10px;
text-transform: uppercase;
}

div#footer a:hover {
color: #999999;
}


.headerimage {

click it
This is the section located at the top of the Content. It allows you to add an image there. You DO NOT need to add this section to the CSS again. (because i find that most people do instead of actually looking for it); Looks like this:

.headerimage {
position: relative;
width: 0px; <-- important
height: 0px; <-- important
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(''); <-- important
background-repeat: no-repeat;
}


#maincontent {

click it
This section controls the space around the entries, and is key to making space for your sidebar (the margin depends on what side you want your sidebar on.) Basically looks like this:

#maincontent {
margin-left: 190px;
}




---> Please see my FAQ Page for questions and answers.

IF YOU ASK A QUESTION HERE, I WILL DELETE IT WITHOUT ANSWERING IT.
 
45 | add
 
( 45 — add )
Lelylelymarques on May 17th, 2008 11:48 am (UTC)
this is very helpful! thanks so much for taking some of your time to make this.

hope you add more stuff :) thanks!
Jennyminty_peach on May 18th, 2008 01:51 pm (UTC)
thank you :D
superway on May 17th, 2008 03:39 pm (UTC)
I love this thanks for making this guide. It is very helpful, I already used it a couple of times. I can't wait for the full guide.
Jennyminty_peach on May 18th, 2008 01:52 pm (UTC)
Thankees, I hope to have the time this week for adding more to it. :B
Carol: trent -- death by rodrigobeunydd on May 18th, 2008 05:13 pm (UTC)
Wow...this is a great help...thanks so much!
i woke up in the spaces of your heart;: HAR HAR TARDIS V.3? or V.4?greggyhouzer on May 20th, 2008 12:49 am (UTC)
oh wow, this will definitely help me. i've been trying to do layout stuff for ages, and this really simplifies all that heavy stuff (it's best to start out small and easy and then go big, eh?)

thanks a bunch. this clears a lot up for me! *hugs*
Kate: Dan: Purple & Red Papernavi_glow on May 20th, 2008 02:15 pm (UTC)
YESSS! Finally I found a guide and by my favourite layout maker too! Thanks so much, I'm going to delve into the world of layout making now lol <3
Carolynmagic_frybread on May 21st, 2008 02:10 am (UTC)
Thanks so much for taking the time to make this, and sharing your knowledge with all of us! It is so helpful, thank you.
lelechanicelelechanice on May 22nd, 2008 08:35 pm (UTC)
Thank You!
Thank you very much for this! Now I can understand a bit XD ^^
Ali: STOCK: long way homemagelight on May 25th, 2008 01:27 am (UTC)
This is really helpful. HUGE thankyou! =)
Pirie: impact yo!lakuru_san on May 25th, 2008 10:16 am (UTC)
You are my lifesaver! Its been ages since I done the CSS so your tutorial is very helpful for me! Thanks a bunch!
britbrit ☆≈xtiggzie on May 28th, 2008 09:03 pm (UTC)
I love your tutorial, very helpful for someone like me, who doesn't know anything about CSS D:
Love that you took your time to do this for people who watch your journal~
petiteendocrine on May 30th, 2008 10:35 pm (UTC)
I agree with Xtiggzie, this is great. Thank you so much!
I've been wanting to have an "original" livejournal for a while now. But I always thought you had to have a paid account.

I'm still reading this tutorial to understand it better.

I'll add you so I can read updates and things.

Lucy, England

X
Jennyminty_peach on May 31st, 2008 01:46 pm (UTC)
Thank you! :D
crypticbluerose: subaruroarrrcrypticbluerose on May 31st, 2008 09:15 pm (UTC)
this is very useful for me thank you!
Code of the Woosters: House/ Smile sidewayshughsbeautiful on June 5th, 2008 10:00 am (UTC)
This is really helpful! Thank you so much! Looking forward to the rest of the guide! ;)
Spaceyplum: wizard of oz - yellow brick roadspaceyplum on June 7th, 2008 12:42 pm (UTC)
Thank you for this wonderful guide! It's great to finally understand the tags a bit better, I'm usually just shooting in the dark ;-D
therinca: elliottherinca on June 8th, 2008 11:19 am (UTC)
Once school is over, I'm going to use it for making my own creation for my lj. It's very helpful and clearly explained. Thank you for this.
totally_tinus on June 11th, 2008 10:25 pm (UTC)
You are made of awesome. You know that right?
I'm trying to make a layout quite a time now, but nothing really works, but this is really helpfull, thanks very much!
Jennyminty_peach on June 13th, 2008 03:35 pm (UTC)
and thank you! :D
the center of the hearttvxqisdalove on June 15th, 2008 06:27 am (UTC)
really helpful! +mems for future reference. thanks!
❤: {text} : random - coffeedanakm on June 16th, 2008 12:11 am (UTC)
This is great! Thanks!

**adds to memories**
ellymelly: save the world?ellymelly on June 23rd, 2008 10:32 am (UTC)
Wonderful. I've been looking for something like this for so long. Thank you for going to the effort.
Frak, that blowsroonilwazl1b on June 28th, 2008 08:08 pm (UTC)
it took me ages to finally figure it all out. but it's lovely that you made this.

four_springfour_spring on July 4th, 2008 06:04 pm (UTC)
AAAW thank youuu :) this is gonna be useful for people like me !!
Maii: Bluecobaltbleu on July 6th, 2008 04:32 pm (UTC)
Wow this is exactly what I've been looking for! Thanks so much!

I found your journal on Createblog.com by the way. ^^
Cinthiacicindy on July 14th, 2008 03:57 am (UTC)
Thank you so much
i've been searching for this a long time.
Francie + Keito + Hikaru = ♥forte_tsuki on July 27th, 2008 11:05 pm (UTC)
uwah! so helpful! i think i can finally make my own layouts. ^^ thanks for the INCREDIBLY helpful information! *gets to work*
★ツンツン☆デレデレ★suruma on August 8th, 2008 05:17 pm (UTC)
This is very, very helpful. Thank you so much~ :D
mira ♥miraxchan on August 23rd, 2008 02:25 pm (UTC)
this for soo useful!
thanx! adding to memories for future use(:
。chequere on August 25th, 2008 06:52 am (UTC)
Thank you so much for doing this. I've been looking for one of these for the longest time, it's not even funny :3

I appreciate it ♥♥♥♥♥
Sarah: bambimysoulcries on September 12th, 2008 03:48 pm (UTC)
Hey, thanks to your guide, im going to try and customize my journal even more :)
But i do have one question...if you have time.

I would like to make my own background image, instead of just having a colour.
But i was wondering what size should i make it? (1024x768?)
plus what are the codes to make it a fixed background?

its okay if u cant answer...i like to try an experiment...hehe. x
nryo: Ryo → Adorably innocent smilenryo on December 9th, 2008 12:11 pm (UTC)
Actually the size doesnt matter. As long as you put:
background-repeat: repeat; the background will appear. So your background image can be as small as you like. ^-^
Sarahmysoulcries on December 9th, 2008 10:45 pm (UTC)
thanks so much for replying :)
xxx
Fiona ღ: Japanese landscapefionasan on September 18th, 2008 06:32 pm (UTC)
Thank you so much for providing this wonderful guide. Been looking for one for a while, yours is extremely helpful.
I Caught Myselfimaginaryrefuge on November 20th, 2008 08:09 pm (UTC)
WOW this is very helpful! thank you!
nryo: Ryo → The blonde headnryo on December 9th, 2008 12:12 pm (UTC)
Thank you so much for this guide! It really solved my problem with my footer's link. :D I figured so long and couldn't change the color and after reading your guide I finally got it changed! ^^
. sweet dreams and flying machines .: polaroid.windbell on January 8th, 2009 02:19 am (UTC)
Wow...this is amazingly helpful, thanks! ♥
Kissa: text -- geekgasm!kissas_fate on April 3rd, 2009 10:08 pm (UTC)
This is so helpful! Thank you so much for sharing it. :) I'm gonna add it to my memories so I know where to find it!
pinkpixiewishespinkpixiewishes on August 19th, 2009 05:16 am (UTC)
Thank you for this. I am going to try my very hardest to make my own layout tomorrow!
kwitch13: sleepy aibakwitch13 on September 23rd, 2009 01:50 pm (UTC)
i wanna ask about the header image.. I'm not sure on how i could put it..
sorry I really didn't understand.. :P
Renheartless_snow on April 1st, 2010 01:39 pm (UTC)
This was really helpful, thanks a lot! :)
what if this storm ends?: eric lolsinfusiion on August 2nd, 2010 03:50 am (UTC)
Ahh, I'm so glad I found this! It's been a long time since I fiddled with this stuff, now I can snag one of your awesome layouts (and credit you, of course) and feel confident I can tweak colours and fonts without making a huge mess.

Thanks!
Aegisaegistheia on September 19th, 2010 08:11 pm (UTC)
So of course I'm totally late to the party, but this guide is so helpful I can't help but comment! Thank you for all this information!
ℳℴℴḓỹ 	xoxmissmoodyxox on March 19th, 2011 06:33 pm (UTC)
>w<
thanks a lot this helped me to make my journal look the way i wanted!
( 45 — add )