resplandor: S2 Flexible Squares // Blue Sky

The reflection of dawn (

resplandor) wrote,
@ 2007-03-23 20:37:00

Current mood:	tired
Current music:	A Silver Mt Zion
Entry tags:	flexible squares

S2 Flexible Squares // Blue Sky
This is the first override I'm posting as my own work, I've been codind css for quite a while, mostly editing other's overrides, but thanks to the Flexible Squares CSS guide irinafan wrote, I finally could finish a whole

layout on my own. I also used loveicon's tiny icon generator.
Enjoy, comment and credit if you're taking :]

Style: S2 Flexible Squares
Website: Not required
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: IE, Firefox (let me know if it works in any other)
Nav Bar?: Yes
Custom Comment Page?: Yes
Work best with: Free & Paid account
**This is not really recommended for plus account, it really depends in personal choice. You can always test and decided if you like it or not.

1024x768 preview | Custom Comments Preview

Overrides

/*---------------------------------------------------
By: Resplandor@livejournal.com
Style: S2 Flexible Squares 
Works best with: Free & Paid accounts
Browser: Firefox and IE, didn't try it on any other. 
-----------------------------------------------------*/

body	{
		background-color: #efefef;
		text-align: justify;
		color: #000000;
		font-family: "tahoma", "verdana", sans-serif;
		font-size: 7pt;
		margin: 10px 0 20px 0;
		}

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		/* so that IE users will still see an image */
  		background-image: url(http://img489.imageshack.us/img489/85/usergreybyexcentricwn0.gif); 
  		padding: 8px 6px 0 2px;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://img489.imageshack.us/img489/85/usergreybyexcentricwn0.gif);
  		padding: 8px 6px 0 2px;
		}

a, a:link, a:visited {
		color: #87cefa;
		text-decoration: none;
               
		}

a:hover {
		color: #000000;
		text-decoration: none;
             
		}

p, td {
		font-size:7pt;
                         }

blockquote {
	    	margin-left: 15px;
            		margin-right: 10px;
		padding: 1px; 
		color: #666666;
		line-height: 16px;
		letter-spacing: 0px;
		font-size: 7pt;
		font-family: "tahoma", "verdana", sans-serif;
		border-width: 1px;
		border-style: dashed;
		border-color: #87cefa; 
		text-align: justify;
		background-color: #f9f9f9;
		}

code, kbd, pre, tt {
	    	font-family: monospace;
		}

/*---------------------------------------------------------------------
   General page alignment and width
------------------------------------------------------------------------*/

#content{
		width: 669px;
		margin-left: auto; margin-right: auto;
		background-color: #ffffff;
		border-width: 0px;
		border-style: dashed;
		border-color: #87cefa;
		padding: 15px;
		}

#maincontent {
		margin-top: 15px;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 7pt;
		background-color: #ffffff;
		color: #000000;
		border-style: dashed;
		border-color: #87cefa;
		border-width: 0px;
		margin-right: 180px;
		text-align: justify;
		}

#sidebar {

padding-top: 20px;
		margin-top: 15px;
		background-color: #ffffff;
	  	font-size: 7pt!important;
		font-family: "Tahoma", "Verdana", sans-serif;
	  	color: #000000;
		width: 160px;
		float:right;
		text-align: justify;                 
		}

/*-----------------------------------------------------------------------------
#header or .headerimage
--------------------------------------------------------------------------------*/

#header {
		width: 100%;
		padding: 0px 0px 0px 0px;
		margin: 0px;
		text-align: right;
		font-family: "Tahoma", "verdana", sans-serif;
		font-size: 9pt!important;
		font-weight: normal;
                 	text-transform: none;
		letter-spacing: 3px;
		border-style: solid;
		border-color: #cccccc;
		border-width: 0px;
		background-color: transparent;
              	background-image: url("");
		color: #000000;
		}

/*look  and color of links (also partly for footer)*/
	div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
		color: #87cefa;
                          }

