104. The Pines

[sireesanwar.livejournal.com]

Layout Style: S2 Flexible Squares
Features: Header Image, Custom Header Location, Custom Sidebar, No Userpics for posts, Friends Page/Community Userpics
Layout Width: Responsive

[ PREVIEW ] [ LIVE PREVIEW ] 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

Header Image:

Mock Footer Image (see content-outer)

Both images are 1500 x 200

Social Media to match (facebook, twitter, tumblr, instagram, pinterest, bloglovin):




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:

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

Mock Footer Image: The mock footer image is also int he content-outer.

• I've utilized the multiple background images ability. Note in the coding you'll see multiple url () with commas between them. This is how you layer background images. The one you want on top should come first. I have left that blank if you are so inclined to make a Title image.


• Because the content-outer is being used for the "mock footer" there is no height. This is why the third image's background-postion is listed as center bottom. Center is for horizontal and bottom is for the vertical. You can use multiple commands here: center bottom, center 100%, center 50px. It depends where the image you are moving needs to be located.


• The background-size is listed as background-size: auto, 100% 200px, 100% 200px; This means the first image which is the "title" would be auto sized because you want the full size of the item. Then the second is 100% width and 200px height just like the third. I did this because full height here would be the entire outer-content otherwise.

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 chosen. 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.

I'm sorry if this one is more complicated.


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

[a-blue-moon-cat.livejournal.com]

Nice!

[sireesanwar.livejournal.com]

Thanks.

[nemophilist.livejournal.com]

Love it!

[sireesanwar.livejournal.com]

Thank you.

about community

[natali916.livejournal.com]

hello i was wondering if you were still in contact with the person that runs angel_pen community because me and my friends and other fans were wondering why we cant read any of the fanfics because we all were accepted into the community and we cant access the entries if you please have an answer for us please let me know! Onegaishimasu! Arigatou!

Re: about community

[sireesanwar.livejournal.com]

I have no idea who that is. I see they used my layout but that is as far as it goes. Sorry.

[ella-rose88.livejournal.com]

Great layout! I've just installed for my community perioddrama_ic and it looks lovely :)

[sireesanwar.livejournal.com]

Looks like you figured it out. Looks good.

[km-kaba.livejournal.com]

I didn't know LJ no longer supports flexible squares!! First time in forever that I've wanted to change my layout and stumbled across your posts about the news. Definitely will never change to another type.

Love this layout!

[sireesanwar.livejournal.com]

I know right. I'm waiting for when they no longer support it at all and all those who have stayed with FS will lose it. I'll be so mad. For now we stick it out.

Thanks!