Layouts by Newkidfan.

Tips and links on LJ layout design

2008-09-06T18:36:58Z

A friend asked me if I could tell her a little how I went about creating my layouts so I put together a post with some thoughts and links. It's not a tutorial, just a short description of how I go about it. I thought this might interest some of you, so I'm posting a link to the post here as well.

Tips and links on LJ layout design

Style Sheet 04 - Wallpaper.

2008-01-19T02:24:34Z

Style Sheet: Wallpaper. (2 color schemes!)
Layout: Flexible Squares.
Style: S2.
Sidebar: right.
Accounts: free and paid accounts.

DOWNLOADS - The header was made for the previews, but you can of course use your own. Note that I included in the zip file a blank header with just the background pattern, so that if you wish, you can reproduce the same transparency effect as seen in the default header. :)

Wallpaper Grey
- preview
- download zip 221Kb
- how to install? important!

Nb: Photograph in header by Rogue (link).
All patterns by me. Do not use with anything else than this layout.

Wallpaper Blue
- preview + live preview @ titechose.
- download zip 262Kb
- how to install? important!

Nb: Photograph in header by Rogue (link).
All patterns by me. Do not use with anything else than this layout.

Style Sheet 03 - Velvet.

2007-02-05T17:07:51Z

Style Sheet: Velvet. (5 color schemes!)
Layout: Smooth Sailing.
Style: S2.
Sidebar: left.
Accounts: free and paid accounts.

There are five color schemes for this layout. Click on the links below for previews.

I am no longer answering questions about this layout.

------------------------------------------------------------------------------------

DOWNLOADS - The headers were made for the previews, but you can of course use your own. :)

Velvet (Pink!)
- preview
- download zip 484Kb
- how to install? important!

Nb: Jennifer Garner picture from jen-garner.net.
Background pattern from squidfingers.com.

Velvet (Grey!)
- preview
- download zip 350Kb
- how to install? important!

Nb: Cate Blanchett picture from cateblanchett.net.

Velvet (Blue!)
- preview
- download zip 614Kb
- how to install? important!

Nb: Kate Winslet picture from discoverkate.com.

Velvet (Green!)
- preview
- download zip 530Kb
- how to install? important!

Nb: Natalie Portman picture from natalieportman.com.

Velvet (Black!)
- preview
- download zip 459Kb
- how to install? important!

Nb: Audrey Tautou picture from audrey-tautou.org.

------------------------------------------------------------------------------------

HOW TO INSTALL

01. Customize the style sheet.
Open the css file in a text editor like notepad.
Replace YourURL by the URL you uploaded your pictures to.

Please, feel free to customize the style sheet, but only the typography and the text colors. Do not alter anything regarding the main structure of the layout, such as sidebar or entry width: because a big part of the layout is based on pictures, if you change something, it will screw it all up. Also do not alter any of the images, except for the header of course... feel free to use your own (header size: 530x200px).

You can choose to have a pattern or a solid color as a background. Feel free to change the pattern if you wish.

Save.
Keep the doc open.

02. Go to Manage Accounts > Customize Journal > Look and Feel

Layout and Language.
Select Smooth Sailing in the drop down menu. Save changes. important!

03. Go to Manage Accounts > Customize Journal > Custom Options

Presentation tab
» Header Journal Icon : Show User's icon in header important!
» Wrap Entry text under userinfo : yes
» Wrap Comment text under userinfo : yes

Save changes.

Menu tab
Remove the memories and website links so that the menu won't overlap on the sidebar when in day view (only paid accounts). You can always add the links in your links in you really want to have them.

Save changes.

Sidebar tab
» Sidebar Position : Left Side important!
» Profile Position : Hide (This is not necessary for the css to work, but it looks better without it as your default icon is already in the header)

Then you can choose whatever you want to appear in your sidebar, change the names, etc...

Save changes.

Custom Css tab
» Use layout's stylesheet(s) : No
» Use layout's stylesheet(s) when including custom external stylesheet : No
» Custom stylesheet URL : Paste in the css.

