style_system | Converting a Flexible Squares Layout Into S2 (Reply)

I think I got the terminology right in the title, but I'm unsure. My tricky problem is as follows:

I haven't dabbled much at all into CSS, but I'm part of a mod-team which wants to mirror a community on LJ and DW. Over on LJ we have a very pretty layout:

dhr_advent which was made by a volunteer (who does not have a DW account). I would like to use this same layout over on DW.

I used

parapsychic's Importing Flexible Squares journal style to Dreamwidth, and was able to get the visuals to work: See

dhr_advent

However, all the little things that make Dreamwidth enjoyable are horribly busted. I assume that this is because that's all built into the DW S2 stuff, and not LJ's flexible squares. Right now, I can't manage tags, I can't click headers to open entries, the tag module isn't appearing on the front page, and who knows what else.

What's my best bet to mimic as closely as possible the LJ lay-out, but in DW? I'm aware of two resources:

Conversion Guide: Flexible Squares
http://wiki.dwscoalition.org/notes/Conversion_Guide:_Flexible_Squares

S2 CSS
http://wiki.dwscoalition.org/notes/S2_CSS

/* BY: Minty_Peach
STYLE: S2 Flexible Squares (Emily Browning)
WORKS WITH: Free, Paid & Sponsored accounts
BROWSER: Firefox and IE (not sure about others)
DO NOT REPOST AS YOUR OWN */

BODY	{
margin-top: 40px;
background-color:#cfcfcf;
background-image: url('http://i51.tinypic.com/t8910w.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #5d5d5d;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

a, a:link, a:visited { 
text-decoration: none;
color: #a20016; 
padding: 0px;
}

a:hover { 
background: FEFEFE;
color: #000000;
background-image: url(''); 
padding: 0px;
}

p, td, blockquote { 
font-size: 10px; 
}

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

#content {  	
width: 820px;
margin-left: auto; margin-right: auto;				        
background-color: #cfcfcf;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
border-top: dashed 1px #bbbbbb;
border-side: 0px;
padding: 9px;
text-align: justify; }

#maincontent {	 	
margin-top: 80px;
padding: 10px;
font-family: "Verdana", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: #cfcfcf;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
color:#777777;
border-style: dashed;
border-color:#dfdfdf;
border-width: 0px;
margin-right:0px;
margin-left: 270px;
margin-top:40px;
text-align: justify;
}

#header {
width: auto;
height: 30px;
margin: 0px;
padding: 5px;
color: #ad9e3a;
background-color: transparent;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
font-weight: lighter;
font-family: Verdana;
font-size: 25px;
text-transform: lowercase;
letter-spacing: 2px;
text-align: center;
}

#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 12px;
font-weight: lightest;
font-family: Verdana;
color: #999999;
letter-spacing: 2px;
background-color: transparent;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
}

#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: #cfcfcf;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
border-width: 0px;
font-size: 9px;
line-height: 10pt;
font-family: "Verdana", sans-serif;
color: #666666;
width: 265px;
float: left;
text-align: justify;
}

/* header -- links to views; title of journal; subtitle of journal */	
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #88A91E;
padding: 5px;
font-size: 17px;
font-family: Verdana;
font-weight: normal;
text-decoration; none;
text-transform: lowercase;
}
div#header a:hover {
color: #a20016;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: lowercase;
}

div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #444444;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}

div#footer a:hover {
color: #a20016;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}

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

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

.title	{
text-align: center;
color: #a20016;
font-family: "Verdana", sans-serif;
font-size: 0px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px;
}

.subtitle {
text-align: center;
color: #fefefe;
font-family: "Verdana", sans-serif;
font-size: 0px;
letter-spacing: 2pt;
text-transform: lowercase;
}

/* footer */

ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}

/* SIDEBAR */ 	
			
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "Verdana", sans-serif;
color: #88A91E;
}
	
div#sidebar a:hover {
color:#a20016;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
	
.defaultuserpic {

text-align: center;
padding: 5px;
}

.sbarheader {
padding: 0px 5px 0px 5px;
color: #000000;
text-align: center;
}
	
.sbarbody {
padding: 0 2px 0 2px;		
}
	
.sbarbody2 {
padding: 0 2px 0 2px;
}
		
table.calendar {
margin-right: auto;
margin-left: auto;
}
		
