?

Log in

 

Wide Lines - LiveJournal 2nd Ever Style Contest

About Wide Lines

Previous Entry Wide Lines Apr. 12th, 2005 @ 02:57 am Next Entry
Wide Lines
This style is built out of lines, not boxes: it uses the entire screen to display entries. The effect can be clean and efficient or sprawling and relaxed -- there are many options for customization available through the standard wizard interface, and even more open to users with a minimum of layer use. Focus is taken by the content of the journal entries and never overwhelmed by an intruding layout.

The layout is based largely on Cascading Style Sheets, with fallbacks for incompatible browsers always provided. Much of the code was written from scratch, with only the comment structure and the calendar drawing heavily on the core functions. An evolving personalized version of this style has been in place on my personal journal for almost a year and can be seen there now (to users not logged in as the style owner, it should appear identical to Wide Lines). An early draft of this layout in S1 was posted to lj_style and reviewed there.

Code
The code for Wide Lines can be seen here.

Edited to add: Updated code can be found here on widelines.

Themes
Clean Breeze
XCalibrated
Dystopic
Austere
Sweet Hugs
Bleeding Edge
Tarot by Candlelight
Gentle Green
Spring Flowers
Autumn Leaves


Preview Links
A preview of my journal or test journal under Wide Lines with the "Clean Breeze" theme applied:
Recent | Friends | Friends with filter applied
Calendar: 2005 | Calendar: January 2005 | Day: November 2nd, 2004
View Comments | View Comments Chronologically | Post Comment

A preview of my journal or my test journal under Wide Lines with the "Tarot by Candlelight" theme applied:
Recent | Friends | Friends with filter applied
Calendar: 2005 | Calendar: January 2005 | Day: November 2nd, 2004
View Comments | View Comments Chronologically | Post Comment

A preview of my journal or my test journal under Wide Lines with the "Dystopic" theme applied:
Recent | Friends | Friends with filter applied
Calendar: 2005 | Calendar: January 2005 | Day: November 2nd, 2004
View Comments | View Comments Chronologically | Post Comment

A preview of my journal or my test journal under Wide Lines with the "XCalibrated" theme applied:
Recent | Friends | Friends with filter applied
Calendar: 2005 | Calendar: January 2005 | Day: November 2nd, 2004
View Comments | View Comments Chronologically | Post Comment

Please note that my journal occasionally contains adult themes, although the entries used here to preview this style are acceptable for all ages. My test journal tigertest is also available for browsing.

Screenshot
Wide Lines sample My own journal, with Clean Breeze applied

Customized layout Another screenshot to show what can be done with the wizard customizations (and MS Paint): the entire journal scrolls within a fixed section of the background image

Wide Lines sample image Another screenshot to show what can be done with the wizard customizations (and MS Paint): this one scrolls side-shifted entries over a fixed background; the text width is not fixed, so that at any resizing it fills all of the screen except for the left 200 pixels

Features
  • The entire width of the screen is utilized.
  • All colors and all text strings are customizable.
  • This style displays well in all browsers tested so far, including pre-CSS browsers such as Netscape 4, text browsers such as Lynx, and mobile browsers such as Blazer.
  • A hook (Page::lay_print_extra) is provided for paid users to place more widgets on the page.
  • Link lists are fully supported.
  • Comments may be viewed by thread or by date.
  • Placement of header banners and/or background images (including shifting of entries to scroll within a defined area on the background) is supported within the customization wizard.
  • Link decoration (underline, strike-through, etc.) is supported within the customization wizard.
  • The style provides links to the login page, the recent comments page, the "add friend" page, and the "join community" page as appropriate for the logged-in status of the viewer and type of journal shown.
  • The navigation links when viewing the friends page with a filter applied provide skip forward, skip back, show most recent friends filtered, and most recent friends unfiltered.
