New Layout - 2011

Oct 16, 2011 13:39

I've finally finished coding my layout, and what a pain in a bum it has been. sam_doc has been exceedingly helpful, as always, when I found a major problem in the layout- it completely messing up when I opened it in firefox. I don't use firefox but I know lots of people do, and I'd hate for them to turn up and not be able to navigate around the page. Anyway, we solved it! <3

Oh, but please let me know if something doesn't look right to you- *offers cookies*

vicodin_martini vicodin_martini vicodin_martini

It's not that autumny, but it's warmer than the blues and I'm pleased with how it all flows now. I've managed to edit through my tags that were based on my fanart- as that had just been one big heap of mess, and now it isn't! Hurray!

It also means that my old layout is up for grabs if anyone wants it.




BODY {
margin-top: 40px;
background-color:#c4d8e5;
background-image: url('http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/backgroun3.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
font-size: 11px;
color: #555555;
font-family: "Trebuchet MS", sans-serif;
}

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

a:hover {
text-decoration: none;
color: #999999;
background:;
background-image: url('');
padding: 0px;
}

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

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

#content {
width: 688px;
margin-left: 150px;
margin-right: auto;
background-color: #FFFFFF;
padding: 5px;
text-align: justify;
border-style: solid;
border-color: #ffffff;
border-width:1px;
}

#maincontent {
margin-top: 40px;
padding: 5px;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #FFFFFF;
color:#555555;
border-style: dashed;
border-color:#ffffff;
border-width: 0px;
margin-right:10px;
margin-left: 10px;
margin-top:50px;
text-align: justify;
}

#sidebar {
display: none;
padding-top: 20px;
margin-top: 5px;
background-color: #FEFEFE;
border-width: 0px;
font-size: 11px;
line-height: 8pt;
font-family: "arial", sans-serif;
color: #555555;
width: 200px;
float: right;
text-align: justify;
}

#header {

width: 100%;
padding: 0px 0px 0px 0px;
margin-top: 0px;
text-align: center;
font-family: "arial", sans-serif;
text-transform: lowercase;
font-size: 16px;
font-weight: none;
letter-spacing: 2px;
background-color: #FFFFFF;
border-width: 0px;
color:#444444;
line-height: 10px;
font-weight: lighter;
}

#footer {
width: 100%;
float: center;
text-align: center;
font-family: tahoma,georgia;
text-transform:uppercase;
font-size: 10px;
font-weight: none;
letter-spacing: 1px;
background-color: #FFFFFF;
border-width: 0px;
color: #444444;
z-index: 100;
clear: both;
}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer
a:visited {
color: #003663;
padding: 10px;
}

div#header a:hover, div#footer a:hover {
color: #58b1ec;
background:;
background-image: url('');
padding: 10px;
}

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

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

.title {
text-align: center;
color: #ffffff;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
text-transform: uppercase;
}

.subtitle {
text-align: center;
color: #ffffff;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
line-height: 0pt;
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{
color: #666666;
text-decoration: none;
background-color:;
}

div#sidebar a:hover {
color:#009999;
text-decoration: none;
background-color:;
}

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
color: #FEFEFE;
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-width: 0px;
border-style: solid;
border-color: #cccccc;
font-family: "arial", sans-serif;
font-size: 10px;
text-align: center;
}

.sbarcalendarposts {
background-color:#bbbbbb;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
border-width: 0px;
border-color: #bbbbbb;
}

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

li.sbaritem {
list-style: none;
margin-top:5px;
padding-left: 15px;
padding-right: 10px;
}

li.sbartitle {
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#BED870;
border: 0px;
font-weight: none;
font-family: "arial", sans-serif;
text-transform: uppercase;
font-size: 11px;
background-color: #FEFEFE;
letter-spacing: 1pt;
}

/* maincontent -- entry, reply pages */
.subcontent {
background-color: #FEFEFE;
}

.entry {
margin: 5px 5px 5px 5px;
padding: 2px;
color:#666666;
background-color: #FFFFFF;
font-family: "Trebuchet MS", sans-serif;
text-align: justify;
line-height: 10pt;
font-size: 11px;
border-style: dashed;
border-width: 0px;
border-color: #DFDFDF;
}

.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: #c4d7e5;
background-image: url('');
background-repeat: repeat;
padding: 5px;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border-width: 0px 0px 5px 0px;
border-color: #003663;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 9px;
z-index: 15;
border-style: solid;
border-width: 0px 2px 0px 0px;
border-color: #003663;
background-color: #c4d7e5 !important;
background-image: url('');
background-repeat: repeat;
}

.date {
line-height: 200%;
top: 5px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #555555;
text-align: center;
letter-spacing: 2px;
letter-spacing: 1pt;
font-weight: none;
text-transform:lowercase;
background-color: transparent;
}

.subject {
padding: 2px;
font-weight: bold;
font-size: 12px;
color:#003663;
font-family: "arial", sans-serif;
text-align: center;
border-bottom: 2px #003663 solid;
margin-left: 4px;
text-transform:uppercase;
background-color: #FEFEFE;
background-image: url('');
background-repeat: repeat;
letter-spacing: 2pt;
}

.subject a, .subject a:link, .subject a:visited {
color: #58b1ec;
}

.subject a:hover {
color: #555555;
}

::-moz-selection {
background: #ED757E;
color: #333333;
}

.datesubject {
background-color: #ffffff;
padding: 2px;
}

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

.comments {
font-family: "arial", sans-serif;
font-size: 14px;
text-align: center;
font-weight: none;
padding: 10px;
position: relative;
top: 10px;
border-top: 1px #999999 dashed;
background-color: #FEFEFE;
text-transform:uppercase;
letter-spacing: 2pt;
}

/* for formatting separators between entries */
.separator {
background: transparent;
height: 25px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #003663;
font-size: 14px;
padding: 2px;
font-weight: lighter;
}

div.comments a:hover {
font-size: 14px;
font-weight: lighter;
color: #999999;
background: ;
background-image: url('');
padding: 2px;
}

.ljtags {
font-family: "arial", sans-serif;
font-size: 10px;
color: #58b1ec;
margin-top: 15px;
font-weight: none;
text-transform: lowercase;
position: left;
}

.headerimage {
position: relative;
width: 700px; height: 300px;
margin-left: 150px;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/peoplheader.png');
background-repeat: no-repeat;
}

.datesubjectcomment {
background-color: #c4d8e5;
padding: 10px;
margin-top: 20px;
border-width: 2px;
border-style: solid;
border-color: #959595;
color: #ffffff;
-webkit-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
}

.userpiccomment {
position: relative;
border-width: 0px 0px 5px 0px;
border-style: solid;
border-color: #c4d8e5;
background-color: #959595;
top: -30px;
left: 0px;
padding: 2px;
margin: 10px 10px -20px 0px;
z-index: 15;
float: left;

}

.box {
border-style: dotted;
border-width: 1px 0px 0px 0px;
border-color: #999999;
background-color:
padding: 8px;
clear: left;
}

input, textarea {
background-color: #FEFEFE;
color: #003663;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 10px 5px 5px 30px;
padding: 15px 5px 5px 5px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color: #FEFEFE;
color: #999999;
}

.replytosubject {
font-weight: none;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #999999;
}

.commentbox {

border-color: #B4DADA;
border-width: 0px 0px 1px 0px;
border-style: dashed;
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;
}

.commentinfo {
background-color: #FEFEFE;
margin-top: 10px;
width: 100%;
}

/* USER */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* IE is on crack and needs this */
background: URL(http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/martini-blue.png);
padding: 12px 0px 0 12px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background: URL(http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/martini-blue.png);
padding: 12px 0px 0 12px;
}

/* COMMUNITY */

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background: URL(http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/martini-gray.png);
padding: 12px 0px 0 12px;
}

#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(http://i213.photobucket.com/albums/cc269/Vicodin_Martini/layouts/martini-gray.png);
background-repeat: no-repeat;

}



I'm also now offering my coding services, whether you need help or want me to write some (or all) for you journal/profile. I'm still learning myself, as it's all self-taught, so practice makes perfect as they say. You'll have to give me some notice though, as it does take time! I'm thinking of writing some layouts to offer as well, but that depends on if I can be bothered, have the energy, etc. etc. In the meantime I do have a moodtheme I haven't finished but I've been sitting on forever. I should get stuck into that. XD

Hope you're all well! ♥

livejournal: layout

Previous post Next post
Up