New layout

[selenay]

So I've taken the plunge and installed one of the new Expressive layouts. It looks rather swish, I feel.

Things I like:

1. You can change almost anything through the CSS
2. Fiddling with the CSS is surprisingly easy, particularly if you've got Firefox's web developer toolbar installed so that examining the source CSS is easy.
3. I've already been able to adjust the text size to make it readable without lots of resizing - woo!
4. The form for replying to comments works much better than my old layout's.
5. Blue text for links in the main body, grey for other links. Between that and the userpics, there is enough colour to be interesting without being blinding.
6. Expressive has some really lovely layouts and there were half a dozen that I almost chose before setting on Urban Noir.
7. Having a link to edit posts from the main page rather than having to go through the toolbar on my About page or click into the comments.
8. Ditto for the tags. And adding to memories.

Tweaks still to do:

1. The grey link text is a bit too pale for easy reading - already spotted where I need to fiddle with the CSS to override this with a darker shade, though.
2. Possibly hide the tag cloud, unless I've got used to it by the weekend and can actually see a point to it.
3. Design a new header for the page to make it properly individual - I've already worked out where in the CSS I can insert this, so all that I need is to actually make it. Methinks Painshop needs some work tonight.

The list of tweaks will undoubtedly grow, but I'm already liking the fact that I can tweak and adjust the layout easier than I could with the old one. And the colours are much more soothing than the old ones :-)

Also, I am supposed to be doing some work but my email is down and it's boring work. Bleh. Is it home time yet?

Comments

[selenay]

CSS isn't too bad to learn, but it does require a bit of adjustment from they way that you might have written an all HTML site. For me, it helps that I'm a computer geek who also knows various computer languages, so CSS looks rather nice and easy by comparison :-)

OK, the code to change the body text is:

body {
font-size: 0.9em;
font-family: Arial, Verdana, sans-serif;
padding: 0;
}

I've highlighted the bit in bold that needs changing for the text size. I use em units, which are resizable in IE. You can use pixels instead, which are easier to figure out but can't be changed in IE. It won't change the text size in the side-bars (I'd need to dig through the code a bit more to find that), but it does change the size in most of the main body of the journal except for the headings. To change the text size of the post subjects, I used:

.page-header2 {
font-size: 1.3em;
padding-top: 1em;
}

Again, you can use pixels instead of ems - this just means that the post subject resize when body text is resized.

I added the padding-top line so that there was a bit more space between posts, making the page easier to read.

For me, that left certain elements in the body resizing that I didn't want to have resizing and they did it in dramatic fashion. To fix that, I added this:

.prevnext, .asset-tags-header, .entryMetadata-label, .item, .entryMetadata-content {
font-size: 13px;
}

This gives those elements a pixel font size and makes them less irritating when I make the font larger in IE at work :-) If you change any of those bold bits, it changes the font sizes. If there are other bits of the journal layout that you'd like to be able to change, let me know and I'll dig through the code for it - this was just the stuff that fixed the bits that I didn't like :-)

I also turned off the page summary bit in the right-hand size bar using this code:

.archive-widget {
display: none;
}

And to change the colour of all the links that are grey in this journal, I used:

.asset-meta-list .asset-meta-comments a,
.asset-meta-list .asset-meta-no-comments a,
.widget-content .item a,
.asset-tags-list .asset-tags-add-tags:link,
.asset-meta,
.asset-meta-list,
.asset-meta-list a,
.asset-meta-list .item,
.asset-meta-list a:link,
.asset-meta-list a:hover,
.asset-meta-list a:visited,
.asset-meta-list a:active
.calendar-widget a,
.calendar-widget a:link,
.calendar-widget a:hover,
.calendar-widget a:visited,
.calendar-widget a:active {
color: #7F7F7F;
}

The other bit that's slightly irritating with the Expressive layouts is that they'll cut off any content (such as graphics) that's bigger than the journal width rather than letting it overflow. It's particularly a problem if you have comics on your friends page. To fix that, add:

.asset-body { overflow: visible; }

#alpha-inner { overflow: visible; }

.widget { overflow: visible; }

.widget-list { overflow: visible; }

And if you want to add a custom banner to the top of the page, you can use and change the URL to your chosen one:

#header {
background-image: url(http://www.mydomain.com/images/lj-banner01.jpg)
}

To add the CSS, when you're in the Edit Journal page go to the Custom Options tab and select Custom CSS. Paste any of the CSS that you want to use into the text box and hit save changes. If you have any questions or need soemthing else fixed, let me know and I'll try to help. I've used the Urban Noir option from the Expressive layouts and I must say that I like it very much.

[jedishadowolf.livejournal.com]

Just now got the chance to work on this - thank you SO much for the help! Got everything lookin' spiffy except one thing. Once I put in the padding for the header so the whole banner could be seen the image doesn't show up. This is the code:


#header {
background-image: url('http://www.celticcowgrl.topcities.com/ljlayouts/fireflyheader01.jpg')no-repeat top center;
padding-top : 290px;
}

Any ideas on what I've done incorrectly here? Thanks again for helping the CSS-newbie!

[selenay]

There are two issues. Try out this code:

#header {
background: url(http://www.celticcowgrl.topcities.com/ljlayouts/fireflyheader01.jpg) no-repeat top center;
padding-top: 290px;
}

The first issue is that you had single quotes around the URL, which doesn't work in CSS (unlike practically everywhere else on the web!). The second issue is that you needed background rather than background-image - this allows you to specify the other requirements (such as placement) instead of just the image source.

The code above worked when I tested it in this journal, so fingers crossed it will be exactly what is needed.

The other thing that I discovered after a couple of days is that the image may get blocked on some people's computers if you have high rated fanfic on your site - it got blocked on my computer :-) To get around it, I used LJ's gallery system and uploaded the picture to that. Then I changed my link to the picture's location - in my LJ the URL for the banner is now http://pics.livejournal.com/selenay936/pic/00002cb7 and it works everywhere I've tested it.

Let me know how you get on!

[jedishadowolf.livejournal.com]

You, Lady, are a goddess! Thanks so much for the help and the tip on using the LJ gallery to store the banner. Now that it's fixed (after multiple tries due to me being less than smart on what I needed to use as a link - long day I guess), I can switch out banners as I please and I can read the font, yay! :)