style_system | Looking for some layout help

Hi,
I recently ported Flexible Squares + a layout from livejournal to use at

3weeks4dreamwidth. Try as I might, I'm having a hard time adjusting some things, and since I'm on a bit of a deadline (wanted to start promoting on the 1st) I hoped somebody here might have the answers.

My two big issues are:
~~the font in the comments is tiny~~
the first line of every comment is partially covered up by the poster's icon, as is the second like of entry titles.

Would also love it if:
the entry titles could be links
have icons link to the user's userpics when clicked
change the color of italics
get rid of the calendar at the top

CSS

/* Cleaned CSS: */
      /* Title: Playtime
Creator: Brutal at mixedfeeling
Style: Flexible Squares S2 */
 
 
BODY{
margin-top: 0px;
margin-bottom: 0px;
background-color: #C0ADDB;
background-image: url("http://i.imgur.com/KbcW9p9.png"); 
background-repeat: repeat;
background-position: ;
background-attachment: fixed;
text-align: left;
font-size: 11pt;
color: #404040;
font-family: "arial", sans-serif;
}
 
a, a:link, a:visited {
font-family: "calibri" Helvetica, sans-serif;
cursor: default;
color: #fe6b6b;
text-transform: ;
text-decoration: none;
}
 
a:hover{
font-family: "calibri" Helvetica, sans-serif;
cursor: default;
color: #f4476c;
font-weight: none;
text-transform: ;
letter-spacing: 0px;
text-decoration: none;
}

b{
color: #fe6b6b;
}

I{
color: #d7ff6c;
}

s{
color: #bb37f9;
}
 
blockquote {
margin: 5px 5px; 
padding: 4px; 
color: #764e37;
font-size: 12pt;
background: #dff2ff;
background-repeat: repeat;
text-align: justify;
}
 
#content {
width: 650px;
background: #fff;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
border-left: 6px solid #7F94B0;
border-right: 6px solid #7F94B0;
}
 
#maincontent {
margin: 5px 0px 0px 0px;
}
 
/* sidebar */
 
#sidebar {
width: 590px;
margin-left: 15px;
padding: 15px;
background: #fff;
border-bottom: dashed #d7ff6c 1px;
color: #939393;
font-family: calibri;
font-size: 11pt;
line-height: 10pt;
text-align: justify;
float: center;
}
 
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-size: 11pt;
font-family: calibri;
color: #939393;
text-decoration: none;
}
 
div#sidebar a:hover {
font-size: 11pt;
font-family: calibri;
text-decoration: none;
color: #000000;
}
 
 
.defaultuserpic {
display: none;
float:left;
margin: 0px 5px 0 5px;
background-color: #edd4cc;
}

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

.sbarbody {
width: 200px;
padding: 0px 3px 0px 3px;
}

.sbarbody2 {
position: absolute; 
width: 380px; 
padding: 0 10px 5px 10px;
margin-left: 220px;
}

#sidebar_tags {
margin-top: -110px;
position: absolute; 
width: 170px; 
height: 100px;
margin-left: 190px;
overflow: auto;
display: none;
}

#sidebar_tags a{
display:block;
font-family: "georgia", Helvetica, sans-serif;
font-size: 12px;
}

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

.sbarcalendar {
padding: 1px;
border: 1px solid #ddd;
background: #FEFEFE;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
}

.sbarcalendarposts {
padding: 1px;
border: 1px solid #ddd;
background: #dddddd;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #73c8cb;
font-size: 8pt;
}

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

li.sbaritem {
padding: 5px 3px 5px 5px;
list-style: none;
background-color: ;
background-image: url();
		background-repeat: no-repeat;
border-bottom: 1px #eeeeee solid;
}

li.sbaritem a{
font-family: "georgia", Helvetica, sans-serif;
font-size: 20px;
}

li.sbaritem:hover {
font-family: "georgia", Helvetica, sans-serif;
font-size: 14px;
background-image: url();
		background-repeat: no-repeat;
}

