style_system | Converting a Flexible Squares Layout Into S2

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? :)

Flat | Top-Level Comments Only

From:

seleneheart

LJ has changed the source code for Flexible Squares since that post, because nowadays, you can click on the header to get to the post over there. You might want to get a newer version of FS, which you can do by going to the developer area.

Managing tags, if I understand what you mean, doesn't have anything to do with the layout. If you mean the tags page, like DW has on most layouts, then you can add the code to the theme layer to add a link to that tag page for your community.

If the tag module won't appear through the wizard (which it does on LJ, so I'm not sure why it wouldn't over here), you would have to modify your theme layer, using the same hacks that we used to use on Flexible Squares before LJ updated the wizard.

If you need links for the tutorials from Flexisquares, let me know and I'll try to poke around for them.

boundbooks

Hm, I snagged this version (http://www.livejournal.com/customize/advanced/layersource.bml?id=4472608), and when I tried to follow the tutorial (http://parapsychic.dreamwidth.org/740.html) to make it a custom layer, the complier crashed in horrifically messy ways. D:

I may go with what ninetydegrees said below, and re-build it from Dusty Foot, if the older version lacks the functionality and the newer version won't compile. =/

Thank you for letting me know that the old version was out of date! It's always good to know what's causing an error in the layout. :D

Frankly, that's what I've done in the past, when I mirrored JC-Ficathon over here. I used Bloggish for the LJ version, and Palletable over here.

ninetydegrees

To me, your best bet is taking the closest style DW has (and that'd be Dusty Foot for me) and trying to make it look like this one, first just by changing colors, then by adding custom CSS when needed (and asking for specific stuff if you need help). That would much simpler for me than trying to make FS work correctly here.

Edited Date: 2011-10-23 10:29 pm (UTC)

I think I'm going to try this path, as taking the newer flexible squares resulted in the complier exploding with errors. Thank you for suggesting which layout is the closest to my desired end result! :D

foxfirefey

Another resource that might come in handy are these tutorials on browser development tools:

http://wiki.dwscoalition.org/notes/Browser_Developing_Tools

They might help you figure out where exactly you need to replicate those CSS rules, and how they're being applied on the original.

Edited Date: 2011-10-23 11:53 pm (UTC)

Awesome! :D

Thank you very much!

Dreamwidth style system discussion

Converting a Flexible Squares Layout Into S2

Converting a Flexible Squares Layout Into S2

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags