It'll be dark soon - S2 Flexible Squares
Layout: It'll be dark soon.
Style: S2 Flexible Squares.
Accounts: Free, Plus, Paid.
Resolution: 1024x728 and up.
Tested on XP, with: IE 7, Firefox 2, Opera 9, Netscape 7.
The comments page is customized.
+ You can change the header.
+ 11 color schemes (with matching tiny icons.)
Image preview Live preview
Please, read this page and the F.A.Q. carefully before asking questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
Add a header
Change the width of the layout
Change the color scheme
Turn on the moodtheme pictures
How to install
GO TO CUSTOMIZE
1. Edit Titles
» Journal Subtitle: Type in your title (facultative)
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 right). 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
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.
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.
I recommend you 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/layout03/ and http://i239.photobucket.com/albums/ff183/pg_layouts/tiny_icons03/ with your url.
If you have a PAID ACCOUNT and if there are more than 5 elements in your navigation menu (recent entries, archive, friends... ) you'll have to add a line of code at the very end of your stylesheet, so the navigation menu don't go over the sidebar.
If you have 6 elements, add this line: #sidebar { padding-top: 154px; }
If you have 7 elements, the padding will be 176px (154+22=176).
Etc.
CSS code and pictures
YELLOW
color 1 / yellow #FFBE22
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_yellow.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_yellow.gif
user_icon_green.gif
com_icon_yellow2.gif
com_icon_green2.gif
lock.gif
ORANGE
color 1 / orange #FF6217
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_orange.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_orange.gif
user_icon_yellow.gif
com_icon_orange2.gif
com_icon_yellow2.gif
lock.gif
LAVENDER
color 1 / lavender #A65AB9
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_lavender.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_lavender.gif
user_icon_yellow.gif
com_icon_lavender2.gif
com_icon_yellow2.gif
lock.gif
ORCHID
color 1 / orchid #CA5CB7
color 2 / pink #FF5570
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_orchid.jpg
bg_pink.jpg
corner_blockquote.jpg
content.jpg
user_icon_orchid.gif
user_icon_pink.gif
com_icon_orchid2.gif
com_icon_pink2.gif
lock.gif
FUCHSIA
color 1 / fuchsia #FE4478
color 2 / orange #FF6217
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_fuchsia.jpg
bg_orange.jpg
corner_blockquote.jpg
content.jpg
user_icon_fuchsia.gif
user_icon_orange.gif
com_icon_fuchsia2.gif
com_icon_orange2.gif
lock.gif
PINK
color 1 / pink #FF5570
color 2 / cyan #28B2E3
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_pink.jpg
bg_cyan.jpg
corner_blockquote.jpg
content.jpg
user_icon_pink.gif
user_icon_cyan.gif
com_icon_pink2.gif
com_icon_cyan2.gif
lock.gif
GREEN
color 1 / green #A8CA49
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_green.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg<;;/a>
user_icon_green.gif
user_icon_yellow.gif
com_icon_green2.gif
com_icon_yellow2.gif
lock.gif
EMERALD
color 1 / emerald #39CC67
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_emerald.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_emerald.gif
user_icon_green.gif
com_icon_emerald2.gif
com_icon_green2.gif
lock.gif
TURQUOISE
color 1 / turquoise #14C0CF
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_turquoise.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_turquoise.gif
user_icon_green.gif
com_icon_turquoise2.gif
com_icon_green2.gif
lock.gif
CYAN
color 1 / cyan #28B2E3
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_cyan.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_cyan.gif
user_icon_yellow.gif
com_icon_cyan2.gif
com_icon_yellow2.gif
lock.gif
BLUE
color 1 / blue #3B87CB
color 2 / turquoise #14C0CF
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_blue.jpg
bg_turquoise.jpg
corner_blockquote.jpg
content.jpg
user_icon_blue.gif
user_icon_turquoise.gif
com_icon_blue2.gif
com_icon_turquoise2.gif
lock.gif
Get more tiny icons here.
Further customizations
How do I add a header?
Copy and paste this code at the end of your stylesheet:
/*Header picture*/ .subtitle { display: none } #header { padding-top: 100px; background: #313131 url(http://www.mysite.com/myheader.jpg) center top no-repeat; }
Change the URL
Replace 100 with the height of your header - 60px.
For example, if the height of your header is 300px, write 240px.
(300px - 60px = 240px.)
How do I change the width of the layout?
Find this line in the code and change the width: #content { width: 900px;
How do I change the color scheme?
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_yellow2.gif) to your image host.
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 on XP, with: IE 7, Firefox 2, Opera 9, Netscape 7.
The comments page is customized.
+ You can change the header.
+ 11 color schemes (with matching tiny icons.)
Image preview Live preview
Please, read this page and the F.A.Q. carefully before asking questions. Thank you.
1/ How to install
2/ Important
3/ CSS code and pictures
4/ Further Customizations
Add a header
Change the width of the layout
Change the color scheme
Turn on the moodtheme pictures
How to install
GO TO CUSTOMIZE
1. Edit Titles
» Journal Subtitle: Type in your title (facultative)
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 right). 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
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
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.
I recommend you 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/layout03/ and http://i239.photobucket.com/albums/ff183/pg_layouts/tiny_icons03/ with your url.
If you have a PAID ACCOUNT and if there are more than 5 elements in your navigation menu (recent entries, archive, friends... ) you'll have to add a line of code at the very end of your stylesheet, so the navigation menu don't go over the sidebar.
If you have 6 elements, add this line: #sidebar { padding-top: 154px; }
If you have 7 elements, the padding will be 176px (154+22=176).
Etc.
CSS code and pictures
YELLOW
color 1 / yellow #FFBE22
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_yellow.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_yellow.gif
user_icon_green.gif
com_icon_yellow2.gif
com_icon_green2.gif
lock.gif
ORANGE
color 1 / orange #FF6217
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_orange.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_orange.gif
user_icon_yellow.gif
com_icon_orange2.gif
com_icon_yellow2.gif
lock.gif
LAVENDER
color 1 / lavender #A65AB9
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_lavender.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_lavender.gif
user_icon_yellow.gif
com_icon_lavender2.gif
com_icon_yellow2.gif
lock.gif
ORCHID
color 1 / orchid #CA5CB7
color 2 / pink #FF5570
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_orchid.jpg
bg_pink.jpg
corner_blockquote.jpg
content.jpg
user_icon_orchid.gif
user_icon_pink.gif
com_icon_orchid2.gif
com_icon_pink2.gif
lock.gif
FUCHSIA
color 1 / fuchsia #FE4478
color 2 / orange #FF6217
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_fuchsia.jpg
bg_orange.jpg
corner_blockquote.jpg
content.jpg
user_icon_fuchsia.gif
user_icon_orange.gif
com_icon_fuchsia2.gif
com_icon_orange2.gif
lock.gif
PINK
color 1 / pink #FF5570
color 2 / cyan #28B2E3
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_pink.jpg
bg_cyan.jpg
corner_blockquote.jpg
content.jpg
user_icon_pink.gif
user_icon_cyan.gif
com_icon_pink2.gif
com_icon_cyan2.gif
lock.gif
GREEN
color 1 / green #A8CA49
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_green.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg<;;/a>
user_icon_green.gif
user_icon_yellow.gif
com_icon_green2.gif
com_icon_yellow2.gif
lock.gif
EMERALD
color 1 / emerald #39CC67
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_emerald.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_emerald.gif
user_icon_green.gif
com_icon_emerald2.gif
com_icon_green2.gif
lock.gif
TURQUOISE
color 1 / turquoise #14C0CF
color 2 / green #A8CA49
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_turquoise.jpg
bg_green.jpg
corner_blockquote.jpg
content.jpg
user_icon_turquoise.gif
user_icon_green.gif
com_icon_turquoise2.gif
com_icon_green2.gif
lock.gif
CYAN
color 1 / cyan #28B2E3
color 2 / yellow #FFBE22
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_cyan.jpg
bg_yellow.jpg
corner_blockquote.jpg
content.jpg
user_icon_cyan.gif
user_icon_yellow.gif
com_icon_cyan2.gif
com_icon_yellow2.gif
lock.gif
BLUE
color 1 / blue #3B87CB
color 2 / turquoise #14C0CF
Live preview.
Get the code.
corner_topleft.jpg
corner_bottomright.jpg
gradient_dark.jpg
bg_blue.jpg
bg_turquoise.jpg
corner_blockquote.jpg
content.jpg
user_icon_blue.gif
user_icon_turquoise.gif
com_icon_blue2.gif
com_icon_turquoise2.gif
lock.gif
Get more tiny icons here.
Further customizations
How do I add a header?
Copy and paste this code at the end of your stylesheet:
/*Header picture*/ .subtitle { display: none } #header { padding-top: 100px; background: #313131 url(http://www.mysite.com/myheader.jpg) center top no-repeat; }
Change the URL
Replace 100 with the height of your header - 60px.
For example, if the height of your header is 300px, write 240px.
(300px - 60px = 240px.)
How do I change the width of the layout?
Find this line in the code and change the width: #content { width: 900px;
How do I change the color scheme?
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_yellow2.gif) to your image host.
How do I turn on the moodtheme pictures?
Find this line in the code: .currentmood img {display: none;} and erase it.