n(t)u @ livejournal

the mouse behind the wainscot

2009-03-02T18:51:48Z

[comes out of hibernation]

So this is my response to the non-competitive layout challenge. Being me, I decided to make things maximally difficult by shoehorning in as many of the challenge terms as I could manage:

Use an S2 Style other than Flexible Squares or Smooth Sailing: This was a no-brainer, since I always use Bloggish. I fully intended to give Minimalism a test-run, but since I was working to a deadline it seemed easier to stick with what I know
Create a liquid width layout.: Well, it depends how you define 'liquid'. The individual elements are fixed-width, but if you're viewing in 1024x768 then the header should move to the top of the sidebar rather than floating to the left.
Define font sizes in percentages or ems instead of pixels and points.: I always do this anyway.
Choose a colour scheme from ColourLovers or Kuler. (Post the colour scheme with your layout.): Didn't work with the direction I decided to go in, but I'm so going to do this when I make my grid-based pop-themed seasonal layout in Minimalism ;)
Use a background image in an area other than the overall page background.: Oh man. Did I ever.
Manipulate the header so that it appears not as a header but as a sidebar.: Done, for no particular reason other than to tick this off the list
Have elements of your layout break outside the box.: Well, if you have more than about a dozen tags they will spill out of the nice little sidebar tag (see what I did there?) designated for them. But not in any good way.
Use the grid-based approach.: Nope. Next time.
Pick your favourite album of all time and create a visual equivalent for one of the songs on that album.: To do this I would first have to decide on my favourite album of all time, which again was incompatible with deadlines
Choose a decade, century, or historical era and integrate its visual cues.: It's certainly historical. Where exactly in the past it is situated, I'm not quite sure. Victorian medieval?
Represent one of the four seasons through colour and texture.: It's a little bit autumnal, now I look at it, with the warm colours and the fallen petals, but that's accidental
Use a favourite article of clothing as the basis for your layout. (Post a pic of the clothing, too!): Does Mariana's blue dress count? No? Even though there's a swatch of it in the userpic module? Oh well
Pick a historical figure / fictional character (pre-1900) and create a layout that would have graced their LiveJournal had LJ existed.: Yeah, this was the main one. Shakespeare's Mariana via Tennyson and Millais. Mariana would totally have had an LJ and filled it with emo whining about her ex.
Use a quotation in a creative way by playing with the meaning of the words and how they relate to typography.: I am not sure whether slapping a random line of poetry on the top of the scroll constitutes creativity. I suspect not.

Advance warning: I don't love this. It's very graphics-heavy, so unless you have a lightning-fast connection you may want to pass. More of a Zen Garden-style exercise than a usable template, really, but you can have it if you want it. Demo is on my test journal, for now. I've tested it with horizontal ads in Plus and it doesn't break, just looks icky.

To install: select Bloggish Unstyled, choose 2-column layout with right sidebar, then copy/paste the code into the custom CSS box, setting the 'Base Weblog' stylesheet option at the top to 'Yes'.

/*
name: the mouse behind the wainscot
designer: ntu_lj
description: I am aweaty, aweary
theme: Bloggish (unstyled)
layout: two-column-right
*/

body {background:#381a0f url(http://ntutest.files.wordpress.com/2009/03/21.jpg) fixed;
color:#1B0C08;
font-family:'verdana', sans-serif;
font-size: 0.7em;
line-height:1.4em;
margin:0;
padding:0
}

#container {width:100% !important;}

#pagebody {
max-width:940px;
}

/* styling for commonly-used html tags */

a {color:#572d03;
text-decoration:none}