div#header a:hover, div#footer a:hover {
		color: #000000;
		text-decoration: none;
               	letter-spacing: 4px;
              	}

/*title and subtitle*/
	.title	{
		display:none;
               	font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 7pt;
		font-weight: normal;
		line-height: 200%;
                	text-align:left; 
		top: 7px;
		}

.subtitle{
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 7pt;
		font-weight: normal;
		top: 10px;
               	display: none;
		}

/*-----------------------------------------------------------------------------
   Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

ul.navheader
		{
		padding: 0px;
		margin: 0px;
		}

ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
		}

/*-----------------------------------------------------------------------------
   Entry 
------------------------------------------------------------------------*/

.subcontent {
			}
	
	.entry	{
                	margin: 0px 5px 5px 5px;
		padding: 15px;
		background-color: #ffffff;
		color: #000000;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 8pt;
		text-align: justify;
		border-width: 0px;
		border-color: none;
		border-style: solid;
		}

.userpic {
		position: relative;
		float: left;
		background-color: transparent;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		border-width:0px;
		border-color: #cccccc;
		border-style: solid;
		}

.date 	{
		line-height: 200%;
		top: 5px;
		color: #000000;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 7pt;
               	 border-bottom: 1px solid #87cefa;
		}

.subject { 		
                          padding: 2px;
                          font-weight: light;
                          font-size: 8pt;
                          color:#000000;
                          font-family: "Tahoma", "Verdana", sans-serif;
                          text-align: left;                   
                          text-transform:uppercase;
                          background-color: transparent;
                          background-image: url(''); 
                          background-repeat: repeat;
                          letter-spacing: 2pt;
                          }

.subject a, .subject a:link, .subject a:visited {
		color: #ffffff;
		}

.subject a:hover {
		color: none;
		}

.datesubject {
		background-color: #transparent;
		padding: 2px;
		}

.entry ul li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

.entry ol li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

/*---------------------------------------------------------------------
  Entry - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic, .currentlocation {
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 7pt;
		}

.ljtags a,.ljtags a:link,.ljtags a:visited , .currentlocation a {
		color:#87cefa;
		font-size:7pt!important; 
 		}

.ljtags a:hover, .currentlocation a:hover {
		color: none;
		}

/*---------------------------------------------------------------------
  Entry - Comments
------------------------------------------------------------------------*/

.comments {
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 8pt;
		text-align: right;
		background-color: transparent;
		padding: 0px 5px 0px 5px;
		position: relative;
		top: 15px;
		}

div.comments a, div.comments a:link, div.comments a:visited{
		color: #87cefa;
                	}

div.comments a:hover {
		color: #000000;
		text-decoration: none;
               	letter-spacing: 2px;
               	text-transform: uppercase;
              	font-size: 7pt!important;
		}

/*---------------------------------------------------------------------
  Entry - Separator
------------------------------------------------------------------------*/

.separator{
		/* for formatting separators between entries */
		height: 35px;
		}

/*------------------------------------------------------------
Friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {		
               	position: relative;
		float: right;
		background-color:transparent!important;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		text-align:center;
		border-width:0px!important;
		border-color: #efefef;
		border-style: solid;
		}

/*--------------------------------------------------------------	
  Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
		text-align: center;
		}

.sbarheader {
		padding: 0px 5px 0px 5px;
		}

.sbarbody {
		padding: 0px 5px 0px 5px;
		}

.sbarbody2 {
		padding: 0 15px 0 15px;
		}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
                          color: #000000;
                 	font-size: 9pt!important; 
        	 	}

div#sidebar a:hover {
              	color: #ffffff;
            	       	text-transform: none;
                	background-color: #87cefa;
                 	font-size: 9pt!important; 
       		}

/*------------------------------------------------------------
  Sidebar - Calendar
-------------------------------------------------------------------------------*/

table.calendar {
		margin-right: auto;
		margin-left: auto;
		}