Features not yet included in this style, but which could easily be added:
  • Different backgrounds for the recent entries, friends, and entry pages (and other pages as well, if wished)
  • Support for imagemap backgrounds and corresponding suppression of navigation links
  • Background image/color selector for LiveJournal's palimg feature
  • Cursor selection
  • Support for selecting the custom style or the old style for comment pages through the wizard
  • Font selection (suggested by livredor)
Other work:
  • Sort properties into more clearly described propgroups
  • Clean up extra function calls in code
  • Make sure all code is commented (including calendar and comment code lifted from the core)
  • Add in more CSS classes for extended customizability (suggested by livredor)
Edited on 4/19/2005 to shift information from the comments up into the main entry text.
Leave a comment
[User Picture Icon]
From:cmshaw
Date:April 12th, 2005 08:24 pm (UTC)
(Link)
Adding another screenshot to show what can be done with the wizard customizations (and MS Paint):

Customized layout
[User Picture Icon]
From:cmshaw
Date:April 14th, 2005 04:49 pm (UTC)

Additional preview links

(Link)
[User Picture Icon]
From:cmshaw
Date:April 14th, 2005 05:00 pm (UTC)

Future features

(Link)
Features not yet included in this style, but which could easily be added:
  • Different backgrounds for the recent entries, friends, and entry pages (and other pages as well, if wished)
  • Support for imagemap backgrounds and corresponding suppression of navigation links
  • Background image/color selector for LiveJournal's palimg feature
  • Cursor selection
Other work:
  • Sort properties into more clearly described propgroups
  • Clean up extra function calls in code
  • Make sure all code is commented (including calendar and comment code lifted from the core)
From:pbristow
Date:April 15th, 2005 07:51 am (UTC)
(Link)
Wow! What I like about this is that I can shrink the width of my browser to a tiny column, and still see everything perfectly. Great if you just want to keep half an eye on LJ while you're doing other things. =:o}
[User Picture Icon]
From:cmshaw
Date:April 18th, 2005 08:39 pm (UTC)
(Link)
Thanks! I'm glad to hear that I'm not the only one who likes to resize my windows sometimes....
[User Picture Icon]
From:livredor
Date:April 15th, 2005 03:29 pm (UTC)
(Link)
I really like this style. What most sold me on it was the option to view comments chronologically; that's a feature that S2 desperately needs, IMO. Would it be possible to adapt your code to other S2 layouts, do you think?
[User Picture Icon]
From:cmshaw
Date:April 15th, 2005 04:00 pm (UTC)
(Link)
Would it be possible to adapt your code to other S2 layouts, do you think?

Yes, it should be relatively easy for layouts that are largely core-based for the comment placement. I've talked about it a little bit before this, but I should probably do a full write-up in lj_style now that this contest has drummed up a bit of interest!
[User Picture Icon]
From:livredor
Date:April 17th, 2005 10:53 pm (UTC)
(Link)
That would be cool, if you could explain a bit how your chronological comment thing works. I'm completely in love with the concept.

Also, I've been playing around with your style on my journal recently, and I have a couple of comments. Still really like it, but I've turned up a couple of minor flaws. Firstly, you haven't set your style to public; is that intentional? I had to copy and paste your code into a style of my own to be able to use it. And that means I can't use your themes (except by copying and pasting the code for them as well.)

The other thing is, I really like the range of options in the wizard. But you've left out a couple that I think are pretty important. The first is the ability to choose whether you want custom comments or not. I mean, I personally think that your comment widgets are the best feature of your layout, but users should always have a choice whether to use custom or LJ default comments. The system layouts which force custom comments (eg the Boxer) annoy a lot of people. The thing about the default is that it has JavaScript features that (at least as things stand) can't be done in S2, such as the QuickReply thing and Brad's funky comment management stuff (currently in beta). Also, some people just personally prefer the default layout.

The other one is the ability to change the font face and size. That's the first thing most users want to customize on any style, (other than background images which you have catered quite nicely). It's the quickest way to make your journal look 'non-default', and more than that, it can be an accessibility issue. For example, some people are visually impaired and can only read certain font combinations on screen or need a minimum size. I appreciate you could do it in a theme layer with CSS, but my opinion is that it's basic enough that it should be in the wizard. Just my thoughts.

