103. Florence

[sireesanwar.livejournal.com]

Layout Style: S2 Flexible Squares
Features: Header Image, Custom Header Location, Layout Images, Custom Sidebar, No Userpics for posts only comment userpics
Layout Width: Flexible Width

[ PREVIEW ] [ LIVE ] credit @ layout_lounge

All special fonts have been embedded into the layout from Google Fonts

Coding is a real pain to list here because now anything with a # creates tags in our system. So to get around this I've posting this to the Layout Lounge Site where I keep them anyway. This also gives me a place to store images.

GET THE CODE

IMAGES

Header Image 1500 x 200
a. b.
[ a. 474 x 289 ] [ b. 600 x 346 ]

c. d.
[ c. 1080 x 766 ] [ d. 1080 x 720 ]

Header Image: The header image (.headerimage) attribute is turned off in this layout. You can use the content-outer attribute instead. I did this to control where the header links and image were located.

My header image is only 200px in height. If you want to have a bigger header image there are a few settings you'll have to change in the coding. Here they are in order inside the coding:

1. content-outer: the height is set to 220px to accomdate some spacing. Should you want a header that is 300px high you'll cange the height to 320px.


2. content: the same goes for the top margin of content. It is set to accomodate the header and links so this will match the content-outer.

Title & Subtitle: The title and subtitle have been turned off to prevent strange interactions with the layout. Rather than using these I would create and image of your title and put it over the header image you've choosen. See Multiple Header Images but apply it to content-outer.

Userpics: There are no userpics for your posts on this layout. There will be userpics for comments and for the friends page.

Common Issues with Layouts:
1. Common Issues
2. Theme and Layout Change Tutorial
3. Image Tutorial: Adding Background & Header Images in Coding
4. Sidebar: What I Do and Do NOT Want On It
5. LJ Advertisements: What is that weird box on my LJ?
6. Tutorial Index

You can find more images at graffitigraphic or go to Layout Lounge's website.

RULES
Not hotlinking images please. Imgr images can be used.
Headers can be changed. Please make the layout your own.
Layout images do not have to be used.
Credit is a must.

If you are having trouble with this layout please comment and I'll see if I can help you.

Comments

[pknumba1.livejournal.com]

This one is so pretty! I may consider this one for my next layout. :)

[sireesanwar.livejournal.com]

Thanks. I'm glad you like it.

[pknumba1.livejournal.com]

I started using the new layout, and it all looks great! Right now I'm still trying to tweak it and for some reason my current mood images are not all the way to the left like they should be, or are in your preview layout. Mine are almost to the center of the entry. How do I fix that?

[sireesanwar.livejournal.com]

Sorry didn't see your post... working on the fix right now.

[sireesanwar.livejournal.com]

See if the coding edit I made works:
https://workshop-rees.livejournal.com/25555.html

[pknumba1.livejournal.com]

I tried the code but I'm still having the same problem.

[sireesanwar.livejournal.com]

This is so weird. I didn't have this issue when I was creating it. I'll look into it.

[pknumba1.livejournal.com]

I wonder if different browsers mess with it, but I wouldn't really know. It isn't a huge deal if you can't fix it. I'll get used to it since I probably won't keep this layout for long. Thanks.

[sireesanwar.livejournal.com]

So I'm wondering if I didn't forget something in the coding. I recreated that area of coding for you...

try this coding again
https://workshop-rees.livejournal.com/25555.html

I updated it. I'm hoping that works.

[pknumba1.livejournal.com]

This is a real chin scratcher. I tried that one and there were no changes. I'm pretty sure I copied and pasted it right. I even tried getting rid of the little coffee mug next to it, but that didn't do anything at all.

I copied the code that is just from the current mood section. Do any of these numbers seem off?

.currentmood {
background: url(http://i63.tinypic.com/2exo58x.jpg) no-repeat left center;
padding: 2px 0px;
margin: 0px 10px 0px 0px;
}
img.meta-mood-img { margin: 0px 10px 0px 15px; }

[sireesanwar.livejournal.com]

You should really copy the entire code because I made adjustments. I saw the problem on my own journal and then fixed it.

I copied this code from your journal so it should reflect your layout.

[pknumba1.livejournal.com]

Okay, that fixed it. Thank you for all your help! Sorry that was such an ordeal.

[sireesanwar.livejournal.com]

It is okay. I don't like the idea of my layouts not working how I wanted them too. ;-)

Seems LJ made some adjustments too. The "text" mood, location, etc is a "current strong" which was making itself known in that empty space. I just had to make it display: none;

It took me so long because that is a new development.

[pknumba1.livejournal.com]

I see. I used to know java pretty well but complex things like layouts kind of confuse me. Especially if a site updates so often.

[sireesanwar.livejournal.com]

OMG seriously. I look at Java and it is like Mandarin. To me that is the complex thing. LOL LJ doesn't do many updates but sometimes when they do they wreck things. I try to figure those things out to help out my fellow users. So should it happen... check here or ask me. ;-)

[iva-mardiani.livejournal.com]

I can't see the preview. It's said "page not found"

[sireesanwar.livejournal.com]

Check my personal journal or workshop_rees. You should be able to see it there. I don't know why you can't see the preview. It is working for me.

[smirkingcat.livejournal.com]

this is really such an amazing layout!
i am tempted to take it as soon as i have more time - thank you for the offer ;)

[sireesanwar.livejournal.com]

Go for it. And enjoy!

[nemophilist.livejournal.com]

This is lovely!

[sireesanwar.livejournal.com]

Thank you.

[impala-chick.livejournal.com]

Oh I love this one! It feels modern and organized.

[sireesanwar.livejournal.com]

Thank you. I'm glad you like it.