.sbarcalendar {
		border-color: #999999;
		border-width: 1px;
		border-style: solid;
		text-align: center;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 8pt!important;
		}

.sbarcalendarposts {
		border-color:  #efefef;
		border-width: 1px;
		border-style: dashed;
		background-color: #efefef;
		text-align: center;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 8pt!important;
		}

/*------------------------------------------------------------
  Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

ul.sbarlist{
		padding-left: 0px;
		margin-left: 0px;
		list-style: none;
		}

li.sbaritem {
		padding-top:5px;
		padding-right: 5px;
		list-style: none;		
		text-align:right;
		border-bottom: dotted 1px #87cefa;
		}

li.sbaritem:hover {
		background: none; 
		}
	
	li.sbartitle{
		padding-left: 15px;
		list-style: none;
		border-style: solid;
		border-width: 0px;
		border-color: #cccccc;
		background-color: #ffffff;
                         	border-bottom: 1px dashed #87ceeb;
		margin-bottom: 8px;
		margin-top: 8px;
               	font-size: 9pt!important; 
		}

/*----------------------------------------------------
  footer
----------------------------------------------------------------*/

#footer {
		padding-top:10px;
                         padding-bottom:5px;
		width: 100%;
		text-align: right;
		font-family: "Tahoma", "verdana", sans-serif;
		font-size: 8pt!important;
		font-weight: normal;
		letter-spacing: 3px;
		background-color: transparent;
		color: #000000;
		border-color: #cccccc;
		border-width: 0px;
		border-style: solid;
		z-index: 100;
		clear: both;
		}

ul.navfooter{
		padding: 0px;
		margin: 0px;
		}

ul.navfooter li  {
		display: inline;
		margin: 0 5px 0 5px;
		}

.clearfoot {
		clear: both;
		}

/*----------------------------------------------------
 Calendar Pages 
----------------------------------------------------------------*/

ul.year {
		text-align: center;
		padding-bottom: 40px;
		}

ul.year li {
		display: inline;
		}

table.yeartable {
		margin-left: auto;
		margin-right: auto;
		}

table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #999999;
		}

table.yeartable td.yearday {
		background-color: #ffffff;
		text-align: center;
		}

td.yearmonth {
		border-style: none;
		}

/*----------------------------------------------------
 Comments pages - For Paid accounts 
----------------------------------------------------------------*/

/*look  and color of links */
	div#header a, div#header a:link, div#header a:visited,{
		color: #87cefa;
               	font-size: 9pt!important; 
                  	}

div#header a:hover{
		color: #000000;
		text-decoration: none;
               	letter-spacing: 4px;
                	font-size: 9pt!important; 
               	}

.datesubjectcomment {
		background-color: transparent;
                         	border-bottom: 1px solid #87cefa; 
		padding: 5px;
		margin-top: 20px;
		}

.userpicfriends {		
                	position: relative;
		float: left;
		background-color:transparent!important;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		border-width:0px!important;
		border-color: #cccccc;
		border-style: solid;
		}

.userpiccomment {
		position: relative;
		border-width: 5px;
		border-style: solid;
		border-color: #cccccc;
		background-color:#ffffff;
		top: -30px;
		left: 0px;
		padding: 5px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		border-width: 1px;
		border-color: #efefef;
		border-style: solid;
		}

.box {
		border-style: solid;
		border-width: 1px 0px 0px 0px;
		border-color: #cccccc;
		padding: 10px;
		clear: left;
		}

input, textarea {
		background-color: #ffffff;
		color: #000000;
		}

textarea.textbox  {
          		width: 100% !important;
   		}

a, a:link, a:visited {
		color: #87cefa;
		text-decoration: none;
               	font-size:8pt;  
		}

a:hover {
		color: #000000;
		text-decoration: none;
		}

.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "Tahoma", "Verdana", sans-serif;
		font-size: 10pt!important;
		line-height: 125%;
		background-color: #ffffff;
		color: #000000;
		}

