I just recently decided to tackle the task of changing my own layout instead of having a friend do it for me. I found
carriep63's "Lime" layout over at
freelayouts and thankfully, it's almost exactly the way I want it, so I don't have to deal with trying to change too many things. I do, however, have a few questions about things I'd like changed.
Here's what I have so far. I changed a few things about the text (color, size and font) but that's it.
body{
background:#efefef url(
http://i12.photobucket.com/albums/a235/hdicicco/lime-pattern.jpg);color:#5f5f5f;
font-family:georgia;
}
#container{
width:600px;
background:#fff;
border:1px solid #DFDFDF;
}
#alpha{
width:400px;
padding-top:200px;
}
#alpha-inner{
padding:0 5px;
}
#beta{
width:180px;
padding-top:200px;
padding-left:20px;
}
#banner{
display:none;
}
body{
font-size:10px;
}
.module-content{
padding:0;
margin:0;
}
.module-viewlinks{
position:absolute;
top:10px;
left:-400px;
width:600px;
height:165px;
background:url(
http://i12.photobucket.com/albums/a235/hdicicco/lime.jpg) no-repeat bottom left;
white-space:nowrap;
padding:0;
padding-left:10px;
}
.module-viewlinks ul{
height:20px;
}
.module-viewlinks li{
list-style-type:none;
display:inline;
}
.module-viewlinks a{
display:block;
float:left;
padding-right:10px;
color:#000;
text-decoration:none;
white-space:nowrap;
}
.module-calendar{
position:absolute;
top:30px;
text-align:left;
background:#F2F2F2;
height:125px;
color:#bbb;
padding:0;
padding-top:20px;
margin-left:-20px;
width:200px;
}
a{
color:#85B406;
text-decoration:none;
}
h1, h2, h3{
margin:0 !important;
padding:0 !important;
font-size:12px;
}
.date-header{
font-family:georgia;
font-size:10px;
color:#5F5F5F;
background: url(
http://i12.photobucket.com/albums/a235/hdicicco/lime-date.jpg) no-repeat left;
padding-left:15px !important;
}
.module-content{
padding-bottom:10px !important;
}
.module-header, .entry-header{
color:black;
}
.entry-userpic img{
width:100px;
height:100px;
}
p.poster img {
display:none;
}
.module-photo{
display:none;
}
.entry-footer{
margin:0px;
color:#5F5F5F;
border-bottom:1px solid #ccc;
}
.entry-footer a{
display:block;
float:left;
margin-right:8px;
}
.separator{
display:none;
}
.entry-header{
padding-left:10px !important;
}
.entry-userpic{
float:left !important;;
}
.entry-userpic a{
display:block;
}
.entry-body{
padding-bottom:10px;
}
.ljtags{
background:#F8FFDF;
border:1px solid #ACDF0D;
width:auto;
float:left;
padding:5px;
margin:5px 0;
}
.entry{
margin-bottom:30px;
}
.module li{
background: url(
http://i12.photobucket.com/albums/a235/hdicicco/lime-bullet.png) no-repeat left;
padding-left:12px;
}
.module-viewlinks li{
background:none !important;
padding:0 !important;
}
Here's my journal, so you can see how it looks now:
http://princesshanhan.livejournal.com/ I'm wondering how I can go about changing a few more text colors - I'd like the headers for the sidebar and the navigations links at the top to be the same grey (#5F5F5F) as the other text.
Is there a way that I can have the tags be listed not as one per line, but all together and separated by commas? If this isn't clear, I was hoping to have it look like this:
http://nichtliebte.livejournal.com/ Is there a way to remove the "Page Summary" module from the sidebar? I don't use subjects for me personal entires, so seeing 20 "no subject" listings is somewhat visually cluttering.
Finally, and this is very minor, but I noticed something in the overrides called "separator". Am I correct in assuming I can use this to display some sort of graphic divider between entries? What is the proper way to go about doing so?
Thanks so much for any advice/help, and sorry if I've overlooked a tutorial staring me in the face somewhere. Cheers!