You've got to say the number - S2 Flexible Squares
You're not dreaming, it's a post from me, a new layout even. Enjoy!
Layout: You've got to say the number.
Style: S2 Flexible Squares.
Accounts: Free, Plus (vertical and horizontal alignment only), Paid.
Resolution: 1024x728 and up.
Tested with: IE 7 (XP), Firefox 3 (XP), Opera 9 (XP), Safari 3 (Mac OS).
Notes: I used one of fontalicious amazing dingbats in the header.
8 color schemes.
Image preview Live preview
Read this page and the F.A.Q. before asking questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
Change the color scheme
Change the width of the layout
Add a header picture
Turn on the moodtheme pictures
How to install
GO TO CUSTOMIZE
2. Select a New Theme
» Type "Flexible Squares" into the search box on the right. Click [Search].
» Choose one of the layouts. 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].
» Click [Save Changes].
Important
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 have a paid account:
The space between the comment links (comments | leave a comment) may look uneven in your layout. If that's the case, just find this line: padding: 5px 0 5px 13px; and replace it with: padding: 5px 13px 5px 13px;
CSS code and pictures
GOLD
color 1 / gold
color 2 / darkturquoise
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_gold.jpg
bg_darkturquoise.jpg
header_gold.jpg
header_darkturquoise.jpg
user_icon_gold.gif
user_icon_darkturquoise.gif
com_icon_gold.gif
com_icon_darkturquoise.gif
lock.gif
DARKTURQUOISE
color 1 / darkturquoise
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_darkturquoise.jpg
bg_coralpink.jpg
header_darkturquoise.jpg
header_coralpink.jpg
user_icon_darkturquoise.gif
user_icon_coralpink.gif
com_icon_darkturquoise.gif
com_icon_coralpink.gif
lock.gif
DARKPINK
color 1 / darkpink
color 2 / olivegreen
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_darkpink.jpg
bg_olivegreen.jpg
header_darkpink.jpg
header_olivegreen.jpg
user_icon_darkpink.gif
user_icon_olivegreen.gif
com_icon_darkpink.gif
com_icon_olivegreen.gif
lock.gif
OLIVEGREEN
color 1 / olivegreen
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_olivegreen.jpg
bg_coralpink.jpg
header_olivegreen.jpg
header_coralpink.jpg
user_icon_olivegreen.gif
user_icon_coralpink.gif
com_icon_olivegreen.gif
com_icon_coralpink.gif
lock.gif
LIGHTPURPLE
color 1 / lightpurple
color 2 / pinegreen
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_lightpurple.jpg
bg_pinegreen.jpg
header_lightpurple.jpg
header_pinegreen.jpg
user_icon_lightpurple.gif
user_icon_pinegreen.gif
com_icon_lightpurple.gif
com_icon_pinegreen.gif
lock.gif
PINEGREEN
color 1 / pinegreen
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_pinegreen.jpg
bg_coralpink.jpg
header_pinegreen.jpg
header_coralpink.jpg
user_icon_pinegreen.gif
user_icon_coralpink.gif
com_icon_pinegreen.gif
com_icon_coralpink.gif
lock.gif
CORALPINK
color 1 / coralpink
color 2 / lightpurple
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_coralpink.jpg
bg_lightpurple.jpg
header_coralpink.jpg
header_lightpurple.jpg
user_icon_coralpink.gif
user_icon_lightpurple.gif
com_icon_coralpink.gif
com_icon_lightpurple.gif
lock.gif
BONDIBLUE
color 1 / bondiblue
color 2 / darkpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_bondiblue.jpg
bg_darkpink.jpg
header_bondiblue.jpg
header_darkpink.jpg
user_icon_bondiblue.gif
user_icon_darkpink.gif
com_icon_bondiblue.gif
com_icon_darkpink.gif
lock.gif
Further customizations
How do I change the color scheme?
gold#c78133#a8662ddarkturquoise#0caaad#058788darkpink#eb6386#c02e54olivegreen#8fa71f#738212lightpurple#c66a9b#9d4473pinegreen#19a58f#128177coralpink#ec6b66#c24844bondiblue#309db5#067d96 For example, if you want the darkpink layout with darkturquoise (instead of olivegreen).
Search through the darkpink css code and replace:
- olivegreen with darkturquoise.
- #8fa71f with #0caaad.
- #738212 with #058788.
- Use the Edit > Replace function of your text-editor.
- Don't choose two colors that are too similar or you won't be able to tell the difference between the bold text and the links.
Don't want the bold and the italic text to be colored?
Find the line of code that starts with: b, strong, i, em and erase it.
How do I change the width of the layout?
Find this line and change the width:
width: 85%; min-width: 890px;
(if you want a fixed width, remove min-width: 890px;)
How do I add a header picture?
Copy and paste this code at the end of your stylesheet.
Replace 100 with the height of your header, change the url.
/*HEADER PICTURE*/ .headerimage { height: 100px; background: url(http://www.mysite.com/myheader.jpg) top center no-repeat; }
How do I turn on the moodtheme pictures?
Find this line in the code: .currentmood img {display: none;} and erase it.
Layout: You've got to say the number.
Style: S2 Flexible Squares.
Accounts: Free, Plus (vertical and horizontal alignment only), Paid.
Resolution: 1024x728 and up.
Tested with: IE 7 (XP), Firefox 3 (XP), Opera 9 (XP), Safari 3 (Mac OS).
Notes: I used one of fontalicious amazing dingbats in the header.
8 color schemes.
Image preview Live preview
Read this page and the F.A.Q. before asking questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
Change the color scheme
Change the width of the layout
Add a header picture
Turn on the moodtheme pictures
How to install
GO TO CUSTOMIZE
2. Select a New Theme
» Type "Flexible Squares" into the search box on the right. Click [Search].
» Choose one of the layouts. 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].
» Click [Save Changes].
Important
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 have a paid account:
The space between the comment links (comments | leave a comment) may look uneven in your layout. If that's the case, just find this line: padding: 5px 0 5px 13px; and replace it with: padding: 5px 13px 5px 13px;
CSS code and pictures
GOLD
color 1 / gold
color 2 / darkturquoise
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_gold.jpg
bg_darkturquoise.jpg
header_gold.jpg
header_darkturquoise.jpg
user_icon_gold.gif
user_icon_darkturquoise.gif
com_icon_gold.gif
com_icon_darkturquoise.gif
lock.gif
DARKTURQUOISE
color 1 / darkturquoise
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_darkturquoise.jpg
bg_coralpink.jpg
header_darkturquoise.jpg
header_coralpink.jpg
user_icon_darkturquoise.gif
user_icon_coralpink.gif
com_icon_darkturquoise.gif
com_icon_coralpink.gif
lock.gif
DARKPINK
color 1 / darkpink
color 2 / olivegreen
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_darkpink.jpg
bg_olivegreen.jpg
header_darkpink.jpg
header_olivegreen.jpg
user_icon_darkpink.gif
user_icon_olivegreen.gif
com_icon_darkpink.gif
com_icon_olivegreen.gif
lock.gif
OLIVEGREEN
color 1 / olivegreen
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_olivegreen.jpg
bg_coralpink.jpg
header_olivegreen.jpg
header_coralpink.jpg
user_icon_olivegreen.gif
user_icon_coralpink.gif
com_icon_olivegreen.gif
com_icon_coralpink.gif
lock.gif
LIGHTPURPLE
color 1 / lightpurple
color 2 / pinegreen
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_lightpurple.jpg
bg_pinegreen.jpg
header_lightpurple.jpg
header_pinegreen.jpg
user_icon_lightpurple.gif
user_icon_pinegreen.gif
com_icon_lightpurple.gif
com_icon_pinegreen.gif
lock.gif
PINEGREEN
color 1 / pinegreen
color 2 / coralpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_pinegreen.jpg
bg_coralpink.jpg
header_pinegreen.jpg
header_coralpink.jpg
user_icon_pinegreen.gif
user_icon_coralpink.gif
com_icon_pinegreen.gif
com_icon_coralpink.gif
lock.gif
CORALPINK
color 1 / coralpink
color 2 / lightpurple
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_coralpink.jpg
bg_lightpurple.jpg
header_coralpink.jpg
header_lightpurple.jpg
user_icon_coralpink.gif
user_icon_lightpurple.gif
com_icon_coralpink.gif
com_icon_lightpurple.gif
lock.gif
BONDIBLUE
color 1 / bondiblue
color 2 / darkpink
Live preview.
Get the code.
bg.jpg
bg_navheader.jpg
bg_navheader_hover.jpg
shadow.jpg
bg_subject.jpg
bg_userpic.jpg
bg_userpic2.jpg
bg_sidebar.jpg
bg_bondiblue.jpg
bg_darkpink.jpg
header_bondiblue.jpg
header_darkpink.jpg
user_icon_bondiblue.gif
user_icon_darkpink.gif
com_icon_bondiblue.gif
com_icon_darkpink.gif
lock.gif
Further customizations
How do I change the color scheme?
gold#c78133#a8662ddarkturquoise#0caaad#058788darkpink#eb6386#c02e54olivegreen#8fa71f#738212lightpurple#c66a9b#9d4473pinegreen#19a58f#128177coralpink#ec6b66#c24844bondiblue#309db5#067d96 For example, if you want the darkpink layout with darkturquoise (instead of olivegreen).
Search through the darkpink css code and replace:
- olivegreen with darkturquoise.
- #8fa71f with #0caaad.
- #738212 with #058788.
- Use the Edit > Replace function of your text-editor.
- Don't choose two colors that are too similar or you won't be able to tell the difference between the bold text and the links.
Don't want the bold and the italic text to be colored?
Find the line of code that starts with: b, strong, i, em and erase it.
How do I change the width of the layout?
Find this line and change the width:
width: 85%; min-width: 890px;
(if you want a fixed width, remove min-width: 890px;)
How do I add a header picture?
Copy and paste this code at the end of your stylesheet.
Replace 100 with the height of your header, change the url.
/*HEADER PICTURE*/ .headerimage { height: 100px; background: url(http://www.mysite.com/myheader.jpg) top center no-repeat; }
How do I turn on the moodtheme pictures?
Find this line in the code: .currentmood img {display: none;} and erase it.