.replytosubject {
		font-weight: bold;
		}

.commentreply {
		position: relative;
		margin: 10px;
		font-size: 9pt;
		font-family: "Tahoma", "Verdana", sans-serif;
		color: #000000;
		}

.commentbox {
		border-color: #cccccc;
		border-width: 1px;
		border-style: solid;
		padding: 10px;
		margin: 10px;
		background-color: #ffffff;
		}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #87cefa;
		}

.datesubjectcomment a:hover {
		color: #000000;
		}

.commentboxpartial {
		border-color: #cccccc;
		border-width: 1px;
		border-style: solid;
		padding: 10px;
		margin: 10px;
		background-color: #ffffff;
		}

.commentinfo {
		background-color: #ffffff;
		margin-top: 10px;
		width: 0%;
		}

.skiplinks {
		text-align: center;
		}
/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
		height: 15px;
		}
             .headerimage {
                         position: top center;
                         width:  700px;
                         height: 300px;
                         margin-left: auto;
                         margin-right: auto;
                         margin-bottom: 0 !important;
                         background-image: url("URL OF HEADER HERE");
                         background-repeat: no-repeat;
                               }

Before setting the layout in your own account, please upload the header to your own server and replace the link on the overrides. This is very important or the header won't show.

1. Manage > Customize
2. Select S2 under the Style System section. (For users who don't know HTML or CSS, or make only minor alterations). Click Save Changes.
3. Choose Flexible Sqares from the drop-down-menu. Save Changes.
4.Choose Custom Options and go to Sidebar:
-Show the sidebar? Yes
-Set sidebar position: Right
-Show the default user picture on the sidebar? No
-Show the blurb/free text in the sidebar? Yes
-Edit link list, Summary list and tags as you want. Save Changes.

5. Go to Custom CSS:
- make sure all of the drop down menus are set to NO
- Paste in the stylesheet into the Custom stylesheet box
Save Changes.

Header:
Can Be Found Here

LJ user icon by

_excentric_

EDIT: Please check the FAQ section before asking any question, because if it's been answered before, I will ignore it

Page 1 of 2
<<	[1] [2]	>>

(Post a new comment)

	clewless 2007-03-24 02:36 am UTC (link)
	Am I going crazy are do all the links go back to this page? lol (Reply to this) (Thread)

	vintagejoy 2007-03-24 02:46 am UTC (link)
	It's not just you. (Reply to this) (Parent)(Thread)

	juyung 2007-03-24 02:51 am UTC (link)
	...I think your links are kinda messed up. o-o; (Reply to this) (Thread)

	resplandor 2007-03-24 09:58 am UTC (link)
	Fixed. (Reply to this) (Parent)

	maruka_black 2007-03-24 03:19 am UTC (link)
	i love it, might use it soon. thanks!! (Reply to this) (Thread)

	resplandor 2007-03-24 09:59 am UTC (link)
	Thanks, if you would like to see the previews, the links are working now. (Reply to this) (Parent)

	ivles 2007-03-24 04:37 am UTC (link)
	BTW, you wrote CCS instead of CSS twice in the early part of this entry. And your preview links are empty. (Reply to this) (Thread)

	resplandor 2007-03-24 10:00 am UTC (link)
	Thanks for pointing out that, I edited this last night and I really don't know what happened to me haha, I messed up all the codes without noticing it. If you would like to see the preview and all, I already fixed it. (Reply to this) (Parent)

	georgia31 2007-03-24 07:14 am UTC (link)
	Lovely. I may use it soon. (Reply to this) (Thread)

	resplandor 2007-03-24 10:01 am UTC (link)
	Great! I'm glad you liked it, if you would like to see a bigger preview, I already fixed the links. (Reply to this) (Parent)

	lasamy 2007-03-24 10:28 am UTC (link)
	erm....I can't see the preview since it sends me back to this page. btw great choice of lyrics for the header...love the song ** (Reply to this) (Thread)

	resplandor 2007-03-24 10:36 am UTC (link)
	Argh this is frustrating, way too much editing on this entry, but hey, I fixed it now. :] Love that song, I have a bunch of versions of it and between you and me, I disagree with everyone that Jeff Buckley's version is the best, my favorite is The Dresden Dolls live version O: (Reply to this) (Parent)(Thread)

	interject 2007-03-24 07:24 pm UTC (link)
	awww...this was my wedding song! beautiful layout! (Reply to this) (Thread)

	colourfulgirl 2007-03-24 12:58 pm UTC (link)
	very nice layout! :) (Reply to this) (Thread)

	resplandor 2007-03-24 01:02 pm UTC (link)
	Thank-you! (Reply to this) (Parent)

	resplandor 2007-03-24 07:43 pm UTC (link)
	Thank you! It's wonderful that you got that song on your wedding, it really is an amazing song. Which version did you have? if you don't mind me asking (Reply to this) (Parent)(Thread)

	elle_one 2007-03-24 10:02 pm UTC (link)
	And you did it! It's gorgeous hon! I really like the fonts and colors, and the graphic is cute. Congrats for you #1 layout! :* (Reply to this) (Thread)

	elle_one 2007-03-24 10:04 pm UTC (link)
	ps: don't forget to friend me back here. ;) (Reply to this) (Parent)(Thread)

	mformilly 2007-04-03 07:16 am UTC (link)
	Love this and using it, with credit! Thanks a ton. ♥ (Reply to this)

	bombshell_dolly 2007-04-03 08:45 am UTC (link)
	Snagging. Will credit. Thanks :) Tis lovely. (Reply to this)

	origami_agent 2007-04-24 12:02 pm UTC (link)
	Borrowed the override codes with credit, hope you don't mind that I swapped a few colors out :) (Reply to this)

	asinglething 2007-05-08 07:18 pm UTC (link)
	amazing layout thx... just one question: how do I get rid of the calender in the sidebar? (Reply to this) (Thread)

	resplandor 2007-05-09 02:08 am UTC (link)
	You can get rid of the calendar in the "sidebar section" of the custom options. (Reply to this) (Parent)

