( layout ) colossus.
First off, I am so sorry about the raffle--I completely forgot about it when I got home, suffered worse jetlag than when I was in Beijing, suddenly remembered this afternoon, and now feel like the world's biggest asshole for keeping everyone waiting for so long. To be honest, my enthusiasm for this raffle is gone and I don't want to give anyone bad code, so I will take all of your entries and use them as inspiration. There were trends in peoples' requests, such as horizontal scrolling, bright colors, and minimalism, so I am going to do my best to incorporate them into a lot of different layouts this summer.
In the meantime, here are two layouts I made for my private journals that I wasn't planning on posting, but I feel like I owe you for waiting and then reneging. Sincerest apologies again, and I hope that you all have an enjoyable summer.
♥ Annay
live | image
/* -- c o l o s s u s
layout by prix @ lj
flexible squares
feel free to edit, but please do not remove credit from css. -- */
body {
background-color: #ffffff;
margin: 10px;
}
a, a:link, a:visited {
font-family: rockwell;
font-size: 12px;
color: #F6B900;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-style: italic;
}
p, td {
font-size: 10px;
}
blockquote {
width: 500px;
margin: 5px;
padding: 10px;
background-color: #ffffff;
border-left: 10px #F6B900 solid;
font-size: 9px;
color: #000000;
}
code, kbd, pre, tt {
font-family: courier new;
}
/* -- HEADER -- */
#header {
float: left;
width: 200px;
height: 1000px;
font-family: rockwell, sans-serif;
font-size: 18px;
color: #f6C900;
font-weight: bold;
text-transform: uppercase;
background-attachment: fixed;
background-image: url(http://i51.tinypic.com/5l6xqq.jpg);
margin: -80px 0 0 -20px;
padding-left: 3px;
position: fixed;
}
div#header a, div#header a:link, div#header a:visited {
margin: 0 0 0 15px;
padding: 0 0 1px 0;
font-family: arial, sans-serif;
font-size: 18px;
color: #2F2F2F;
text-align: left;
display: block;
letter-spacing: 0px;
text-transform: uppercase;
text-decoration: none;
}
div#header a:hover {
color: #CCCCCC;
text-decoration: none;
}
.title {
margin: 10px 5px 0 5px;
padding-bottom: 3px;
font-family: rockwell, sans-serif;
font-size: 36px;
color: #F6C900;
font-weight: bold;
letter-spacing: -3px;
text-align: left;
text-shadow: 1px 2px #2F2F2F;
text-transform: lowercase;
line-height: 24px;
}
.subtitle {
margin: 10px 3px 0 7px;
font-family: arial, sans-serif;
font-size: 24px;
color: #2F2F2F;
font-weight: bold;
letter-spacing: -3px;
text-align: left;
text-transform: uppercase;
line-height: 18px;
}
ul.navheader {
padding: 0 0 0 0;
margin: 80px 0 0 0;
}
ul.navheader li {
display: block;
padding: 1px;
margin: 1px;
border-bottom: 1px dashed #ccc;
}
/* -- ENTRY -- */
#content {
width: 600px;
margin: 0px;
padding: 10px;
border-width: 0px;
}
#maincontent {
width: 600px;
margin-top: 15px;
}
.subcontent {
}
.entry {
width: 600px;
margin-left: 400px;
padding: 10px;
background-color: #F0F0F0;
font-family: arial, sans-serif;
font-size: 11px;
color: #2F2F2F;
letter-spacing: 1px;
text-align: justify;
border-bottom: 2px #CCCCCC solid;
}
/* -- DATE & SUBJECTS -- */
.subject, .subject a, .subject a:link, .subject a:visited, .subject a:hover {
margin-top: -5px;
font-family: rockwell, sans-serif;
font-size: 24px;
color: #CCCCCC;
letter-spacing: -1px;
text-align: left;
text-decoration: none;
text-transform: lowercase;
line-height: 12px;
}
.datesubject {
margin-left: 400px;
width: 600px;
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #F0F0F0;
letter-spacing: 1px;
text-align: left;
text-transform: uppercase;
}
/* -- SIDEBAR -- */
#sidebar {
width: 180px;
height: 1000px;
float: left;
margin: -80px 0 0 180px;
padding: 10px;
font-family: arial, sans-serif;
font-size: 11px;
color: #F0F0F0;
letter-spacing: 1px;
text-align: justify;
text-transform: lowercase;
background-attachment: fixed;
background-image: url(http://i51.tinypic.com/k33orm.jpg);
position: fixed;
}
.sbarbody {
padding: 2px;
}
.sbarbody2 {
margin-top: 70px;
padding: 10px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-family: arial, sans-serif;
font-size: 14px;
color: #F0F0F0;
letter-spacing: 1px;
text-decoration: none;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6B900;
}
ul.sbarlist {
padding: 0px;
list-style: none;
}
li.sbaritem {
display: block;
text-align: left;
list-style: none;
margin: 1px;
border-bottom: 1px #F6B900 dashed;
}
/* -- USERPICS -- */
.userpic, .userpicfriends {
color: #fff;
text-align: center;
margin-right: -600px;
margin-top: 50px;
position: relative;
float: right;
}
.userpicfriends a font {
background-color: #2F2F2F;
padding: 3px;
font-family: rockwell, sans-serif;
font-size: 14px!important;
color: #F6B900;
text-transform: uppercase;
}
.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
border: 15px #2F2F2F solid;
}
/* -- FOOTER -- */
#footer {
width: 400px;
margin-left: 400px;
background-color: transparent;
font-family: arial, sans-serif;
font-size: 14px;
color: #F6B900;
padding: 3px;
background-color: #2F2F2F;
text-decoration: none;
z-index: 50;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited {
font-family: arial, sans-serif;
font-size: 14px;
color: #F6B900;
padding: 3px;
background-color: #2F2F2F;
text-decoration: none;
}
div#footer a:hover {
padding: 3px;
color: #F0F0F0;
}
ul.navfooter {
padding: 0px;
margin: 0px;
}
ul.navfooter li {
margin: 0 5px 0 5px;
padding: 3px;
display: inline;
list-style: none;
}
.clearfoot {
clear: both;
}
/* -- CURRENTS & TAGS -- */
.currents {
font-family: arial, sans-serif!important;
font-size: 11px;
color: #F6B900;
background-color: #2F2F2F;
text-transform: lowercase;
padding: 0 0 5px 5px;
border-left: 5px #CCCCCC solid;
}
.ljtaglist {
width: 500px;
font-family: arial;
font-size: 11px;
margin-top: -30px;
margin-left: 400px;
list-style-type: none;
}
.ljtags {
font-family: arial, sans-serif!important;
font-size: 11px;
color: #F6B900;
background-color: #2F2F2F;
text-transform: lowercase;
margin: 20px 0 -30px 0px;
padding: 5px 0 5px 5px;
border-left: 5px #CCCCCC solid;
}
/* -- COMMENTS -- */
.comments {
margin: 0 -15px 0 0;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
font-family: rockwell, sans-serif;
font-size: 14px;
color: #ffffff;
text-align: right;
letter-spacing: 1px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #F6B900;
background-color: #2F2F2F;
padding: 3px;
text-decoration: none;
text-transform: lowercase;
}
div.comments a:hover {
color: #F6B900;
text-decoration: none;
}
/* -- SEPARATOR -- */
.separator {
height: 10px;
}
/* -- ARCHIVE -- */
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #F0F0F0;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* -- TINYICONS --*/
.ljuser img {
width: 0;
height: 0;
background: transparent url() no-repeat 0 0;
padding: 7px 7px 0px 0px !important;
vertical-align: baseline !important;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i53.tinypic.com/30skkmb.png) no-repeat 0 0 !important;
padding: 16px 16px 0px 0px !important;
}
.ljuser img[src*="community.gif"] {
width: 0;
height: 0;
background: transparent url(http://i52.tinypic.com/xof8gn.png) no-repeat scroll 0 0 !important;
padding: 12px 17px 0px 0px !important;
}
img[src*='icon_protected.gif'] {
width: 0;
height: 0;
background: url('http://i54.tinypic.com/ohtkx1.png') no-repeat;
padding: 16px 20px 0 0;
}
img[src*='icon_private.gif'] {
width: 0;
height: 0;
background: url('http://i56.tinypic.com/28anbrl.png') no-repeat;
padding: 13px 16px 0 0;
}
img[src*='icon_groups.gif'] {
width: 0;
height: 0;
background: url('http://i55.tinypic.com/zwx1yo.png') no-repeat;
padding: 16px 20px 0 0;
}
❶ Select FLEXIBLE SQUARES.
➋ Make sure all drop-down boxes say NO and copy+paste the code HERE.
➌ Turn everything off except for LINKS and BLURB.
➍ This layout has been tested in Mozilla Firefox & Google Chrome.
➎ Feel free to ask any questions and I'll do my best to answer them.
➏ Edit as you see fit as long as you keep the credit!
➐ Thanks for dropping by!
In the meantime, here are two layouts I made for my private journals that I wasn't planning on posting, but I feel like I owe you for waiting and then reneging. Sincerest apologies again, and I hope that you all have an enjoyable summer.
♥ Annay
live | image
/* -- c o l o s s u s
layout by prix @ lj
flexible squares
feel free to edit, but please do not remove credit from css. -- */
body {
background-color: #ffffff;
margin: 10px;
}
a, a:link, a:visited {
font-family: rockwell;
font-size: 12px;
color: #F6B900;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-style: italic;
}
p, td {
font-size: 10px;
}
blockquote {
width: 500px;
margin: 5px;
padding: 10px;
background-color: #ffffff;
border-left: 10px #F6B900 solid;
font-size: 9px;
color: #000000;
}
code, kbd, pre, tt {
font-family: courier new;
}
/* -- HEADER -- */
#header {
float: left;
width: 200px;
height: 1000px;
font-family: rockwell, sans-serif;
font-size: 18px;
color: #f6C900;
font-weight: bold;
text-transform: uppercase;
background-attachment: fixed;
background-image: url(http://i51.tinypic.com/5l6xqq.jpg);
;){kind=link}
margin: -80px 0 0 -20px;
padding-left: 3px;
position: fixed;
}
div#header a, div#header a:link, div#header a:visited {
margin: 0 0 0 15px;
padding: 0 0 1px 0;
font-family: arial, sans-serif;
font-size: 18px;
color: #2F2F2F;
text-align: left;
display: block;
letter-spacing: 0px;
text-transform: uppercase;
text-decoration: none;
}
div#header a:hover {
color: #CCCCCC;
text-decoration: none;
}
.title {
margin: 10px 5px 0 5px;
padding-bottom: 3px;
font-family: rockwell, sans-serif;
font-size: 36px;
color: #F6C900;
font-weight: bold;
letter-spacing: -3px;
text-align: left;
text-shadow: 1px 2px #2F2F2F;
text-transform: lowercase;
line-height: 24px;
}
.subtitle {
margin: 10px 3px 0 7px;
font-family: arial, sans-serif;
font-size: 24px;
color: #2F2F2F;
font-weight: bold;
letter-spacing: -3px;
text-align: left;
text-transform: uppercase;
line-height: 18px;
}
ul.navheader {
padding: 0 0 0 0;
margin: 80px 0 0 0;
}
ul.navheader li {
display: block;
padding: 1px;
margin: 1px;
border-bottom: 1px dashed #ccc;
}
/* -- ENTRY -- */
#content {
width: 600px;
margin: 0px;
padding: 10px;
border-width: 0px;
}
#maincontent {
width: 600px;
margin-top: 15px;
}
.subcontent {
}
.entry {
width: 600px;
margin-left: 400px;
padding: 10px;
background-color: #F0F0F0;
font-family: arial, sans-serif;
font-size: 11px;
color: #2F2F2F;
letter-spacing: 1px;
text-align: justify;
border-bottom: 2px #CCCCCC solid;
}
/* -- DATE & SUBJECTS -- */
.subject, .subject a, .subject a:link, .subject a:visited, .subject a:hover {
margin-top: -5px;
font-family: rockwell, sans-serif;
font-size: 24px;
color: #CCCCCC;
letter-spacing: -1px;
text-align: left;
text-decoration: none;
text-transform: lowercase;
line-height: 12px;
}
.datesubject {
margin-left: 400px;
width: 600px;
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #F0F0F0;
letter-spacing: 1px;
text-align: left;
text-transform: uppercase;
}
/* -- SIDEBAR -- */
#sidebar {
width: 180px;
height: 1000px;
float: left;
margin: -80px 0 0 180px;
padding: 10px;
font-family: arial, sans-serif;
font-size: 11px;
color: #F0F0F0;
letter-spacing: 1px;
text-align: justify;
text-transform: lowercase;
background-attachment: fixed;
background-image: url(http://i51.tinypic.com/k33orm.jpg);
;){kind=link}
position: fixed;
}
.sbarbody {
padding: 2px;
}
.sbarbody2 {
margin-top: 70px;
padding: 10px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-family: arial, sans-serif;
font-size: 14px;
color: #F0F0F0;
letter-spacing: 1px;
text-decoration: none;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #F6B900;
}
ul.sbarlist {
padding: 0px;
list-style: none;
}
li.sbaritem {
display: block;
text-align: left;
list-style: none;
margin: 1px;
border-bottom: 1px #F6B900 dashed;
}
/* -- USERPICS -- */
.userpic, .userpicfriends {
color: #fff;
text-align: center;
margin-right: -600px;
margin-top: 50px;
position: relative;
float: right;
}
.userpicfriends a font {
background-color: #2F2F2F;
padding: 3px;
font-family: rockwell, sans-serif;
font-size: 14px!important;
color: #F6B900;
text-transform: uppercase;
}
.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
border: 15px #2F2F2F solid;
}
/* -- FOOTER -- */
#footer {
width: 400px;
margin-left: 400px;
background-color: transparent;
font-family: arial, sans-serif;
font-size: 14px;
color: #F6B900;
padding: 3px;
background-color: #2F2F2F;
text-decoration: none;
z-index: 50;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited {
font-family: arial, sans-serif;
font-size: 14px;
color: #F6B900;
padding: 3px;
background-color: #2F2F2F;
text-decoration: none;
}
div#footer a:hover {
padding: 3px;
color: #F0F0F0;
}
ul.navfooter {
padding: 0px;
margin: 0px;
}
ul.navfooter li {
margin: 0 5px 0 5px;
padding: 3px;
display: inline;
list-style: none;
}
.clearfoot {
clear: both;
}
/* -- CURRENTS & TAGS -- */
.currents {
font-family: arial, sans-serif!important;
font-size: 11px;
color: #F6B900;
background-color: #2F2F2F;
text-transform: lowercase;
padding: 0 0 5px 5px;
border-left: 5px #CCCCCC solid;
}
.ljtaglist {
width: 500px;
font-family: arial;
font-size: 11px;
margin-top: -30px;
margin-left: 400px;
list-style-type: none;
}
.ljtags {
font-family: arial, sans-serif!important;
font-size: 11px;
color: #F6B900;
background-color: #2F2F2F;
text-transform: lowercase;
margin: 20px 0 -30px 0px;
padding: 5px 0 5px 5px;
border-left: 5px #CCCCCC solid;
}
/* -- COMMENTS -- */
.comments {
margin: 0 -15px 0 0;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
font-family: rockwell, sans-serif;
font-size: 14px;
color: #ffffff;
text-align: right;
letter-spacing: 1px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #F6B900;
background-color: #2F2F2F;
padding: 3px;
text-decoration: none;
text-transform: lowercase;
}
div.comments a:hover {
color: #F6B900;
text-decoration: none;
}
/* -- SEPARATOR -- */
.separator {
height: 10px;
}
/* -- ARCHIVE -- */
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: dashed;
border-color: #F0F0F0;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* -- TINYICONS --*/
.ljuser img {
width: 0;
height: 0;
background: transparent url() no-repeat 0 0;
padding: 7px 7px 0px 0px !important;
vertical-align: baseline !important;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i53.tinypic.com/30skkmb.png) no-repeat 0 0 !important;
padding: 16px 16px 0px 0px !important;
}
.ljuser img[src*="community.gif"] {
width: 0;
height: 0;
background: transparent url(http://i52.tinypic.com/xof8gn.png) no-repeat scroll 0 0 !important;
padding: 12px 17px 0px 0px !important;
}
img[src*='icon_protected.gif'] {
width: 0;
height: 0;
background: url('http://i54.tinypic.com/ohtkx1.png') no-repeat;
padding: 16px 20px 0 0;
}
img[src*='icon_private.gif'] {
width: 0;
height: 0;
background: url('http://i56.tinypic.com/28anbrl.png') no-repeat;
padding: 13px 16px 0 0;
}
img[src*='icon_groups.gif'] {
width: 0;
height: 0;
background: url('http://i55.tinypic.com/zwx1yo.png') no-repeat;
padding: 16px 20px 0 0;
}
❶ Select FLEXIBLE SQUARES.
➋ Make sure all drop-down boxes say NO and copy+paste the code HERE.
➌ Turn everything off except for LINKS and BLURB.
➍ This layout has been tested in Mozilla Firefox & Google Chrome.
➎ Feel free to ask any questions and I'll do my best to answer them.
➏ Edit as you see fit as long as you keep the credit!
➐ Thanks for dropping by!