a:visited {color:#C67838}

a:hover {color:#1E49A7
}

blockquote, input, select, textarea {
background:#C67838;
letter-spacing:0.1em;
padding:3px;
border:2px #381a0f solid;
}

blockquote a:visited, .ljuser a:visited {color:#381a0f}

input:focus,textarea:focus {background:url('http://ntutest.files.wordpress.com/2009/03/dot1.png') top right no-repeat;}

.entry-body ul {list-style-image:url('http://ntutest.files.wordpress.com/2009/03/dot1.png');}

/* positioning*/

.layout-two-column-right #beta {float:right;
width:30%;}

.layout-two-column-right #alpha
{float:left;
width:600px;
background:url(http://ntutest.files.wordpress.com/2009/03/mariana_03copy.png) no-repeat bottom left
}

.layout-two-column-right #alpha-inner
{
background:url(http://ntutest.files.wordpress.com/2009/03/mariana_01.png) no-repeat;
margin:0;
padding:180px 50px}

.layout-two-column-right #pagebody-inner
{background:url(http://ntutest.files.wordpress.com/2009/03/mariana_02.png) bottom left repeat-y;
}

/* header styles */

#banner {width:280px;
margin:0;
float:right;
}

h1#banner-header{font:2em 'palatino', times new roman, serif;
letter-spacing:0.1em;
margin:0;
padding:20px;
color:#F4EDCB;
}

#banner h2 {font-size:1.5em;
font-style:italic;
color:#E4CBA4;
margin:10px 20px;

}

/* content styles */

.date-header, .comments-header {font:1.2em palatino, times new roman, serif;
font-style:italic;
text-align:center;
margin:0}

a.subj-link, .entry-header, .module-header, .comment-header {
font:1.3em palatino, times new roman, serif;
letter-spacing:0.1em;
color:#572d03;
text-transform:uppercase
}

.entry-content {
margin:0;
}

.entry-body {padding:5px;
}

.entry-body a {text-decoration:underline}

.ljtags a{font-style:italic}

.ljtags a, b a{text-decoration:none !important}

.entry-footer {border-top:1px #C67838 solid;
padding-bottom:50px;
background:url(http://ntutest.files.wordpress.com/2009/03/footerbk.png) bottom left repeat-x
}

.entry-footer a:hover, .comment-footer a:hover {text-decoration:none}

.comment-footer {border-top:1px #C67838 solid;}

span.separator {color:#E4CBA4;
padding-left:17px;
padding-bottom:5px;
background:url(http://ntutest.files.wordpress.com/2009/03/dot1.png) no-repeat;
}

/* sidebar modules */

.module {background:#E4CBA4 url(http://ntutest.files.wordpress.com/2009/03/mariana_02.png) top center repeat-y;
margin-bottom:1em}

.module-content {
line-height:1.1em}

.module-header {padding:0 10px}

.module ul li {margin-left:12px;
padding:0;
}

.module ul li ul li {
font-size:90%;
margin-left:15px;
}

/* userpic module */
.module-photo  {height:165px;
background:url(http://ntutest.files.wordpress.com/2009/03/title.png) top left no-repeat;
padding-top:32px}

/* main navigation*/
.module-viewlinks {background:url(http://ntutest.files.wordpress.com/2009/03/navigate.png) top center no-repeat;
height:325px;
}

.module-viewlinks ul.module-list {margin:10px 20px}

.module-viewlinks ul li.module-list-item{list-style-image:none;
font:1.8em palatino, times new roman, serif;
letter-spacing:0.1em;
margin-bottom:10px
}

/* links */
.module-typelist {background:url(http://ntutest.files.wordpress.com/2009/03/links.jpg) top left no-repeat;
width:250px;
max-height:450px;
overflow: auto;
}

/*calendar*/
div.module-calendar table {background:#C67838 url(http://ntutest.files.wordpress.com/2009/03/wood.jpg);
border:5px #C67838 solid;
font:1em palatino, times new roman, serif
}

div.module-calendar td  {border:5px #C67838 solid;
background:#DFC69D url(http://ntutest.files.wordpress.com/2009/03/smallbk.png);}

div.module-calendar td a {font-weight:bold;
}

/* tags */
.module-categories{background:url(http://ntutest.files.wordpress.com/2009/03/tags.png) top left no-repeat;
height:250px;
padding-top:70px;
padding-bottom:10px}

.module-categories h2.module-header, .module-syndicate h2.module-header {display:none}

.module-categories ul.module-list {
width:150px;
height:225px;}

.module-categories ul.module-list li.module-list-item {
margin:0 20px}

/* feeds */
.module-syndicate {background:url(http://ntutest.files.wordpress.com/2009/03/syndicate1.png) top center no-repeat;
height:115px;
padding-top:65px;
text-align:center
}

/* lj link */
.module-powered {background:url(http://ntutest.files.wordpress.com/2009/03/petalscopy.png) top center no-repeat;
padding-top:250px;
color:#E4CBA4;
font:1.2em palatino, times new roman, serif;
font-variant:small-caps;
text-align:center}

.module-powered a {color:#1E49A7}

.module-powered a:hover {color:#F6DF41}

/* icons */
.comment .comment-userpic, .entry .entry-userpic  {float:right;
padding:5px;
background:url(http://ntutest.files.wordpress.com/2009/03/wood.jpg)}

.comment .comment-content, .entry .entry-content, .entry .entry-body {
    clear: none;
}

I'm offline until the 11th, so comments/queries/brickbats will be dealt with then.

Biology

2006-08-17T14:39:37Z

url: http://www.btinternet.com/~carolynlsmith/biology/styles.css
compatible with: all layouts

I love all these wallpaper-style monochrome floral patterns around at the moment. Like the mugs they use in the UK Big Brother house, and the Girls Aloud video after which this template is named (because 'Big Brother House Mug' doesn't have quite the same ring to it). Recolours are in the works; I'm thinking white-on-black and black-on-pink, any other suggestions?

Still waiting for submissions to be reopened on the style contest site, so you lucky livejournallers get to see it before everyone else.

How to use styles with Bloggish, part two

2006-08-05T16:41:25Z

This tutorial covers how to use any Style Contest style on your journal by hosting it on your own webspace.

First off, you need to get your hands on some webspace. Option 1 is to use whatever free space you get with your internet account. Not all ISPs are particularly proactive when it comes telling people about how to use this space, so don't worry too much if you don't remember being told about it when you signed up. If you Google your ISP's name along with 'webspace' the details are generally hidden somewhere. The details you need are: the name of the FTP server you're going to be uploading to, the URL of your home page, your username, and your password (the last two are nearly always the same ones as you're using to connect through your modem). In most cases you will need to be using the ISP connection in order to upload to their webspace (so it's unlikely you'd be able to upload to your home account from work).

If you don't connect to the internet through an ISP, but at school or university, it's still worth checking out whether you get any webspace included with your account. Be aware, though, that they may not allow hotlinking of files. Most free hosts you sign up to online (e.g. Geocities) do not allow you to hotlink from their space so the style won't show up on your journal at all. With a little research you may be able to find ways of getting round this, but you may be better off waiting for tutorial 3 to show you how to host the stylesheet here at LJ.

Another option is to buy a domain and pay for hosting; depending on who you decide to host with, this can work out cheaper than a paid account here at LJ but it can be daunting if you've never done it before. I'm with DreamHost at the moment, though that's probably overkill if you just want a place to hotlink files from. In the past, I've also used 34SP and SiteFlip (customer support at the latter really sucks, but that's to be expected at those prices).

Now your hosting is in place, you need to upload your files. Some hosts have a file upload feature you can use in your browser, but it's more likely you'll have to FTP. This is how I set up an FTP connection using Windows XP. I don't doubt that there are all sorts of things wrong with this method (most notably, I don't know whether it works for people without admin privileges) but it works for me:

Click the 'My Network Places' icon on your desktop, and from there select 'Add a network place'

In the wizard that pops up, keep clicking 'next' until it prompts you for the name of your FTP server. Don't forget the ftp:// in front:

Next, tell it your username:

When the wizard finishes, tell it you want it to connect to the server, and fill in the password in the box that comes up:

using IE as an FTP client

free FTP programs

SurFTP

'Fleur'

url(

#banner {
	background-image:url(fleurheaderblack.gif);
	}

@import url('base-weblog.css');

tutorial one

http://myweb.tiscali.co.uk/notthatugly

http://myweb.tiscali.co.uk/notthatugly/fleur/fleurheaderblack.gif

http://myweb.tiscali.co.uk/notthatugly/fleur/

tutorial one

http://myweb.tiscali.co.uk/notthatugly/fleur/fleur.css

The Literary Life

2006-07-06T11:29:10Z

url:http://www.btinternet.com/~carolynlsmith/literary-life/styles.css

compatible with: all layouts

My personal favourite of my style contest efforts, based on a photo of my prettiest second-hand books.

Friends-only banner:

And a couple of icons:

Tropical Dream

2006-07-05T15:09:38Z

url: http://www.btinternet.com/~carolynlsmith/tropical-dream/styles.css
compatible with: one-column, two columns (sidebar on right)

This has been tweaked a little from the Style Contest version to improve handling of icons, comments, and the sidebar. Note that if your links are split up into separate sections you'll get multiple 'links' headings, so you'll need to merge them into one section or paste the following into the custom CSS box:

.module-typelist {background:none;}

This is one reason why I am avoiding graphic sidebar headers in future ;)

Friends-only banner:

And a couple of thirty-second icons:

The font used in the headers and banner is Creampuff, downloadable here.

How to use styles with Bloggish, part one

2006-07-05T14:42:26Z

The recent Style Contest was aimed at producing a library of styles for the new standard Six Apart template. The Livejournal version of this template is an S2 theme called Bloggish, and in theory anyone using Bloggish will be able to apply any one of the 150-ish styles available to their journal.

To make things a little easier, I'm going to walk you through applying one of the styles here, how to host a style on your own webspace, and finally how to host a style entirely on Livejournal.

First off, you need to head to the customise page and set your theme to Bloggish:

We're setting the theme to '(None)' just in case the styling in the other themes interferes with ours.

Next, we need to set the number of columns. Click on the 'Custom Options' tab:

Many styles support all four configurations (one column, two columns with left sidebar, two columns with right sidebar, and three columns) but not all of them do, so check beforehand that the style works with the layout you want.

Note that even though we're using a custom style here, I've set 'Base Weblog' styles to 'Yes'. This is because I'd rather use Six Apart's bandwidth than my own. All Style Contest themes had to link to the Base Weblog stylesheet, so you are safe leaving this on. Save your changes.

From here, select 'Custom CSS' to get to where the magic happens:

Where the URL is in the screenshot, copy and paste the URL given here in the style post. Save your changes, and go and check out your journal's new look!