li.sbartitle {
width: 190px;
list-style: none;		
margin-top: 0px;
margin-left: -3px;
text-align: left;
font-weight: normal;
padding: 10px 5px 10px 15px;
color: #ffffff;
font-family: "arial" Helvetica, sans-serif;
font-size: 8pt;
background: #000000;
border-bottom: 3px solid #f1f1f1;
border-top: 3px solid #f1f1f1;
text-transform: uppercase;
letter-spacing: 0px;
display: none;
}

ul.ljtaglist li  {
padding: 0px;
margin: 5px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.nav a {border-bottom: 0px solid #e6dcd6; border-left: 3px solid #1d1d1d; color: #555555; display: inline; font-family: tahoma; font-size: 9pt; text-transform: lowercase; padding: 3px; line-height: 10px; }
.nav a:hover {color: #9f8449; text-decoration: none; }
.nav br {display: none;}
 
/* header, footer */
 
#header { 
  width: 610px;
background:#d7ff6c;
  padding: 20px;
  text-transform: lowercase;
  text-align: center;   
  font-size: 10pt; 
font-family: "calibri" Helvetica, sans-serif;
font-weight: none;
  color: #fff;
  }
 
#footer { 
  width: 630px;
  padding: 10px; 
  text-align: right; 
  text-transform: lowercase; 
  letter-spacing: 0px; 
  font-size: 10pt; 
  color: #e2e7e1;
background: #fe6b6b;
  z-index: 100; 
font-family: "calibri" Helvetica, sans-serif;
  }
 
#header a {
font-size: 12pt;
color: #000000;
}

div#header a[href$=".livejournal.com/"] {
color: #fff;
background: #00c1d5;
padding: 5px;
}
 
div#header a[href*="/calendar"] {
color: #fff;
background: #fe6b6b;
padding: 5px;
}

div#header a[href*="/friends"] {
color: #fff;
background: #bb37f9;
padding: 5px;
}

div#header a[href*="/profile"]{
color: #fff;
background: #00c1d5;
padding: 5px;
}	
 
div#footer a, div#footer a:link, div#footer a:visited { 
font-family: "calibri" Helvetica, sans-serif;
  color: #fff; 
  font-size: 10pt; 
  padding: 0px 3px 3px 3px;
  text-transform: ;
  border-top: 0px solid #d3e2eb;
  }
 
div#header li.view:hover, div#header a:hover {
background-color:#232323; 
color:#ffffff;
} 
 
div#footer a:hover {
font-family: "calibri" Helvetica, sans-serif;
  color: #000; 
  font-size: 10pt; 
  padding: 3px 3px 3px 3px;
  text-transform: ;
  }
 
ul.navheader { 
  padding: 0; 
  margin: 0; }
 
ul.navheader li  {
	display: inline;
 }
 
div#header li.view { 
font-size: 12pt;
background: #00c1d5;
padding: 5px;
  }
 
#footer .viewing { 
  display:; 
  }
 
ul.navfooter {
  padding: 0px;
  margin: 0px;
  }
 
ul.navfooter li {
  display: inline;
  margin: 0 0px 0 0px;
  }
 
.clearfoot {
  display: none;
  clear: both;
  }
 
/* title, substitle */
 
.title	{
display: none;
margin-top: 0px;
padding: 5px;
text-align: center;
color: #24afd2;
font-family: "arial", sans-serif;
font-size: 24pt;
letter-spacing: 0pt;
line-height: 10pt;
}
 
.subtitle {
display: none;
text-align: left;
color: #FEFEFE;
font-family: "Microsoft Sans Serif", sans-serif;
font-size: 1pt;
letter-spacing: 2pt;
}
 
/* tags page, tags */
 
.ljtaglist { 
list-style-type: none; 
padding: 0px; 
margin: -1px 20px 0px 20px; 
margin-left: 70px; width: 50%; 
text-transform: uppercase;
text-align: left; 
} 
 
.ljtaglist li { 
border-bottom: 1px solid #cccccc; 
padding: 5px 2px 5px 20px; 
color: #888888; 
} 
 
H2 { 
margin: 30px 0px 10px 90px; 
text-align: left; 
padding: 2px 2px 2px 10px; 
line-height: 12px; 
font-weight: normal; 
font-style: italic; 
font-size: 12px; 
text-transform: uppercase;
letter-spacing: 0px; 
font-family: arial; 
color: #888888; 
background: url('') 0px 2px no-repeat; 
} 
 