EDIT: Please check the FAQ section before asking any question, because if it's been answered before, I will ignore it

About

Help

Get Involved

Legal

Store

LJ Labs

	1diosyncratic 2007-05-09 01:06 am UTC (link)
	lovelyyyy. taking & crediting. (Reply to this)

	sepiastars 2007-05-19 12:20 pm UTC (link)
	Beautiful layout, thanks for sharing it! Question: how can I add my own header image? Sorry, I suck at this stuff. Thanks for your help! (Reply to this) (Thread)

	resplandor 2007-05-19 01:04 pm UTC (link)
	You can check the FAQ section for guidelines on how to add your own header. (Reply to this) (Parent)(Thread)

	blackrose_023 2007-05-29 04:25 pm UTC (link)
	Lovely! Taking and will credit :3 Changing the header^^ Hope you don't mind. ^^ Thanks for posting! :3 (Reply to this)

	static_universe 2007-06-01 03:20 am UTC (link)
	I have a paid account, but don't want the custom comments. How do I get rid of that? (Reply to this) (Thread)

	angreifen 2007-06-03 07:37 pm UTC (link)
	Just lovely, especially the lyrics in the header. Definitely using it and of course with credit. :] (Reply to this)

	gymcatgrl 2007-06-10 07:05 pm UTC (link)
	Lovely! Using, will credit! :D (Reply to this)

	limefastener 2007-06-12 02:26 am UTC (link)
	wow.this is sooo nice. been searching for the perfect layout for 2 days already and this sure as hell takes the cake :) crediting. (Reply to this)

	miss_lollo 2007-06-16 08:00 pm UTC (link)
	Lovely layout...using with a different header. Will of course credit you! (Reply to this)

	prjctx3 2007-06-16 09:10 pm UTC (link)
	using=] this is wonderful. (Reply to this)