.sbarcalendar {
border-color: #cccccc;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
	
.sbarcalendarposts {
border-color:  #bbbbbb;
border-width: 1px;
background-color:#CCCCCC;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
	
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem {
margin: 5px 2px 2px 2px;
padding: 2px 2px 2px 7px;
list-style: none;
background: #fefefe;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
border-left: solid 0px #88A91E;	
border-bottom: dashed 1px #dcdcdc;
border-right: dashed 0px #dcdcdc;
border-top: dashed 0px #dcdcdc;	
}

li.sbaritem:hover {
background: #fefefe;
border-left: solid 4px #a20016;
}

li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 2px;
list-style: none;		
margin-bottom: 1px;
margin-top: 0px;
color:#999999;
border-top: dashed #BBBBBB 0px;
border-left: dashed #BBBBBB 0px;
border-bottom: dashed #BBBBBB 1px;
border-right: dashed #BBBBBB 0px;
font-weight: none;
font-family: "Verdana", sans-serif;
text-transform:uppercase;
font-size: 10px;
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
letter-spacing: 1pt;
}

/* MAINCONTENT */

.subcontent {		
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
}
	
.entry	{
margin: 0px 3px 2px 2px;
padding: 2px;
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
color:#666666;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: justify;
border-width: 0px;
border-color: #DFDFDF;
line-height: 10pt;
border-style: dashed;
border-left: dashed 0px #C8E9E9;
border-right: dashed 0px #C8E9E9;
border-bottom: dashed 0px #C8E9E9;
}
		
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
		
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.userpic {
position: relative;
float: left;
background-color: ;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
padding: 5px;
margin-right: 0px;
margin-left: 5px;
z-index: 15;
border-width: 0px;
border-color: #FEFEFE;
border-style: solid;
}
		
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
background-color: #eeeeee!important;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
border-width: 0px;
border-color: #FEFEFE;
font-family: "Verdana", sans-serif;
font-size: 10px;
z-index: 15;
}
	
.date {		
line-height: 200%;		
top: 5px;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #666666;
letter-spacing: 2px;
font-weight: none; 
text-transform:lowercase;
text-align:left;
letter-spacing: 0pt;
background-color: transparent;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
}
	
.subject {			
padding: 2px;
font-weight: none; 
color:#a20016;
font-family: "Verdana", sans-serif;
border-bottom: 1px #BBBBBB dashed;
text-transform:uppercase;
text-align:left;
font-size: 10px;
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
letter-spacing: 3pt;
}
	
.subject a, .subject a:link, .subject a:visited {
color: #a20016;
}

.subject a:hover {
color: #555555;
}	
	
::-moz-selection {
background: #749CF8;
color: #ad9e3a;
}

.datesubject {				
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
padding: 2px;
}

.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #555555;	
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: right;
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
font-weight: lighter;
border-top: dashed 1px #999999;
padding: 5px;
position: relative;
top: 20px;
}

.separator {
height: 25px;
}
		
div.comments a, div.comments a:link, div.comments a:visited{
color: #666666;
border-left: solid 0px #88A91E;	
border-bottom: solid 0px #88A91E;
border-right: solid 0px #88A91E;
border-top: solid 0px #88A91E;	
font-size: 10px;
font-weight: lighter;
padding:5px;
}

div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #000000;
border-left: solid 0px #a20016;
border-bottom: solid 0px #a20016;
border-right: solid 0px #a20016;
border-top: solid 0px #a20016;	
background: ;
background-image: url(''); 
padding:5px;
}

.ljtags {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #aaaaaa;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}

.headerimage {
position: relative;
width: 840px;  
height: 300px;  
margin-left: auto;
margin-right: auto;
margin-bottom: 0px; 
background-image: url('http://i54.tinypic.com/msodw6.png'); 
background-repeat: no-repeat;
background-position: center;
border-color: #FFFFFF;
border-width: 1px;
}

/* JOURNAL STYLE COMMENT PAGES - PAID USERS ONLY */

.datesubjectcomment {				
background-color:#ad9e3a;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
padding: 5px;
margin-top: 20px;
}	
		
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #d4dce8;
background-color: #d4dce8;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
	
.box {
border-style: dashed;
border-width: 1px 1px 1px 1px;
border-color: #999999;
padding: 8px;
clear: right;
}

input, textarea {
background-color: #FEFEFE;
color: #000000;
}
		
textarea.textbox  {
width: 100% !important;
}
	
.reply	{
position: relative;
margin: 20px 20px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
line-height: 100%;
background-color:#FFFFFF;
color: #666666;
}
		
.replytosubject {
font-weight: none;
}
		
.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "Verdana", sans-serif;
color: #666666;
}
		
.commentbox {
		
border-color: #B4DADA; 
border-width: 1px; 
border-style: dotted; 
padding: 10px; 
margin: 10px; 
background-color: #ffffff;
}
		
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #333333;
}
		
.datesubjectcomment a:hover {
color: #888888;
}
	
.commentboxpartial {
border-color: #999999; 
border-width: 1px; 
border-style: solid; 
padding: 9px; 
margin: 9px; 
background-color: #d4dce8;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
}

.commentinfo {
background-color: #FEFEFE;
background-image: url('http://i56.tinypic.com/20jpqbc.png');
background-repeat: repeat;
margin-top: 10px; 
width: 100%;
}

Are these my best resources for doing a conversion? Is there another resource or write-up I should know? Any tips for a beginner CSS person? Am I completely missing something that I should know? :)

Dreamwidth style system discussion

Converting a Flexible Squares Layout Into S2 (Reply)

Converting a Flexible Squares Layout Into S2

Profile

April 2025

Links

Most Popular Tags

Style Credit

Expand Cut Tags