ul.ljtaglist {
color: #bbb;
font-family: "arial", Helvetica, sans-serif;
font-size: 10pt;
padding: 8px 8px 8px 12px;
border: 0px solid #FEFEFE;
background: #FEFEFE;
text-align: left;
margin-right: auto;margin-left: auto; padding: 35px;
}
 
.ljtags {
margin-top: 12px;
padding: 4px;
color: #333;
font-size: 10pt;
font-weight: normal;
border-bottom: 1px solid #efefef;
background: url(REPLACE) 0px 7px no-repeat;
padding-left: 14px;
}
 
.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #99668f;
font-size: 10pt;
text-transform: ;
font-weight: ;
}
 
 
/* subcontent, entry */
.subcontent {
padding: 0px; 
background: #fff;
}

.entry{
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
background: #ffffff;
color: #939393;
font-family: "Calibri" Helvetica, sans-serif;
font-size: 12pt;
text-align: justify;
}

.entry_text  {
background: #ffffff;
}
 
.entry ul li {
padding-left: 10px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
 
.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
 
/* userpic, userpic friends */
 
.userpic {
display: ;
position: relative;
float: left;
padding: 10px;
margin-right: 0px;
margin-left: 6px;
margin-top: 48px;
z-index: 15;
background-color: transparent !important;
border: 0px solid #d4d4d4;
background-image: url('');
background-repeat: repeat;
border: 0px solid #f7f7f7;
}
 
.userpicfriends {
        position: relative;
        float: left;
        background-color: transparent !important;
        padding: 10px;
margin-right: 0px;
margin-left: 6px !important;
        margin-top: 48px;
        z-index: 15;
        border: 0px solid #d4d4d4;
        text-align: right;
        font-family: "arial", sans-serif;
        font-size: 8pt;
        z-index: 15;
display: ;
        }
 
.userpic img, .userpicfriends img{ background:#bb37f9; padding:5px; border-width: 3px;
border-color: #bb37f9;
border-style: solid;
width: 75px;
height: 75px;}
 
 
.userpicfriends font {
color: #d6d5d5 !important;
text-transform: uppercase;
}
 
.userpicfriends {font-size: 3; align: left;}
 
.userpicfriends a{ display: ;}
 
.userpicfriends br {
display: block;
height: 0;
}
 
/* date, subject, comments, currents */
 
.date{
position: relative;
left: -100px;
text-align: left;
padding: 10px 0px 0px 0px;
color: #ccc;
font-family: "Trebuchet Ms" Helvetica, sans-serif;
font-size: 8pt;
text-transform: uppercase;
letter-spacing: 1px;
}

.subject {
position: relative;
left: -100px;
padding-left: 0px;
padding-top:2px;
padding-bottom:12px;
margin-right: -10px;
font-weight: normal;
padding-bottom: 2px;
color: #939393;
font-family: verdana;
font-size: 14pt;
font-style: ;
letter-spacing: 0px;
text-align: left;
}
 
.subject a, .subject a:link, .subject a:visited {
font-family: Calibri;
color: #939393;
text-transform: uppercase;
}
 
.subject a:hover {
color: #999;
}
 
.datesubject {
margin-left: 15px;
margin-right: 15px;
padding: 0px;
border-bottom: 1px solid #EEE;
background-color: #ffffff;
}
 
 
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #777777;
font-size: 9pt;
text-transform: ;
}
 
.currents, .currentmood, .currentmusic, .currentlocation {
color: #777777;
font-size: 9pt;
text-transform: ;
}
 
 
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #4cb5d3;
font-size: 9pt;
text-transform: ;
}
 
.currentlocation a:hover, .ljtags a:hover {
color: #000000;
font-size: 9pt;
text-transform: ;
}
 
 
.currentlocation {
	height: 16px; 
	background: url('http://img28.imageshack.us/img28/9228/homee.gif') 4px 4px no-repeat;
padding-left: 18px;
	}
 
.currentmood {
	background: url('http://img28.imageshack.us/img28/5507/smilie.gif') 4px 4px no-repeat;
padding-left: 18px;
	}
 
