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:

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.

goodbyebird

Thanks so much <3

Dreamwidth style system discussion

Looking for some layout help

Looking for some layout help

no subject

no subject

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags