matgb | Theming your LJ using Expressive and Style Sheets (Reply)

OK then. Having fixed my template, I remembered that I promised aaages back to do a walkthrough on how I made it and how you can make your own—using just a Cascading Style Sheet, which is so easy even I can do it. This is especially true for

nadriel who, despite having a BSc in Computer Science is still using the Piximix theme I set for him as a joke 6 months ago. So here we go...

First, go to Customize and make sure you're in S2. S1 is deprecated and I've no idea how to start with that, besides, we're only using a stylesheet so even a non-coder like me can do it easily. Also, because it's just CSS, free accounts can do it as well. Now, click the Look and Feel tab. Select Expressive from the first drop down, and whatever language you want from the second. In the Themes drop down, select (None). That bit's also very important, we're putting our own theme in here, ok?

Now, click Custom Options. This stylesheet is tested for Three Column (content on left), which works best for me—it may be that you'll need some tweaks to get it to work if you want different positions, no idea, if you do, and it does, let me know and I'll try to help. The rest of the options on this bit are personal preferences, although having the scrollbars on seems to mess things up in some browsers, so best leave them off. If you're paid or Plus, then don't disable the 'customised comments page', what's the point of styling your journal then having it so no one sees the effort?

Right, from now on, I can't link. Save these changes, now click Text and make any changes there you want; in the 'text' area you can put any html you like, but leaving it blank is best for now. Save, now go to Sidebars. My settings are Cloud, No, 0, Profile, Links, Page Summary, Syndicate, Custom Text, Calender & Tags. The last boxes are for sidebar text, it's how I've got the brief blurb with the link to my campaign du jour over to the right. OK, now save all changes. Done? Good.

Click the link to Custom CSS. For the 'use base weblog' question, the answer is yes, that gives you the core structure in a white background/black text plain layout. Copy and paste the contents of this textarea into that big box below.

body.layout-wt #alpha { margin: 0px 180px 0px 180px; }
 body.layout-wt #beta { float: right; }
 #alpha {margin-top: 15px; }
 #beta { width: 180px; margin-top: 15px; }
 #beta-inner { }
 #gamma { width: 180px; margin-top: 15px; }
 #gamma-inner { }

#home { color: #fff; background: #000; font: verdana;
 font-family:Verdana, ariel, helvetica, sans-serif; }
#header-inner {
 position: static; /* fixes positioning issue on IE  */ 
 min-height: 100px;
 background-position: center bottom;
 background-repeat:no-repeat;
 background-image: url(http://taktix.org/images/death-header-5.jpg); 
}
#header-name { font-size: 40px;
 padding: 1px 10px 0 1px;
 margin: 0;
 text-align: right;
 color:#ee5;
}
#header-description {
 font-size: 20px;
 padding: 1px 10px 0 1px;
 margin: 0;
 text-align: right;
 color:#ee5;
}
#alpha-inner {
 border:1px solid #fff;
 padding:1px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
.asset {
 background: #4a525a;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 margin:5px 3px 0px 3px;
}
#comments { background:#000000 }
.comment {  background:#4a525a;  
 -moz-border-radius: 10px;  
 -webkit-border-radius: 10px; 
}
 .widget-inner {
 border:1px solid #fff;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 padding:1px;
}
a:link { color:#9ad; text-decoration:none;}
a:visited { color:#a7a; text-decoration:none;}
a:hover { text-decoration:underline;}
a img { border-width:0; }

.asset-name-hover { color:#ee5; background-color: #000; }
 .asset-header {
  -moz-border-radius: 10px;
  webkit-border-radius: 10px;
  padding:5px;
  background-color: #000;
 margin:10px 3px 0px 3px;
}
.asset-header a {
  color:#ee5;
  background-color: #000;
}
.asset-name page-header2 h2 {
  font-size: 1em;
}
.asset-body {
 padding: 5px;
}
.asset-meta {
  text-align: right;
  text-transform:uppercase;
}
.asset-tags {
  text-align: right;
  text-transform:uppercase;
}
q {
background:#777;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 font-style: italic;
}
blockquote {
 background:#777;
 padding:10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
blockquote blockquote {
 background:#4a525a;
}
h1, h2, h3, h4 {
  color:#ee5;
  font-weight: bold;
}
.widget-header {
  text-transform:uppercase;
}
.typelist-widget widget {
  line-height:0.1em;
}
.user-icon {
 float: right;
 margin-right: 5px;
 padding: 1px;
 font-size: 10px;
}
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 19px 15px 0px 0px !important;
background: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
}
.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 18px 9px 0px 0px !important;
background: url(http://pics.livejournal.com/snapesbabe/pic/000fy0p5);
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fzf79);
padding: 18px 11px 0 2px !important;
}

That gives you my layout, exactly as I've got it, colour scheme and banner image and all. Which I'm sure you don't want, you don't want to copy me, you want to personalise, right? Besides, even I don't like my current header graphic anymore,s o you'll want to change that ASAP. So let's go through it...

body.layout-wt #alpha { margin: 0px 180px 0px 180px; }
body.layout-wt #beta { float: right; }
#alpha {margin-top: 15px; }
#beta { width: 180px; margin-top: 15px; }
#beta-inner { }
#gamma { width: 180px; margin-top: 15px; }
#gamma-inner { }

This section of code exists for two reasons. 1) There's something wrong with the Expressive source the designers can't find 2) Internet Explorer Sucks. It's a fix, don't worry about it, ignore it and move on.

#home { color: #fff; background: #000; font: verdana;
font-family:Verdana, ariel, helvetica, sans-serif; }

That code is fairly simple. Font color (in my case white, #fff), base background colour for the page (um, black, natch, #000) and the fonts. First rule of web design—if you don't know what font to use, use Verdana, it works. If you prefer other fonts, that's your call, but if you use MS Comic Sans for the body font I will seek you out and shoot you.

#header-inner {
position: static; /* fixes positioning issue on IE */
min-height: 100px;
background-position: center bottom;
background-repeat:no-repeat;
background-image: url(http://taktix.org/images/death-header-5.jpg);
}

This is the header section. The min-height is dependent on your header size + 20px. Avoid making a large image BTW, it's a bad plan, creates poor usability and just clutters the screen. The last line is the location of your image, replace the code there with the url you're hosting it in (you can use the LJ scrapbook if you want). Really. Replace that link. Because if you don't, I might goatse you for the sake of it.

#header-name { font-size: 40px;
padding: 1px 10px 0 1px;
margin: 0;
text-align: right;
color:#ee5;
}
#header-description {
font-size: 20px;
padding: 1px 10px 0 1px;
margin: 0;
text-align: right;
color:#ee5;
}

The styling for the Heading and Sub-Heading—I've aligned mine to the right and coloured them yellow, feel free to change those colours, although right alignment works better with the sidebar below them—Expressive gives 'home' links to the top left anyway.

.asset {
background: #4a525a;
border:1px solid #fff;
padding:1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.asset is your journal entries, or friends page entries. I like to have this a lighter tone than the main background, I took the colour from Daring Fireball at the suggestion of DK. I like the solid border. Now,t he last two lines are controversial. They're browser specific, and from CSS3, which is still in trials. Browsers aren't supporting CSS3 fully yet, but I like the curves on the borders they give—remember, the person that looks at your layout the most is you, assuming you use your friends page, so if you don't like it, then change it—if you do like it, then it's good for others as well. If you're using IE, the curves won't show, nor will they in Opera, sorry about that. Leave the code though, it'll keep me happy ;-)

#comments { background:#000000 }
.comment { background:#4a525a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

The comments area. The main area is backgroun black—you can change this if you like, and each comment is back to my default background, again with the curves. NB, if you want to have reply comments threading in in a different colour again, you can do this, copy and paste the bit that starts .comment, replace .comment with .comment-even and then change the background colour. I haven't done this, but it might suit you to do so.

.widget-inner {
border:1px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:1px;
}

The sidebar boxes, gives each box 'widget' a border, defines the colour, and gives it the curves. If you want to give them a background, copy code from above to do so here.

a:link { color:#9ad; text-decoration:none;}
a:visited { color:#a7a; text-decoration:none;}
a:hover { text-decoration:underline;}
a img { border-width:0; }

Some base styling, makes the links everywhere into shades of blue and purple that work with my colour scheme, andmakes them underline on mouseover—if you change the colour scheme, you'll likely need to change these colours.

.asset-name-hover { color:#ee5; background-color: #000; }
.asset-header {
-moz-border-radius: 10px;
webkit-border-radius: 10px;
padding:10px;
background-color: #000;
width: 95%;
}
.asset-header a {
color:#ee5;
background-color: #000;
}
.asset-name page-header2 h2 {
font-size: 1em;
}

Styles the header of a text area you may want at the top of your journal as a static 'post'—I have a brief description of me and a link to the signup page, in case family or RL friends turn up and want to say stuff, you might want to put in friends only banners or whatever—it's public, but it saves forward-dating a post, no comments, but can't have everything. The rest of the code is some tidying up to make sure specifics still display properly, 'base weblog' sometimes defines specifics it technically shouldn't.

.asset-body {
padding: 5px;
}
.asset-meta {
text-align: right;
text-transform:uppercase;
}
.asset-tags {
text-align: right;
text-transform:uppercase;
}

Some code for each post. Adds padding so your text doesn't go against the border, turns the entry tags and post navigation into uppercase, and aligns stuff to the right—my preferences, feel free to delete.

q {
background:#777;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-style: italic;
}
blockquote {
background:#777;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
blockquote blockquote {
background:#4a525a;
}

My custom nifty styling—other blogging platforms like Wordpress and Blogger have blockquote styling into the CSS anyway, for some reason LJ doesn't and not enough LJers use them. This code gives emphasis to any quotes you put in, or in the comments boxes. You can dump it, but I recommend against it-choose a lighter (or darker) colour to add emphasis—you can even give borders and stuff if you want. the last few lines turn the colour back if there's a quote inside a quote, which can be very useful if you read people like DK in the LJ feed (

devils_kitchen), as they have nicely styled blogs and it carries over better if you do to.

h1, h2, h3, h4 {
color:#ee5;
font-weight: bold;
}

Headers—I've chosen yellow (ee5) for my header colours, so any header I don't define specifically is yellow. Choose your own colour if you want, red and bright green can work well against black as well—make sure it's different to your link colour though, don't want to confuse people.

.widget-header {
text-transform:uppercase;
}
.typelist-widget widget {
line-height:0.1em;
}

First part makes the widget headers uppercase, second part is code cleanup, I forget why it's there now, oops...

.user-icon {
float: right;
margin-right: 5px;
padding: 1px;
font-size: 10px;
}

Floats the userpic to the right rather than the default left. Because Expressive puts the userpic into the entry not the header, it means text flows around it, I personally dislike this a lot, feel free to not do this but, well, it works better, trust me.

That's, technically, it. The last bit ought to be deleted unless, well, DALEKS!

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 19px 15px 0px 0px !important;
background: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
}
.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 18px 9px 0px 0px !important;
background: url(http://pics.livejournal.com/snapesbabe/pic/000fy0p5);
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg);
padding: 19px 15px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fzf79);
padding: 18px 11px 0 2px !important;
}

All of the above changes the userinfo icons into daleks and tardises. You may or may not want to keep it, or change the images to stuff more to your taste.

There. Easy, isn't it? Anyone can make their journal look pretty. Well, prettier and more personal, anyway. All it takes is a bit of patience and the ability to pick colours. No prizes for guessing why mine is black and grey, right?

Feedback welcome, even if you don't like it. And yes, I'm aware bits of the code could be cleaned up, I spent a chunk of the afternoon getting it this clean already...