Save changes.

That's it!

------------------------------------------------------------------------------------

Notes

Though many things can be done through the style sheet, there are a number of things which are not. Before asking a question, make sure you read through the various (and many) customizations offered via the customization wizard.

Make sure your journal has a name and a subtitle, or the top navigation box will look off.

Leaving the navigation strip on may shift your layout to the left.
To prevent this go in Manage Accounts > Viewing options > 3. Navigation strip display options:
Uncheck both Always see the navigation strip when you view any journal or community and Always show the navigation strip to anyone who views your journal or community
Done. :)

------------------------------------------------------------------------------------

Useful links

» s2smoothsailing - help community for Smooth Sailing.
» Breakdown of the Smooth Sailing stylesheet, by carriep63.

Style Sheet 02 - Joe.

2006-10-29T17:28:05Z

Style Sheet: Joe.
Layout: Smooth Sailing.
Style: S2.
Sidebar: right.
Accounts: free and paid accounts.

No background image: preview in FireFox
Background image: preview in Internet Explorer

Note: the sidebar will only scroll if your content overflows the length the box.

Download zip file (142Kb)

I am no longer answering questions about this layout.

------------------------------------------------------------------------------------

Set up:

01. Customize the style sheet.
Open the css file in a text editor like notepad.
Replace YourURL by the URL where you uploaded your pictures.

Please, feel free to customize the style sheet, but only the text and links (in the typography section) and the few other things marked /* OK to customize */. Do not alter anything regarding the main structure of the layout, such as sidebar or entry width: because a big part of the layout is based on pictures, if you change something, it will screw it all up. Also do not alter any of the images, except for the header of course... (header size: 500x200px). Feel free to change the lj user icon. The one used is this layout was made by famfamfam.com.

You can choose to have a pattern or a solid color as a background. I strongly advise you to keep the color as it is (#F8F8F8), but if you really want to change it, it will have to be a color very close for the layout to look nice. Idem for the pattern: feel free to change it, but it has to remain light.

Save.
Upload your stylesheet to a website allowing hotlinking.

02. Go to Manage Accounts > Customize Journal > Look and Feel

Layout and Language.
Select Smooth Sailing in the drop down menu. Save changes. important!

03. Go to Manage Accounts > Customize Journal > Custom Options

Presentation tab
» Header Journal Icon : Show User's icon in header
» Wrap Entry text under userinfo : yes
» Wrap Comment text under userinfo : yes

Save changes.

Text Entry tab
If you want to have the exact same look as in the previews for the date, time and subject entry, your date has to be short. Example:
» Format for Date and Time (Recent/Friends/Entry/Reply page) : %%mm%%|%%dd%%|%%yy%% - %%HH%%:%%min%%
» Format for Date and Time (Day page only) : %%mm%%|%%dd%%|%%yy%% - %%HH%%:%%min%%

If you do not want to have this format (06|12|23 - 22:45), you'll have to change the padding as indicated in the css. This is also where you change the text for the various links in the entry.

Save changes.

Menu tab
Set the text of your navigation links. Because the button is only 70px wide, the shorter the text, the better. For example:
» Text used to link to the 'Recent Entries' view : recent
» Text used to link to the 'User Information' view : info
» Text used to link to the 'Friends' view : flist
» Text used to link to the 'Memories' view : mem
etc...

Note that you can choose to remove the memories and website links in case your menu is too wide, or if you don't want them there. If you have a paid account, this can be done via layers.

Save changes.

Sidebar tab
» Sidebar Position : Right Side important!
» Profile Position : Hide (This is not necessary for the css to work, but it looks better without it as your default icon is already in the header)

Then you can choose whatever you want to appear in your sidebar, change the names, etc...

Save changes.

Custom Css tab
» Use layout's stylesheet(s) : No
» Use layout's stylesheet(s) when including custom external stylesheet : No
» Custom external stylesheet URL : type in the URL of your style sheet

Save changes.

That's it!

------------------------------------------------------------------------------------

Notes

Though many things can be done through the style sheet, there are a number of things which are not. Before asking a question, make sure you read through the various (and many) customizations offered via the customization wizard.

Leaving the navigation strip on will shift your layout to the left.
To prevent this go in Manage Accounts > Viewing options > 3. Navigation strip display options:
Uncheck both Always see the navigation strip when you view any journal or community and Always show the navigation strip to anyone who views your journal or community
Done. :)

