expressive: life's a spectrum: spire

daemon in spire

expressive: life's a spectrum

Apr 19, 2009 10:38

A layout I made for my personal journal, but I'm sharing because I'm nice. It was loosely based on the Adobe site and I've created a few custom color schemes based on the software palette.

layout notes

account types
Basic, Paid

compatible browsers
Internet Explorer 7, Mozilla Firefox, Opera, Safari, Google Chrome
Date is not properly oriented in Safari or Chrome, but is otherwise negligible.

minimum resolution
1024x768

comment pages
Yes

navstrip
Optional

disabled
• All of the sidebar except the links list

css stylesheet

stylesheet

/*---------------------------------------------------
STYLESHEET CREATOR: scythe.livejournal.com
STYLESHEET NAME:
S2 STYLE:
DOWNLOAD: thrashmetal.livejournal.com

****Please remember to credit!****
-----------------------------------------------------
CUSTOM COLORS (PHOTOSHOP SCHEME):
#0063BE
#22217F
*/

* {
border:medium none !important;
}
body {
background:#222222 none repeat scroll 0 0;
color:#000000;
font-family:helvetica,arial,sans-serif;
font-size:13px;
margin:0;
padding:35px 0 0 !important;
}
a {
color:#0063BE;
text-decoration:none;
}
a:hover {
color:#22217F;
}
a img {
border:medium none;
}
li {
margin:0;
padding:0;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:square;
margin:0;
}
blockquote {
border-bottom:5px solid #F2F2F2 !important;
font-family:Cambria,Georgia,Times New Roman;
font-size:14px;
padding:10px;
}
hr {
display:none;
}
select, textarea, input {
border:1px solid #F2F2F2 !important;
color:#111111;
font-family:Cambria,Georgia,Courier New,Monospace;
font-size:14px;
padding:3px;
}
ul.year {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:19px 19px 10px;
}
ul.year li {
color:#555555;
display:inline;
font-family:"Helvetica-Light","Arial Narrow",Helvetica;
font-size:18px;
}
.yearday {
text-transform:lowercase;
}
.yeardate {
height:42px;
}
.yearmonth {
color:#0063BE;
font-family:"Helvetica-Light","Arial Narrow",Helvetica;
font-size:31px;
letter-spacing:-3px;
text-transform:lowercase;
}
.yearmonth a {
color:#111111;
font-size:17px;
letter-spacing:-1px;
}
.hidden {
display:none;
}
.item {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.widget-list a {
color:#FFFFFF;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:6px;
}
.user-icon {
float:left;
margin:10px;
}
.user-icon img {
background:#101010 none repeat scroll 0 0;
border-left:7px solid #0063BE !important;
padding-left:18px;
}
.page-header2 {
margin:0;
}
#container {
position:absolute;
width:100%;
}
#page {
width:100%;
}
#header {
padding:0;
position:absolute;
top:54px;
width:100%;
}
#header-inner {
margin:0 auto;
width:835px;
}
ul.nav {
background:#000000 none repeat scroll 0 0;
margin:0 auto;
padding:10px;
position:absolute;
top:72px;
z-index:300;
}
.nav li {
display:inline;
float:left;
margin-left:12px;
margin-right:-13px;
padding:0;
}
.nav li a {
color:#CCCCCC;
font-size:15px;
margin-right:23px;
text-transform:uppercase;
}
.nav li.first {
border-left:medium none;
padding-left:0;
}
.nav li.current a {
text-decoration:none;
}
.nav li a[title*="Recent"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/home.png) no-repeat scroll 0 0;
display:block;
font-size:0;
height:16px;
text-indent:-9999px;
width:16px;
}
.nav li a[title*="Friends"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/comment_bubble.png) no-repeat scroll 0 0;
display:block;
font-size:0;
height:16px;
text-indent:-9999px;
width:16px;
}
.nav li a[title*="Archive"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/calendar.png) no-repeat scroll 0 0;
display:block;
font-size:0;
height:16px;
text-indent:-9999px;
width:16px;
}
.nav li a[title*="User"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/user.png) no-repeat scroll 0 0;
display:block;
font-size:0;
height:16px;
text-indent:-9999px;
width:16px;
}
.nav li a[title*="Memories"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/favorite.png) no-repeat scroll 0 0;
display:block;
font-size:0;
height:16px;
text-indent:-9999px;
width:16px;
}
#header-name {
}
#header-name a {
background:#0063BE none repeat scroll 0 0;
border-right:72px solid #22217F !important;
color:#FFFFFF;
display:block;
font-family:"Helvetica-Light","Arial Narrow",Helvetica;
font-size:35px;
height:42px;
letter-spacing:-2px;
padding:17px 20px 49px;
text-transform:lowercase;
}
#header-description {
display:none;
}
#header-content-decor {
}
#header-decor {
}
#content {
padding:0;
}
#content-inner {
}
#alpha {
position:absolute;
top:162px;
width:100%;
}
#alpha-inner {
background:#FFFFFF none repeat scroll 0 0;
color:#4F4F4F;
margin:0 auto;
text-align:justify;
width:835px;
}
.stream-header {
display:none;
}
.stream-footer {
background:#101010 none repeat scroll 0 0;
color:#101010;
font-size:0;
margin-bottom:13px;
padding-bottom:17px;
padding-left:18px;
padding-top:17px;
text-align:left;
}
.stream-footer a {
color:#FFFFFF;
font-size:12px;
text-transform:lowercase;
}
.prevnext {
background:#101010 none repeat scroll 0 0;
color:#101010;
margin:0;
padding-right:20px;
text-align:right;
}
.prevnext a[href*="dir=prev"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/left_arrow.png) no-repeat scroll 0 0;
color:#FFFFFF;
font-size:12px;
height:16px;
margin-right:2px;
padding-left:21px;
text-transform:lowercase;
}
.prevnext a[href*="dir=next"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/right_arrow.png) no-repeat scroll 0 0;
color:#FFFFFF;
font-size:12px;
height:16px;
margin-right:2px;
padding-left:21px;
text-transform:lowercase;
}
.prevnext .prev, .prevnext .next, .prevnext a[href*="home"] {
height:16px;
margin-right:15px;
padding-left:22px;
}
.prevnext .prev {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/left_arrow.png) no-repeat scroll 0 0;
}
.prevnext .next {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/right_arrow.png) no-repeat scroll 0 0;
}
.prevnext a[href*="home"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/up_arrow.png) no-repeat scroll 0 0;
padding-bottom:1px;
padding-left:20px;
}
.asset-name-hover {
display:none;
}
.post-asset {
margin-bottom:7px;
}
.asset-inner {
}
.asset-header {
}
a.subj-link, .asset-name a {
color:#EEEEEE;
font-family:"Helvetica-Light","Arial Narrow",Helvetica;
font-size:19px;
font-weight:normal;
}
.asset-header-content-inner {
background:#101010 none repeat scroll 0 0;
}
.asset-name {
background:#101010 none repeat scroll 0 0;
padding:12px 22px 17px;
text-indent:0 !important;
width:635px;
}
.asset-name page-header2 {
color:#E42F17;
font-family:arial;
font-size:39px;
font-weight:normal;
letter-spacing:-4px;
text-decoration:none;
text-transform:lowercase;
}
.asset-meta {
margin:10px 0 0;
padding:0 10px;
}
.asset-meta-list a {
color:#101010;
font-family:arial;
font-size:9px;
text-transform:uppercase;
}
.asset-meta-list .datetime {
color:#AAAAAA;
font-family:arial;
font-size:10px;
margin-left:-152px;
margin-top:-42px;
position:absolute;
text-align:left;
text-transform:uppercase;
}
.asset-content {
margin-left:10px;
min-height:164px;
}
.asset-body {
color:#4F4F4F;
line-height:1.7;
margin-bottom:18px;
padding-left:16px;
padding-right:25px;
padding-top:16px;
}
.asset-body .user-icon {
height:100%;
padding-right:7px;
text-align:center;
width:133px !important;
}
.lj-currents ul li {
line-height:1.3;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.ljuser a b {
color:#222222;
}
.ljuser img {
background:transparent none repeat scroll 0 0;
border:medium none !important;
}
.entryMetadata-label {
font-weight:bold;
}
.entryMetadata-content {
margin-left:4px;
}
.asset-tags {
font-size:13px;
line-height:1.3;
margin-left:40px;
}
.asset-tags-header {
float:left;
margin:0;
}
.asset-tags-list {
line-height:18px;
}
ul.asset-tags-list li {
display:inline;
margin-right:1px;
}
ul.asset-tags-list li a {
font-weight:normal;
}
.asset-meta-comments {
text-transform:uppercase;
}
.asset-meta-no-comments {
}
ul.asset-meta-list {
margin:0;
padding:0;
text-align:right;
}
.asset-meta-list li.asset-meta-comments {
display:inline;
margin:0 3px;
text-align:left;
text-transform:lowercase;
}
.asset-footer {
}
.quickreply {
margin:1em;
padding-bottom:10px;
padding-top:5px;
width:90%;
}
#comments {
}
.comment {
margin:20px 0;
}
.comment-odd {
}
.comment-even {
}
.comments-inner {
}
.comments-header {
background:#101010 none repeat scroll 0 0;
color:#EEEEEE;
font-family:"Helvetica-Light","Arial Narrow",Helvetica;
font-size:19px;
font-weight:normal;
padding:16px;
text-transform:lowercase;
}
.comments-body {
}
.comments-nav {
text-align:center;
}
.comment-inner {
margin-bottom:28px;
margin-top:5px;
}
.comment-meta {
}
.commenter-name {
}
.comment-date {
}
.comment-date .datetime {
font-size:x-small;
}
.comment-subject {
font-weight:bold;
}
.comment-body {
line-height:1.7;
padding:12px 10px;
}
.comment-links {
border-bottom:1px solid #EFEFEF;
font-family:arial;
font-size:9px;
padding:10px 10px 0;
text-align:right;
text-transform:uppercase;
}
.permalink {
}
#beta {
position:absolute;
text-align:right;
top:16px;
width:100%;
z-index:0;
}
#beta-inner {
margin:0 auto;
width:824px;
}
.about-me-widget {
display:none;
}
.categories-widget {
display:none;
}
.archive-widget {
display:none;
}
.syndicate-widget {
display:none;
}
.powered-widget {
display:none;
}
.customtext-widget {
}
.customtext-widget .widget-content {
color:#5A140A;
font-family:courier new;
font-size:11px;
line-height:14px;
text-align:justify;
}
#gamma {
margin:0;
width:180px;
}
#gamma-inner {
}
.widget {
}
.widget a {
}
.widget a:hover {
background:#000000 none repeat scroll 0 0;
}
.widget-inner {
margin:0 8px;
}
.widget-header {
display:none;
}
.widget-header a {
text-decoration:none;
}
.widget-content {
padding:0 5px;
}
.widget-list {
padding:0;
}
ul.widget-list {
margin:0;
padding:0;
}
ul.widget-list li.item {
display:inline;
}
.widget-footer {
}
.about-me-widget {
display:none;
}
.about-me-widget div.user-pic {
text-align:center;
}
.profile-list {
}
.profile-username {
}
.profile-name {
}
.calendar-widget {
display:none;
}
.calendar-widget div.widget-content {
padding-left:2em;
}
.calendar-widget table {
font-size:xx-small;
}
.typelist-widget {
padding-top:9px;
}
.categories-widget {
}
.tagcloud {
display:none;
}
.powered-widget {
padding-bottom:10px;
}
.lj-view-friends .powered-widget {
margin-top:40px;
}
.lj-view-entry .powered-widget {
margin-top:40px;
}
.archive-widget widget {
display:none;
}
#footer {
background:transparent url() repeat-x scroll left top;
float:left;
height:60px;
width:100%;
}
#footer-inner {
}
#ad-5linkunit {
clear:both;
}
#ad-leaderboard {
margin-bottom:10px;
}
img[src*="userinfo.gif"] {
background:transparent url(http://irondevil.org/icon/categories/dryicons%20stickers/user.png) no-repeat scroll 0 0;
height:0;
padding:20px 15px 0 0 !important;
width:0;
}
img[src*="openid-profile.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/world_globe.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 16px 0 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/help.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 17px 0 0 !important;
width:0;
}
img[src*="community.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/users.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:20px 16px 0 0 !important;
width:0;
}
img[src*="partnercomm.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/process.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:19px 16px 0 0 !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/attachment.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:20px 16px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/rss_feed.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:21px 16px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"], img[src*="icon_groups.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/lock.png) !important;
background-repeat:no-repeat;
height:0;
padding:15px 17px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url(http://irondevil.org/icon/categories/dryicons%20stickers/login.png) !important;
background-repeat:no-repeat;
height:0;
padding:15px 17px 0 0 !important;
width:0;
}
div.ContextualPopup {
margin:5px 0 0 20px;
}
div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup div.Inner {
background-color:#FFFFFF !important;
border:medium none;
color:#4F4F4F !important;
font-family:Helvetica,Arial;
font-size:12px;
padding:0;
width:20em;
}
div.ContextualPopup .Content {
line-height:1.4;
margin-right:50px;
padding:2px 4px 6px;
}
div.ContextualPopup .Relation {
font-weight:bold !important;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:8px 8px 0 0;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:#0063BE !important;
font-weight:normal;
text-decoration:none !important;
}
#lj_controlstrip {
background:#000000 none repeat scroll 0 0 !important;
}
#lj_controlstrip td {
border-bottom:medium none;
}
#lj_controlstrip_statustext {
color:#0063BE;
}
#lj_controlstrip a {
color:#AAAAAA;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_login td {
border-bottom:0 none;
}
#lj_controlstrip td td {
border-bottom:0 none;
}
#lj_controlstrip_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/ptd4dce8000000);
}
#lj_controlstrip_loggedout_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000);
}
#lj_controlstrip input, #lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
background:#101010 none repeat scroll 0 0 !important;
border:0 none !important;
color:#AAAAAA !important;
}
#lj_controlstrip img[src*="userinfo.gif"] {
display:none;
}
#lj_controlstrip .ljuser a b {
background:transparent none repeat scroll 0 0;
color:#0063BE;
letter-spacing:0;
text-decoration:none !important;
}
img[src*="piximix.gif"] {
display:none;
}
#dayyymmmmmdddd h2 {
color:#101010;
font-size:0;
margin:0;
text-indent:-9999px;
}
.skiplinks {
background:#101010 none repeat scroll 0 0;
color:#101010;
margin-bottom:15px;
padding:14px;
}
.skiplinks a {
color:#FFFFFF;
font-size:12px;
text-transform:lowercase;
}

how to install

select journal style
1. Apply any Expressive or Mixit theme. (Please note that some Expressive/Mixit themes may come with attribution images. If these show up in your layout, please comment here.)

2. Scroll down to Choose a Page Setup and select 2 Column (sidebar on left).

links listDefine your links. These are the links that show up at the very top of the page.

custom css
Make sure any drop-down boxes are set to No, paste the code into the box, and click Save Changes.

optional
custom color schemesIf you want to give the layout a different color scheme, replace (CTRL+H) the #0063BE (lighter color) and #22217F (darker color) in the code. Below are some suggested schemes based on Adobe's software.

#C2CD23 #72BC43 Dreamweaver

#E53039 #B10535 Flash

#FFBC00 #FD5701 Illustrator

#DB0862 #521302 InDesign

#B3A2CE #191262 Premiere

appendix

credit and comment
• Please credit thrashmetal somewhere public. (Profile, Links List, Friends Only post, etc.)
• Comments aren't required, but are appreciated!

resources
• Mini icons by Dry Icons.
• Icon by enjoyelsilence

read the layout faq before asking questions!

- all layouts, style: expressive