Log in

No account? Create an account
posted on 2 Sep 2008 at 16:05

A new theme! I love Smooth Sailing, but started to get bored with it. And because the 3 column theme is not a popular one, it seemed a good subject for some experimenting. Plus, tiny icons. I love tiny icons. :3
It seems I can't help but turn every sidebar into a topbar, lmao. :|
Edited on 27th September with another colour scheme.

  • Style: S2 - 3 Column
  • For free, paid, plus accounts (ad placement: between entries)
  • Best viewed at 1024*768 or higher
  • Was tested in Firefox and IE6 (it seems to work well with Firefox, in IE6 the comment pages are sometimes buggy)
  • Color scheme credit

1. Go to LJ's customize page. Type '3 Column' in the search box, hit enter, then apply one of the available themes.

2. Go to the Journal display customization page. At the bottom of the page find 'Display link list', and choose 'No' (this is reallyreally important!). Your links will be placed in the blurb part of the sidebar. Here at Blurb text you can put your text and links in the box.

3. Download the tiny icons.

Go to the Journal style customization page. At the bottom of the page (under Images) expand the Icon menu, and after you uploaded the tiny icons to your own server, paste the matching urls to the boxes. There is an lj user and lj comm tiny icon in the .zip file, after you uploaded those, you'll find the places to paste them under MISC. Icon credit.)

4. Go to Custom CSS, and select the following:
  • Use layout's stylesheet(s): No
  • Leave the Custom external stylesheet URL box blank.
  • Copy + paste the CSS to the Custom stylesheet box.
Hit 'Save changes', and you're done!


Another, blue - brown colour scheme, which I used in my journal for a while:


If you'd like normal sized userpics, find .userpic2 img and .comment_wrapper .userpic2 img and take out "width: 80px;" and "height: 80px;"

If you need a taller topbar, add the same amount of pixels to BASICS - #container - "padding: 137px 0 0 0;" and SIDEBARS - .blurb - "height: 86px;".

Feel free to edit as much as you'd like, if you have any questions, just ask and I'll gladly help, please credit (!), comments are appreciated. Enjoy! :)

posted on 3 Sep 2008 at 2:19 (UTC)
That is so gorgeous! Memming :)
posted on 3 Sep 2008 at 12:10 (UTC)
Thank you very much! ^^
posted on 3 Sep 2008 at 23:27 (UTC)
i'm so picking this one,if i ever get to change my actual layout.
i loveeeeee it dear!
posted on 4 Sep 2008 at 11:41 (UTC)
Whee, thanks so much, I'm really glad! ^^
posted on 5 Nov 2008 at 1:53 (UTC)
I love the look of 1 column, 3 column layouts (if that makes sense at all XD), but I have no idea how to customise them. Is it possible to add a header and adjust the layout width?
posted on 5 Nov 2008 at 16:22 (UTC)
Haha, yeah, it totally makes sense. :D

Sure! Adding a header: I told it already here (uh, I suck at explaining things, tell me if you have more questions.)

Adjusting the layout width: find BASICS -> #container -> "width: 80%;". Leave the percentage and change only the number, if you'd like dynamic width; if you'd like to use a header, the layout looks better with a fixed width (I think) so replace 80% with the width of your header pic in pixels. :)
posted on 6 Nov 2008 at 15:21 (UTC)
Thank you! It worked like a charm. :)

Sorry to bother you again, but I'm having a bit of trouble with my comments pages. Is there any way to style the userpics without also styling the freeze/delete/screen/edit icons? I think they're both under .comment_info img at the moment. I can't seem to make the userpics float left either. ^^;
posted on 7 Nov 2008 at 19:10 (UTC)
You're welcome! :D

Duude, I can imagine, working with the comment pages in 3 column is a pain in the ass. You're right, .comment_info img styles the userpics, but div.commentlinks img styles the freeze/delete/screen etc. icons, so as far as I know, you can play around with .comment_info img as much as you'd like, it shouldn't have any effects on the tiny icons.

But I'm afraid it's not possible to move the userpics to the left. D: The comment infos work like HTML tables. In every table there is a row, and in this row there are two cells: the one on the left with the info (the date when the comment was posted, who posted the comment, the tiny icons, etc.), and the one on the right with the userpic. You can float the userpic to the left, but it'll still be in its cell, that's why it moves only a bit to the left, and not the whole way. So yeah, it can't be done, sorry.
posted on 8 Nov 2008 at 2:03 (UTC)
Thanks for that. :D I'm used to flexible squares/smooth sailing so I'm having a hard time figuring out the classes and what's what. Anyway, I played around with it a bit more and it's looking good in firefox, and passable in IE, which is generally more than you can hope for. XD
posted on 11 Nov 2008 at 14:13 (UTC)
those layouts are really pretty <3 I took them and customize them a little... anyway, thanks, keep up your good work ^^b
posted on 11 Nov 2008 at 18:26 (UTC)
Thank you very much! ^^ Will do (I hope)! :)
(Deleted comment)
posted on 25 Nov 2008 at 17:22 (UTC)
Okay, I don't have an InsaneJournal, hope I still can help.

Firstly in your .blurb section (where you put your info) there is are three < br >s before your HTML table. If you put them in there yourself, take them out, if not, well, uh, we'll fix it, just tell me.

Secondly, you'll need a taller topbar. Open up the CSS, and edit these parts:

BASICS -> #container

padding: 137px 0 0 0;
to padding: 175px 0 0 0; and

SIDEBARS -> .blurb

height: 86px;
to height: 150px; and
padding: 26px 20px 0 20px; to padding: 0 20px;

Well, that's it!
(Deleted comment)
posted on 26 Nov 2008 at 22:37 (UTC)
Hm, I'm not sure what made that big gap. But I see you figured it out fine. :D
All you need to do is edit height: 90px; to height: 245px; in .blurb.
posted on 1 Jan 2009 at 8:44 (UTC)
Hey, thanks so much for the easy to follow directions. The layout is beautiful!
posted on 5 Jan 2009 at 20:22 (UTC)
I'm glad they were helpful. :) Thank you very much!
posted on 28 May 2009 at 5:23 (UTC)
thanks <3
posted on 30 May 2009 at 1:48 (UTC)
Hey, I found your journal via friendsfriends and, since I'm a layout whore, I just snagged this one (gorgeous!) I'm sorry to bother you but I just can't seem to get the ljuser and ljcomm gifs to show, even though I pasted the URLs in the correct places in the stylesheet and I've uploaded them to the same server I did the rest of the icons and they are working fine. This is not urgent or anything, but I'm just wondering if it's just my browser or something. Thanks for the layout anyways! :)
posted on 23 Oct 2009 at 21:29 (UTC)
posted on 27 Jun 2010 at 9:10 (UTC)
Hi, I snagged this layout to use on my journal, it's so pretty. Just a head's up, though, I think the community profile .gif doesn't work. You have it coded as p-stat.livejournal.com etcetc in the custom CSS, but I think LJ's done some fiddling so it should be l-stat.livejournal.com etcetc now.
This page was loaded Jul 22nd 2019, 9:20 pm GMT.