.currentmusic {
	height: 18px; 
	background: url('http://img241.imageshack.us/img241/2895/notee.gif') 4px 4px no-repeat;
padding-left: 18px;
	}
 
.comments {
background: #00c1d5;
font-family: "arial", sans-serif;
font-size: 12pt;
text-align: left;
font-weight: normal;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
margin-top: 0px;
padding-left: 5px;
color: #f3f3f3;
text-transform:;
letter-spacing: 0px;
}
 
div.comments a, div.comments a:link, div.comments a:visited {
font-family: "calibri", sans-serif;
color: #fff;
text-transform: ;
}
 
div.comments a:hover {
color: #2d2d2d;
text-transform: ;
}
 
/* other */
 
.clear {
display: none;
height: 0px;
}
 
.skiplinks {
text-transform: lowercase;
text-align: center;
margin: 08px 0 08px 0;
padding: 12px;
color: #888888;
border: 1px solid #bbb;
background: #FDFDFD;
}
 
/* header */

.headerimage {
position: relative;
width: 650px;
height: 358px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px; 
background-image: url('https://goodbyebird.dreamwidth.org/file/111314.png'); 
background-repeat: no-repeat;
border-left: 6px solid #7F94B0;
border-right: 6px solid #7F94B0;
}
 
.separator {
background:transparent;
padding: 3px;
}
 
.clearfoot {
display: none;
}
 
/* comment page */
 
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
color: #c9c9c9;
}
 
.userpiccomment {
position: relative;
top: -10px;
padding: 4px;
margin: 0px 10px -20px 0px;
z-index: 15;
float: left;
height: 100px;
width: 100px;
background:#f8f8f8; 
}
 
.box {
clear: left;
color: #f8f8f8;
}
 
input, textarea {
background-color: #ffffff;
padding: 3px;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #333030;
border: 1px solid #ccc;
		}
 
textarea.textbox  {
width: 100% !important;
border: 1px solid #ccc;
}
 
.reply	{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Georgia", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #ffffff;
color: #3f3e3e;
}
 
.replytosubject {
font-weight: bold;
}
 
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #3f3e3e;
}
 
.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
 
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
 
.commentinfo {
background-color: #ffffff;
margin-top: 12px;
width: 100%;
}
 
.skiplinks {
text-align: center;
padding: 10px;
color: #888888;
background-color: #fff;
}
 
/* tiny icons */

/* Generated by Malionette's Tiny Icon Generator 
   http://malionette.net/generator/tinylite.html */

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/2aJvs.png) no-repeat !important; padding: 16px 0 0 18px !important; }
span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/vLyZg.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/U46yKUE.png) no-repeat !important; padding: 13px 0 0 12px !important; }

Many thanks for any help <3

Flat | Top-Level Comments Only

From:

presumenothing

Not familiar enough with DW theme coding to figure out the rest offhand, but here's fixes for two things at least:

.commentreply {
position: relative;
margin: 10px;
font-size: 12px; <- increase this for comment font size (or remove this one line entirely)

I{
color: #d7ff6c; <- change this for italic colour

ETA: A bit of a hack, but adding "#sidebar_calendar { display: none; }" should hide the calendar area from view.

Edited Date: 2022-03-30 03:51 pm (UTC)

goodbyebird

Thanks so much! That takes care of the biggest issue <3

sporky_rat

A lot of the LiveJournal styles won't work well here, we've updated the style system and quit using some of what they were using.

I highly recommend going through the Official styles and seeing if there's one that's closest to what you want.

I know I know, I was seduced by the cat! It needed to be holding the dreamwidth symbol, and now here I am...

seleneheart

I second that advice. I clung to Flexible Squares for a long time, but the Dreamwidth official styles have many more features, and frankly the coders at LJ haven't been keeping up with current coding for a long time now.

momijizukamori

For the issue with text getting covered up by the icon, look for the section under .userpiccomment that says margin: 0px 10px -20px 0px; and change that -20px to something else: -10px seems to look okay on my display, but you can play with it some to figure out what works.

The other asks are all going to require editing the S2 layer, not the CSS, and are thus a lot more complicated to do.

Thanks so much <3

Dreamwidth style system discussion

Looking for some layout help

Looking for some layout help

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