The colored brick road - S2 Flexible Squares
Layout: The colored brick road.
Style: S2 Flexible Squares.
Accounts: Free, Plus, Paid.
Resolution: 1024x728 and up.
Tested with: IE 7, Firefox 2, Opera 9, Safari 2, Netscape 7.
+ The comments page is customized.
+ You can change the header.
+ 11 color schemes (with matching tiny icons), because I LOVE to change the colors of my layout ;)
Image preview Live preview
Please, read this page and the F.A.Q. carefully before asking any questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
How to install
GO TO CUSTOMIZE
1. Edit Titles
» Journal Subtitle: Type in your subtitle (keep it short, on one line). IMPORTANT!
2. Select a New Theme
» Type "Flexible Squares" into the search box on the right. Click [Search].
» Choose the first layout. Click [Apply Theme].
3. Choose a Page Setup
» 2 Column (whatever you choose, the sidebar will be on the left.) Do NOT choose 1 column.
» Click [Apply Layout].
GO TO CUSTOM CSS
» Use layout's stylesheet: No. IMPORTANT!
» Use layout's stylesheet when including custom external stylesheet: No. IMPORTANT!
» Use external stylesheets: No.
» Custom stylesheet: Paste the css code into the box.
» Click [Save Changes].
Important
You should upload the pictures to your own server.
All the pictures are hosted at my Photobucket account and I don't know for how long they'll remain online.
Please upload the pictures to your own image host if you can.
Paste the code into Notepad or any other text editor and replace http://i239.photobucket.com/albums/ff183/pg_layouts/layout01/ and http://i239.photobucket.com/albums/ff183/pg_layouts/tiny_icons01/ with your url.
Comment and credit
If you use the layout, please comment, and credit passing_girl in your userinfo.
You can paste this code into your userinfo:
Layout by.
If you don't type in a subtitle...
There will be no white space between the top menu and the first entry.
To prevent this, add this code at the end of the css code: #header { padding-bottom: 35px; }
(You don't need to add this line if your journal has a subtitle or if you use a header picture)
CSS code and pictures
BLUE
color 1 / blue #268FE5
color 2 / pink #FF5570
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_blue.jpg
bg_pink.jpg
user_icon_blue.gif
user_icon_pink.gif
com_icon_blue.gif
com_icon_pink.gif
lock.gif
CYAN
color 1 / cyan #28B2E3
color 2 / yellow #FFBE22
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_cyan.jpg
bg_yellow.jpg
user_icon_cyan.gif
user_icon_yellow.gif
com_icon_cyan.gif
com_icon_yellow.gif
lock.gif
TURQUOISE
color 1 / turquoise #14C0CF
color 2 / fuchsia #FE4478
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_turquoise.jpg
bg_fuchsia.jpg
user_icon_turquoise.gif
user_icon_fuchsia.gif
com_icon_turquoise.gif
com_icon_fuchsia.gif
lock.gif
EMERALD
color 1 / emerald #39CC67
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_emerald.jpg
bg_cyan.jpg
user_icon_emerald.gif
user_icon_cyan.gif
com_icon_emerald.gif
com_icon_cyan.gif
lock.gif
GREEN
color 1 / green #80DC21
color 2 / yellow #FFBE22
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_green.jpg
bg_yellow.jpg
user_icon_green.gif
user_icon_yellow.gif
com_icon_green.gif
com_icon_yellow.gif
lock.gif
PINK
color 1 / pink #FF5570
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_pink.jpg
bg_cyan.jpg
user_icon_pink.gif
user_icon_cyan.gif
com_icon_pink.gif
com_icon_cyan.gif
lock.gif
FUCHSIA
color 1 / fuchsia #FE4478
color 2 / turquoise #14C0CF
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_fuchsia.jpg
bg_turquoise.jpg
user_icon_fuchsia.gif
user_icon_turquoise.gif
com_icon_fuchsia.gif
com_icon_turquoise.gif
lock.gif
ORCHID
color 1 / orchid #CA5CB7
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_orchid.jpg
bg_cyan.jpg
user_icon_orchid.gif
user_icon_cyan.gif
com_icon_orchid.gif
com_icon_cyan.gif
lock.gif
LAVENDER
color 1 / lavender #A65AB9
color 2 / pink #FF5570
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_lavender.jpg
bg_pink.jpg
user_icon_lavender.gif
user_icon_pink.gif
com_icon_lavender.gif
com_icon_pink.gif
lock.gif
ORANGE
color 1 / orange #FD7936
color 2 / orchid #CA5CB7
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_orange.jpg
bg_orchid.jpg
user_icon_orange.gif
user_icon_orchid.gif
com_icon_orange.gif
com_icon_orchid.gif
lock.gif
YELLOW
color 1 / yellow #FFBE22
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_yellow.jpg
bg_cyan.jpg
user_icon_yellow.gif
user_icon_cyan.gif
com_icon_yellow.gif
com_icon_cyan.gif
lock.gif
Get more tiny icons here.
Further customizations
How do I change the header?
Copy and paste this code at the end of the css code:
/*Header picture*/ .subtitle {display: none;} #header {padding: 0px 0px 35px 0px;} .headerimage { height: 100px; background: url(http://www.mysite.com/myheader.jpg) top center no-repeat; }
Replace 100 with the height of your header, change the url.
How do I change the color scheme?
The first color is the main color of the layout, the second one is the color you see when you go over the links.
For example, if you want a pink layout with yellow (instead of cyan).
Search through the "pink" css code and replace:
- "cyan" with "yellow".
- "#28B2E3" with "#FFBE22".
Don't forget to upload the yellow pictures (bg_yellow.jpg, user_icon_yellow.gif and com_icon_yellow.gif) to your image host.
How do I hide the sidebar?
Add this at the end of the css code:
#sidebar { display:none; }
#maincontent { padding: 0px 20px 0px 20px }
How do I change the width of the layout?
The default width of the layout is 795px, if you want a 700px layout, replace the header and the footer pictures with these: header.jpg, footer.jpg and paste this code at the end of the css code:
#content { width: 700px; }
Please note that if the width of the layout isn't 795px or 700px the rounded corners at the top and the bottom of the page won't be visible. Feel free to modify the footer and the header pictures so they fit the width of your layout.
How do I turn on the moodtheme pictures?
Find this line in the code: .currentmood img {display: none;} and erase it.
Style: S2 Flexible Squares.
Accounts: Free, Plus, Paid.
Resolution: 1024x728 and up.
Tested with: IE 7, Firefox 2, Opera 9, Safari 2, Netscape 7.
+ The comments page is customized.
+ You can change the header.
+ 11 color schemes (with matching tiny icons), because I LOVE to change the colors of my layout ;)
Image preview Live preview
Please, read this page and the F.A.Q. carefully before asking any questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
How to install
GO TO CUSTOMIZE
1. Edit Titles
» Journal Subtitle: Type in your subtitle (keep it short, on one line). IMPORTANT!
2. Select a New Theme
» Type "Flexible Squares" into the search box on the right. Click [Search].
» Choose the first layout. Click [Apply Theme].
3. Choose a Page Setup
» 2 Column (whatever you choose, the sidebar will be on the left.) Do NOT choose 1 column.
» Click [Apply Layout].
GO TO CUSTOM CSS
» Use layout's stylesheet: No. IMPORTANT!
» Use layout's stylesheet when including custom external stylesheet: No. IMPORTANT!
» Use external stylesheets: No.
» Custom stylesheet: Paste the css code into the box.
» Click [Save Changes].
Important
You should upload the pictures to your own server.
All the pictures are hosted at my Photobucket account and I don't know for how long they'll remain online.
Please upload the pictures to your own image host if you can.
Paste the code into Notepad or any other text editor and replace http://i239.photobucket.com/albums/ff183/pg_layouts/layout01/ and http://i239.photobucket.com/albums/ff183/pg_layouts/tiny_icons01/ with your url.
Comment and credit
If you use the layout, please comment, and credit passing_girl in your userinfo.
You can paste this code into your userinfo:
Layout by
If you don't type in a subtitle...
There will be no white space between the top menu and the first entry.
To prevent this, add this code at the end of the css code: #header { padding-bottom: 35px; }
(You don't need to add this line if your journal has a subtitle or if you use a header picture)
CSS code and pictures
BLUE
color 1 / blue #268FE5
color 2 / pink #FF5570
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_blue.jpg
bg_pink.jpg
user_icon_blue.gif
user_icon_pink.gif
com_icon_blue.gif
com_icon_pink.gif
lock.gif
CYAN
color 1 / cyan #28B2E3
color 2 / yellow #FFBE22
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_cyan.jpg
bg_yellow.jpg
user_icon_cyan.gif
user_icon_yellow.gif
com_icon_cyan.gif
com_icon_yellow.gif
lock.gif
TURQUOISE
color 1 / turquoise #14C0CF
color 2 / fuchsia #FE4478
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_turquoise.jpg
bg_fuchsia.jpg
user_icon_turquoise.gif
user_icon_fuchsia.gif
com_icon_turquoise.gif
com_icon_fuchsia.gif
lock.gif
EMERALD
color 1 / emerald #39CC67
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_emerald.jpg
bg_cyan.jpg
user_icon_emerald.gif
user_icon_cyan.gif
com_icon_emerald.gif
com_icon_cyan.gif
lock.gif
GREEN
color 1 / green #80DC21
color 2 / yellow #FFBE22
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_green.jpg
bg_yellow.jpg
user_icon_green.gif
user_icon_yellow.gif
com_icon_green.gif
com_icon_yellow.gif
lock.gif
PINK
color 1 / pink #FF5570
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_pink.jpg
bg_cyan.jpg
user_icon_pink.gif
user_icon_cyan.gif
com_icon_pink.gif
com_icon_cyan.gif
lock.gif
FUCHSIA
color 1 / fuchsia #FE4478
color 2 / turquoise #14C0CF
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_fuchsia.jpg
bg_turquoise.jpg
user_icon_fuchsia.gif
user_icon_turquoise.gif
com_icon_fuchsia.gif
com_icon_turquoise.gif
lock.gif
ORCHID
color 1 / orchid #CA5CB7
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_orchid.jpg
bg_cyan.jpg
user_icon_orchid.gif
user_icon_cyan.gif
com_icon_orchid.gif
com_icon_cyan.gif
lock.gif
LAVENDER
color 1 / lavender #A65AB9
color 2 / pink #FF5570
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_lavender.jpg
bg_pink.jpg
user_icon_lavender.gif
user_icon_pink.gif
com_icon_lavender.gif
com_icon_pink.gif
lock.gif
ORANGE
color 1 / orange #FD7936
color 2 / orchid #CA5CB7
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_orange.jpg
bg_orchid.jpg
user_icon_orange.gif
user_icon_orchid.gif
com_icon_orange.gif
com_icon_orchid.gif
lock.gif
YELLOW
color 1 / yellow #FFBE22
color 2 / cyan #28B2E3
Live preview.
Get the code.
header.jpg
footer.jpg
bg_menu.jpg
bg_yellow.jpg
bg_cyan.jpg
user_icon_yellow.gif
user_icon_cyan.gif
com_icon_yellow.gif
com_icon_cyan.gif
lock.gif
Get more tiny icons here.
Further customizations
How do I change the header?
Copy and paste this code at the end of the css code:
/*Header picture*/ .subtitle {display: none;} #header {padding: 0px 0px 35px 0px;} .headerimage { height: 100px; background: url(http://www.mysite.com/myheader.jpg) top center no-repeat; }
Replace 100 with the height of your header, change the url.
How do I change the color scheme?
The first color is the main color of the layout, the second one is the color you see when you go over the links.
For example, if you want a pink layout with yellow (instead of cyan).
Search through the "pink" css code and replace:
- "cyan" with "yellow".
- "#28B2E3" with "#FFBE22".
Don't forget to upload the yellow pictures (bg_yellow.jpg, user_icon_yellow.gif and com_icon_yellow.gif) to your image host.
How do I hide the sidebar?
Add this at the end of the css code:
#sidebar { display:none; }
#maincontent { padding: 0px 20px 0px 20px }
How do I change the width of the layout?
The default width of the layout is 795px, if you want a 700px layout, replace the header and the footer pictures with these: header.jpg, footer.jpg and paste this code at the end of the css code:
#content { width: 700px; }
Please note that if the width of the layout isn't 795px or 700px the rounded corners at the top and the bottom of the page won't be visible. Feel free to modify the footer and the header pictures so they fit the width of your layout.
How do I turn on the moodtheme pictures?
Find this line in the code: .currentmood img {display: none;} and erase it.