------------------------------------------------------------------------------------

Useful links

» s2smoothsailing - help community for Smooth Sailing.
» Breakdown of the Smooth Sailing stylesheet, by carriep63.

Style Sheet 01 - Afternoon.

2006-06-20T09:52:43Z

Style Sheet: Afternoon.
Layout: Smooth Sailing.
Style: S2.
Sidebar: left or right.
Accounts: free and paid accounts.

sidebar on the left
preview - download zip

sidebar on the right
preview - download zip

I am no longer answering questions about this layout.

------------------------------------------------------------------------------------

Set up:

01. Go to Manage Accounts > Customize Journal > Look and Feel

Layout and Language.
Select Smooth Sailing in the drop down menu. Save changes.

02. Go to Manage Accounts > Customize Journal > Custom Options

Sidebar tab.
» Sidebar Position : select "left side" or "right side" depending on the style sheet you're using. important!

Custom CSS tab.
» Use layout's stylesheet(s): No.
» Use layout's stylesheet(s) when including custom external stylesheet: No.
» Custom external stylesheet URL : type in the URL of your style sheet.

Save changes.

------------------------------------------------------------------------------------

Notes

Though many things can be done through the style sheet, there are a number of things which are not. Before asking a question, make sure you read through the various (and many) customizations offered via the customization wizard.

Leaving the navigation strip on will shift your layout to the left.
To prevent this go in Manage Accounts > Viewing options > 3. Navigation strip display options:
Uncheck both Always see the navigation strip when you view any journal or community and Always show the navigation strip to anyone who views your journal or community
Done. :)

» Tutorial for the header.

------------------------------------------------------------------------------------

Useful links

» s2smoothsailing - help community for Smooth Sailing.
» Breakdown of the Smooth Sailing stylesheet, by carriep63.

Afternoon: the header.

2006-06-20T09:41:42Z

This tutorial only works for the Afternoon style sheet!

What size should the header be?

The header you see in the Afternoon layout is in fact a background image in the header-menu. Its size is 527x200px. Of course, once you customize the layout and change the width of the body, the padding and all that, the size will change. So how do you determine the size of the header?

1. To get the same padding effect as in the Afternoon style:

A. For geeks.

If you want to get the same padding effect as in the Afternoon style, you have to calculate the size of your header, but first you have to determine its position within the header-menu. To do that, you have to look at the settings of the header-menu links and the header-menu itself:

- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)

To give the impression there's also padding after the link block, we add 7px.

You add them up: 7 + 120 + 10 + 7 = 144

.header-menu {
	background-color: transparent;
	background-image: url(http://yoururl/header.jpg);
	background-repeat: no-repeat;
	background-position: 144px 7px;
	padding: 7px;
	margin-top: 10px;
	height: 200px;
	border: 1px solid #CCCCCC;
	}

Determining the vertical position for the header is much simpler. Just enter the same amount as for the header-menu padding: 7px.

background-position: 144px 7px;

To determine the size of your header

The size of your header will depend on the settings you have for the body and the pageheaderblock.

- width of the body: 700px.
- padding of the pageheaderblock: 10px.

header-menu = 700 - (10 + 10)
header-menu = 680

Now that you've determined the width of the header-menu, we know that the header won't show where there's a border, so we substract 2px (because one border on the left plus one border on the right). The width is now 678px. You have to substract from it, the following numbers:

- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)
- illusion of padding on the right of the links: 7px

aka the number of pixels for the background position: 144px.