Also, how would you feel about my playing around with your code to make it more CSS-able? Because people are always going to come up with customizations you haven't thought of in the wizard. There are a couple of places I've spotted where more named classes would be a real help with flexibility.
[User Picture Icon]
From:cmshaw
Date:April 18th, 2005 04:08 pm (UTC)

Extra features

(Link)
Firstly, you haven't set your style to public; is that intentional?

No, that was a complete oversight -- thank you for pointing it out.

The first is the ability to choose whether you want custom comments or not.

Again, that must have been an oversight on my part; I'll add that in. (Fortunately, that's quite simple!)

The other one is the ability to change the font face and size.

This would be a good feature to add in, I agree.

Also, how would you feel about my playing around with your code to make it more CSS-able? Because people are always going to come up with customizations you haven't thought of in the wizard. There are a couple of places I've spotted where more named classes would be a real help with flexibility.

I'm assuming that if this style is accepted for public use, there will be a period in which it is cleaned up before it is made available. I would greatly appreciate your assistance! (And if it isn't, well, people still might want it as a custom style, in which case they'll be likely to want those customizable featuers even more.) Thank you very much!
[User Picture Icon]
From:cmshaw
Date:May 2nd, 2005 09:52 pm (UTC)
(Link)
I've set up a community widelines for this style and put up a version of the code which contains some bug fixes, new features, and cleaner code.

There's been some talk on news about accepting all of the submitted styles for public use, but I have not been contacted yet about this. In any event, I would love to see how you'd like to extend the code.
[User Picture Icon]
From:cmshaw
Date:April 15th, 2005 07:35 pm (UTC)
(Link)
Adding another screenshot to show what can be done with the wizard customizations (and MS Paint):

Wide Lines sample image

This one scrolls side-shifted entries over a fixed background. The text width is not fixed; at any resizing it fills all of the screen except for the left 200 pixels.
[User Picture Icon]
From:cheesetruck
Date:April 17th, 2005 07:27 am (UTC)
(Link)
I'm sorry, the 'pretty birdies' picture RULES.

I almost want to use it (:

(almost. I think I'll avoid that, as, well, I've got 800 other things to do (: )
[User Picture Icon]
From:cmshaw
Date:April 18th, 2005 08:38 pm (UTC)
(Link)
Hee! Thank you. :)
(Deleted comment)
[User Picture Icon]
From:cmshaw
Date:April 18th, 2005 08:37 pm (UTC)
(Link)
I was wondering why you never used it -- all of the code is still there for you, if you want it....
(Deleted comment)
[User Picture Icon]
From:cmshaw
Date:April 19th, 2005 06:15 pm (UTC)
(Link)
Instructions! Let me know if you have any trouble....
(Deleted comment)
[User Picture Icon]
From:cmshaw
Date:April 22nd, 2005 09:37 pm (UTC)
(Link)
I will! You're welcome to copy the code that's linked here, of course, but I'm going to be cleaning it up a little more and working with some people to extend some of the classes -- I'll post the final results on lj_style and a few other style communities in a week or so, so you might want to wait for that.
(Deleted comment)
[User Picture Icon]
From:cmshaw
Date:May 2nd, 2005 09:48 pm (UTC)
(Link)
The code for Wide Lines and instructions for applying it are up on widelines, if you're still interested!
(Deleted comment)
[User Picture Icon]
From:cmshaw
Date:April 25th, 2005 06:33 pm (UTC)
(Link)
Thank you! I'm afraid I don't know anything about Unearthed, but there are a lot of tutorials out there for putting background images in -- you might want to skim through the links here; also, I have a paid account so I use my LJ scrapbook for hosting images. Good luck, though!
(Deleted comment)
[User Picture Icon]
From:elf_inside
Date:August 24th, 2005 08:25 pm (UTC)
(Link)
Were the winners ever announced? I seem to have missed that somehow....
(Leave a comment)
Top of Page Powered by LiveJournal.com