New year, new layout. I made this one for my own journal because I wanted a facelift; it's a mainly-dark theme with a lot of bright accents all over the place.
style . expressive, mixit (s2)
preview . click the image above.
works with . paid/permanent, basic, plus
use layout's style sheet(s) . no
comment pages . yes
ad compatibility . all placements
resolution compatibility . 1024x768 and above
installation help .
check herecss and more information: Tested in FF3 and IE7. Custom comment/entry pages, custom images (user, community, feeds, news, anonymous, OpenID, RSS/Atom links) are included.
Please make sure to set this only as a two-column layout. It's not set up to work as a three-column.
Regarding journal titles and subtitles, I'm sorry to say that the layout is set to hide them. This is because of the method of displaying the header, as well as because the intention is really to have a customized header image with the title written into that (well, it's also because originally I was going to keep it as a personal layout because I wasn't sure how it'd turn out, and then I liked it and decided to share). The header image is located
here, and is 800x225px. The "Image Section" of it is 580x215px, and the dots along the right side will fit to most one-word links you might come up with for your navigation links. If you want to paint over where it says "Go Roaming," the background color is #383838. Accent colors are #d30483 (pink), #01c9cb (blue), #9dcc17 (green), and #fcbc34 (orange). (If you're wondering about the font that I used there, it's called "advent," and I used varying letter-spacing and a 2pt line spacing, staggering the letters between the two lines, then titled the text to the angle it's at).
/* ---------------------------------------------------------- */
/* Scene-It ------------------------------------------------- */
/* CSS by Josie .
http://artes.livejournal.com/ ------------- */
/* Get it at .
http://community.livejournal.com/resonated --- */
/* Brushes by .
http://designfruit.com/jasongaylor/blog/----- */
/* S2 Style: Expressive . MixIt ----------------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* --------------------- Page Elements ---------------------- */
/* ---------------------------------------------------------- */
body { background:#000000; color:#cdcdcd; font:10pt arial, sans-serif; text-align:justify; margin:0px; padding:0px; }
a, a b, a i, a b i, a i b, .ljuser a b, .user-icon a, #qrformdiv a, #qrformdiv a:visited { color:#9dcc17; text-decoration:none; }
a:active, a:hover, a b:active, a b:hover, a i:active, a i:hover, a b i:active, a b i:hover, a i b:active, a i b:hover, .ljuser a b:active, .ljuser a b:hover, .user-icon a:active, .user-icon a:hover, #qrformdiv a:active, #qrformdiv a:hover { color:#fbb933; }
a img, .ljuser a { border:0px; }
b { color:#01c9cb; }
i { color:#d30483; }
b i, i b { color:#fbb933; }
hr { color:#505050; height:1px; margin:10px 0px; border:1px solid #505050; border-bottom:1px; }
.prevnext a, .comments-nav a, .lj-view-archive .year .active, .skiplinks a { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px 1px no-repeat; color:#dcdcdc; font-size:8pt; letter-spacing:0px; line-height:12px; height:10px; margin:0px 5px; padding:0px 0px 0px 10px; }
.asset-meta-comments a, .asset-meta-no-comments a { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px 1px no-repeat; color:#dcdcdc; font-size:8pt; letter-spacing:0px; line-height:12px; height:10px; margin:0px 3px 0px 0px; padding:0px 0px 0px 10px; }
.prevnext a:visited, .comments-nav a:visited, .skiplinks a:visited, .asset-meta-comments a:visited, .asset-meta-no-comments a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -18px no-repeat; }
.prevnext a:active, .prevnext a:hover, .comments-nav a:active, .comments-nav a:hover, .skiplinks a:active, .skiplinks a:hover, .asset-meta-comments a:active, .asset-meta-comments a:hover, .asset-meta-no-comments a:active, .asset-meta-no-comments a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -37px no-repeat; color:#01c9cb; }
blockquote { background:#505050; color:#9dcc17; padding:5px; }
blockquote a { color:#fbb933; }
blockquote a:active, blockquote a:hover { color:#01c9cb; }
input, select, textarea { background-color:#505050 !important; color:#fbb933 !important; font:normal 10pt arial, sans-serif !important; border:0px !important; }
input[type=text] { color:#01c9cb !important; }
input[type=password] { color:#d30483 !important; }
input[type=checkbox], input[type=radio] { background:none !important; }
input[type=submit] { background:none !important; color:#d30483 !important; font:13pt georgia, serif !important; }
select, input[type=button] { color:#9dcc17 !important; }
#header-name, #header-description, .stream-header, .user-icon .ljuser img, .lj-currents li img, .calendar-widget tr:first-child, .calendar-widget .widget-footer, .designed-widget, .powered-widget, #gamma, #footer { display:none; }
#container { background:#383838; width:800px; margin:0px auto; }
#container-inner, #page, #page-inner, #content, #content-inner, #header-content, #header-content-inner, #header-photo, #header-photo-inner, #header-text, #header-content-decor, #header-decor, .decor { margin:0px; padding:0px; }
#header { background:url('
http://pics.livejournal.com/artes/pic/006pz4fs') top left no-repeat; height:225px !important; margin:0px 0px 10px 0px; overflow:hidden; }
#alpha { width:600px; margin:0px; padding:0px; float:left; }
#beta { width:200px; margin:0px; padding:0px; float:right; }
#header-inner { margin:0px; padding:145px 0px 0px 600px; }
#alpha-inner { margin:0px 10px; }
#beta-inner { margin:0px 10px 0px 0px; }
#header-text .nav { margin:0px; padding:0px; }
#header-text .nav .item { font:16px georgia, serif; line-height:1; list-style:none; }
#header-text .nav .current a { color:#cdcdcd; cursor:text; }
/* ---------------------------------------------------------- */
/* ------------------------- Alpha -------------------------- */
/* ---------------------------------------------------------- */
.stream-footer { text-align:center; margin:0px; padding:0px; }
.prevnext { color:#383838; font-size:0px; letter-spacing:0px; text-align:center; margin:0px 10px 10px 10px; padding:0px; display:block; }
.post-asset { background:url('
http://pics.livejournal.com/artes/pic/006pc9ab') 0px 20px no-repeat; margin:0px 0px 30px 0px; padding:0px; }
.asset-name, .page-header-2 { color:#d30483; font:16pt georgia, serif; line-height:1; margin:0px; padding:0px 0px 0px 5px; }
.asset-name a { color:#d30483; cursor:text; }
.asset-meta .asset-meta-list { text-align:center; margin:0px; padding:0px 5px; clear:both; }
.asset-meta .asset-meta-list .item { list-style:none; }
.post-asset .datetime { color:#9dcc17; text-align:justify; padding:3px 0px 0px 20px; display:block; }
.asset-content { padding:10px 5px 0px 5px; }
.post-asset .asset-body { margin:0px; padding:0px 0px 5px 0px; border-bottom:1px solid #505050; }
.post-asset .user-icon { background:none !important; font-size:8pt; text-align:center; margin:-13px 10px 10px 10px; padding:0px; float:right; }
.post-asset .user-icon span { background:none !important; }
.post-asset .user-icon span a b { font-weight:normal !important; }
.lj-currents { clear:both; }
.lj-currents ul { margin:0px; padding:0px; }
.lj-currents li { font:8pt arial, sans-serif; margin-right:10px; list-style:none; display:inline; }
.entryMetadata-label { color:#01c9cb; font:bold 8pt arial, sans-serif; margin-right:3px; }
.asset-tags { clear:both; }
.asset-tags-header { color:#01c9cb; font:bold 8pt arial, sans-serif; margin-right:3px; display:inline; }
.asset-tags-list { font:8pt arial, sans-serif; margin:0px; padding:0px; display:inline; }
.asset-tags-list .item { list-style:none; display:inline; }
.asset-meta-comments, .asset-meta-no-comments { display:inline; }
/* ---------------------------------------------------------- */
/* -------------------------- Beta -------------------------- */
/* ---------------------------------------------------------- */
.widget { font-size:8pt; margin:0px 0px 10px 0px; }
.widget-header { color:#fbb933; font:12pt georgia, serif; letter-spacing:3px; line-height:28px; text-align:center; width:190px; height:20px; margin:0px 0px 5px 0px; padding:0px; }
.widget-header a { color:#fbb933; cursor:text; }
.widget-list { margin:0px; padding:0px; }
.widget-list .item { list-style:none; }
.about-me-widget .user-pic { max-width:100px; max-height:100px; margin:0px auto; overflow:hidden; }
.about-me-widget .item { line-height:1.1; text-align:center; margin:0px; padding:0px; border-bottom:1px solid #505050; }
.archive-widget .item { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -38px no-repeat; line-height:12px; margin:0px; padding:0px 0px 0px 10px; list-style:none; }
.archive-widget .item a:first-child { color:#dcdcdc; }
.archive-widget .item a:first-child:active, .archive-widget .item a:first-child:hover { color:#01c9cb; }
.archive-widget .item a:active, .archive-widget .item a:hover { color:#d30483; }
.calendar-widget { text-align:center; }
.calendar-widget table { margin:0px auto; }
.calendar-widget tr:first-child a, .calendar-widget tr:first-child a:hover { background:none !important; width:170px !important; display:block; }
.calendar-widget th { color:#01c9cb; }
.calendar-widget td { line-height:20px; text-align:center; width:20px !important; height:20px !important; padding:0px; }
.calendar-widget td a { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') -29px 0px no-repeat; color:#ffffff; line-height:20px; text-align:center; width:20px; height:20px; display:block; }
.calendar-widget td a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') 0px 0px no-repeat; }
.calendar-widget td a:active, .calendar-widget td a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') -57px 0px no-repeat; }
.categories-widget .widget-footer { text-align:center; }
.categories-widget .item, .typelist-widget .item { height:12px; margin:0px 0px 2px 0px; display:block; overflow:hidden; }
.categories-widget .item a, .typelist-widget .item a { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px 0px no-repeat; color:#dcdcdc; font-size:8pt !important; line-height:12px; height:10px; margin:0px; padding:0px 0px 0px 10px; display:block; }
.categories-widget .item a:visited, .typelist-widget .item a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -19px no-repeat; }
.categories-widget .item a:active, .categories-widget .item a:hover, .typelist-widget .item a:active, .typelist-widget .item a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -38px no-repeat; color:#01c9cb; }
.syndicate-widget .widget-content { text-align:center; }
/* ---------------------------------------------------------- */
/* ------------------------ Replies ------------------------- */
/* ---------------------------------------------------------- */
.comments-header { color:#fbb933; font:12pt georgia, serif; text-align:right; margin:0px; padding:0px; }
.comments-nav { color:#383838; font-size:0px; letter-spacing:0px; text-align:center; margin:0px 0px 10px 0px; padding:0px; }
.replyform table { margin:0px 0px 10px 0px; }
.replyform table table { margin:0px !important; }
#qrformdiv table { background:transparent !important; color:#dcdcdc; font-size:8pt; border:0px !important; }
#qrformdiv a, #qrformdiv a:visited, #qrformdiv a:active, #qrformdiv a:hover { background:none; margin:0px; padding:0px }
.comment { margin:0px 0px 10px 0px; padding:0px 0px 5px 0px; border-bottom:1px solid #505050; clear:both; }
.comment .user-icon { margin:0px 10px 10px 10px; float:left; }
.comment .commenter-name { color:#9dcc17; }
.comment .datetime { color:#01c9cb; font-size:8pt; }
.comment .comment-subject { color:#d30483; font:13pt georgia, serif; }
.comment .comment-body { padding:0px 5px; }
.comment-links { color:#383838; font-size:0pt; letter-spacing:0px; text-align:center; clear:both; }
.comment-links a { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px 1px no-repeat; color:#dcdcdc; font-size:8pt; letter-spacing:0px; line-height:12px; height:10px; margin:0px 2px; padding:0px 0px 0px 10px; }
.comment-links a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -18px no-repeat; }
.comment-links a:active, .comment-links a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -37px no-repeat; color:#01c9cb; }
/* ---------------------------------------------------------- */
/* -------------------- Calendar and Day -------------------- */
/* ---------------------------------------------------------- */
.lj-view-archive .prevnext { color:#dcdcdc; font:10pt arial, sans-serif; letter-spacing:0px; }
.year { text-align:center; margin:0px; padding:0px; }
.year li { margin:0px; list-style:none; display:inline; }
.lj-view-archive .post-asset { background:none; }
.lj-view-archive .post-asset .asset-body { border-bottom:0px; }
.yeartable { border-collapse:collapse; }
.yearmonth { color:#d30483; font:16pt georgia, serif; line-height:1; vertical-align:bottom; }
.yearmonth a { font:8pt arial, sans-serif; line-height:1.4; }
.yearday { color:#01c9cb; font:bold 10pt arial, sans-serif; text-align:center; }
.yeardate { width:60px; height:40px; border-bottom:1px solid #505050; }
.yeardate a { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') -29px 0px no-repeat; color:#ffffff; line-height:20px; width:20px; height:20px; margin:0px auto; display:block; }
.yeardate a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') 0px 0px no-repeat; }
.yeardate a:active, .yeardate a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pbtc9') -57px 0px no-repeat; }
.lj-view-day .day h2 { color:#fbb933; font:12pt georgia, serif; text-align:right; margin:0px; padding:0px; }
.lj-view-day h2.page-header2 { color:#d30483; font:16pt georgia, serif; line-height:1; text-align:justify; margin:0px; padding:0px 0px 0px 5px; }
.skiplinks { color:#383838; font-size:0px; letter-spacing:0px; text-align:center; margin:0px; padding:0px; }
/* ---------------------------------------------------------- */
/* -------------------------- Tags -------------------------- */
/* ---------------------------------------------------------- */
.lj-view-tags .page-header2 { background:url('
http://pics.livejournal.com/artes/pic/006pc9ab') 0px 20px no-repeat; color:#d30483; font:16pt georgia, serif; line-height:1; margin:0px 10px; padding:0px 0px 8px 5px; }
.lj-view-tags #alpha ul { margin:0px; padding:5px 15px; }
.lj-view-tags #alpha li { list-style:none; }
.lj-view-tags #alpha li a { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px 3px no-repeat; color:#dcdcdc; padding:0px 0px 0px 10px; }
.lj-view-tags #alpha li a:visited { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -16px no-repeat; }
.lj-view-tags #alpha li a:active, .lj-view-tags #alpha li a:hover { background:url('
http://pics.livejournal.com/artes/pic/006pgfxt') 0px -35px no-repeat; color:#01c9cb; }
/* ---------------------------------------------------------- */
/* -------------------- LJ Utility Code --------------------- */
/* ---------------------------------------------------------- */
.comment-body:after, .comment-links:after, #page-inner:after, #header-inner:after, #header-photo:after, #content-inner:after, #alpha-inner:after, #beta-inner:after, #gamma-inner:after, #delta-inner:after, #footer-inner:after, .post-asset .asset-body:after, .widget .user-pic:after { content: "."; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0.1px; }
#content-inner, .asset-body { height: 1%; }
* html #header-name a { word-wrap: break-word; }
/* ---------------------------------------------------------- */
/* ----------------------- User Image ----------------------- */
/* ---------------------------------------------------------- */
.ljuser img { background:url('
http://pics.livejournal.com/artes/pic/006ppzce') top left no-repeat; width:0px !important; height:0px !important; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/userinfo.gif"], img[src="
http://p-stat.livejournal.com/img/userinfo.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006ppzce') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/community.gif"], img[src="
http://p-stat.livejournal.com/img/community.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006pq61k') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/syndicated.gif"], img[src="
http://p-stat.livejournal.com/img/syndicated.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006pre3y') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/newsinfo.gif"], img[src="
http://p-stat.livejournal.com/img/newsinfo.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006ps53h') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/anonymous.gif"], img[src="
http://p-stat.livejournal.com/img/anonymous.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006ptrwb') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/openid-profile.gif"], img[src="
http://p-stat.livejournal.com/img/openid-profile.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006pwq3a') top left no-repeat; width:0px !important; height:0px !important; margin-right:1px; padding:7px !important; }
img[src="
http://l-stat.livejournal.com/img/data_rss.gif"], img[src="
http://p-stat.livejournal.com/img/data_rss.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006pxrzy') top left no-repeat; width:0px !important; height:0px !important; padding:8px 16px 7px 16px !important; }
img[src="
http://l-stat.livejournal.com/img/data_atom.gif"], img[src="
http://p-stat.livejournal.com/img/data_atom.gif"] { background:url('
http://pics.livejournal.com/artes/pic/006py5dg') top left no-repeat; width:0px !important; height:0px !important; padding:8px 16px 7px 16px !important; }