- right padding of the header-menu: 7px.

678 - (144 + 7) = 527

The width of your header will be 527px. As for the height, it will be the value you set for the height of the header-menu. Here: 200px.

B. For lazy geeks.

Now I'm going to tell you the easy way to achieve the same padding effect as above. You can have a header which covers the whole background of the header-menu: 678x200px. (Note: this can also be customized and therefore is subject to change depending on the changes you make.) This way you don't have to code the positioning of the header image in the css -- you just leave it to 0px 0px. You can achieve the padding effect by positioning your 527x200 image on a 678x200 white canvas in your graphics program.

2. No padding effect:

However, if you decide to use a 678x200 header, you can also decide to incorporate the links in the graphics. There are tons of possibilities on how to do that.

To sum up:

The part of the code which defines the look of the menu is:

/* TYPO - Links */

.header-menu a, .header-menu a:visited { 
	color: #8C0200;
	background-color: #D0EFA6;
	line-height: 12px;
	padding: 5px;
	margin-bottom: 5px;
	display: block;
	width: 120px;
	}

.header-menu a:hover {
	color: #FFFFFF;
	background-color: #CCCCCC;
	line-height: 12px; padding: 5px;
	margin-bottom: 5px;
	display: block;
	width: 120px;
	}

The part of the code which defines the menu position, and the header image height, position and url is:

/* HEADER AND FOOTER */

.header-menu {
	background-color: transparent;
	background-image: url(http://yoururl/header.jpg);
	background-repeat: no-repeat;
	background-position: 144px 7px;
	padding: 7px;
	margin-top: 10px;
	height: 200px;
	border: 1px solid #CCCCCC;
	}

.header-menu li {
	display: list;
	list-style: none;
	margin: 0;
	padding: 0;	
	}

.header-menu ul {
	margin: 0;
	padding: 0;
	}

Click on the thumbs to view.

a - header
b - header in situ

description

a
b

Kate Winslet
Size: 678 x 200
Sidebar: left.
Css: see the changes.

a
b

Matthew Fox
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.

a
b

Jared Padalecki
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.

a
b

J. Flanigan. D. Hewlett.
Size: 678 x 100
Sidebar: left.
Css: see the changes.

Resources

2006-06-20T09:26:11Z

LJ communities

» s2smoothsailing - LJ s2 Smooth Sailing help community.
» mintyapple - LJ community for css lovers.

Smooth Sailing tutorials

» Breakdown of the Smooth Sailing stylesheet - by carriep63.

Links:

» FamFamFam - free web icon sets.
» graphicPUSH - free blog icon set.
» Sweetie - free web icon set.

» w3schools.com - css tutorials.
» westciv - css guide.
» dezwozhere.com - vast portal to many css resources.

» Color Schemer Online - get the RGB or HEX value of a color in a click.
» Color Schemer.com - browse color schemes.

Link back:

	Velvet (Pink!) - preview - download zip 484Kb - how to install? important! Nb: Jennifer Garner picture from jen-garner.net. Background pattern from squidfingers.com.
	Velvet (Grey!) - preview - download zip 350Kb - how to install? important! Nb: Cate Blanchett picture from cateblanchett.net.
	Velvet (Blue!) - preview - download zip 614Kb - how to install? important! Nb: Kate Winslet picture from discoverkate.com.
	Velvet (Green!) - preview - download zip 530Kb - how to install? important! Nb: Natalie Portman picture from natalieportman.com.
	Velvet (Black!) - preview - download zip 459Kb - how to install? important! Nb: Audrey Tautou picture from audrey-tautou.org.

	Wallpaper Grey - preview - download zip 221Kb - how to install? important! Nb: Photograph in header by Rogue (link). All patterns by me. Do not use with anything else than this layout.
	Wallpaper Blue - preview + live preview @ titechose. - download zip 262Kb - how to install? important! Nb: Photograph in header by Rogue (link). All patterns by me. Do not use with anything else than this layout.