Log in


LiveJournal 2nd Ever Style Contest

About Recent Entries

New features Apr. 25th, 2005 @ 11:50 am
Now that the style contest is done, I would be very interested in seeing some write-ups in lj_style about the new features that people have developed and displayed here, such as color-coded security or extensive use of palimg backgrounds.

I have code and explanation for my "sort comments chronologically" feature here, which I hope will interest some designers.

Submissions Closed Apr. 12th, 2005 @ 03:06 am
According to my clock, it's now midnight PST, so we are no longer accepting submissions for the style contest. We're going to take a day or two in the office to pull together the submissions and discuss the best way to poll the userbase. Voting will be open soon.

Thank you so much to everyone who's participated! The sheer diversity of the styles that have been submitted is almost overwhelming. There's some fantastic work here, and I know I personally am going to have a whole lot of trouble picking the ones I like best. I can't wait to see how the polling goes.

Wide Lines Apr. 12th, 2005 @ 02:57 am
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.

The code for Wide Lines can be seen here.

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

Clean Breeze
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
More preview linksCollapse )
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.

ThumbnailsCollapse )

  • 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.

Transmogrified Apr. 12th, 2005 @ 02:57 am
This is a CSS based layout. There are lots of options to fiddle around with in the wizard, which is both good and bad because it is kind of overwhelming. The components in the sidebar can be added, removed, and reordered as needed. One of the more interesting things about this layout is the sidebar. There is an option to remove the sidebar in the individual entry page. Also, I put in the option to remove the sidebar from specific friends groups, which is useful for communities that post a lot of huge graphics without a cut (the sidebar just cuts into everything). What's not customizable are the little icons that are next to the entry metadata.

Preview Links:
Recent Entries
Entry page
Layer Browse


Read more...Collapse )

"Negatives" Apr. 12th, 2005 @ 07:52 am
I create this style originally to use as a simple, black and white style that looked good without using images and loaded quickly on any connection. For this contest, I added colour and background customisation to it, and a great deal more. Negatives is an elegant, highly customisable, div-based style that can be given an individual look using only the wizard interface. It provides an eclectic mix of customisations, and notably allows texture customisation to a degree found in few other styles.

Preview Links
Recent Entries
Archive (Calendar)

Theme links!Collapse )


Customisable OptionsCollapse )
Other entries
» Nebula

Nebula is now live

Nebula has been voted one of the top five styles in LiveJournal's second ever style contest, and is now available for use with your journal via the Customize Area. A big thank you to everyone who voted.

Now that Nebula is publically-available, I will no longer be accepting requests for help with this style, and comments to this entry are now screened - there are just too many of you out there. Please report any problems you're having with your LiveJournal to Support - not here, not in my journal. I will fix any bugs with Nebula as they crop up by way of support requests.

The official Nebula community (well, as official as you can get) can be found at s2nebula. Here's an introduction to the community.

Once again, thanks for choosing Nebula!

Here's a funky CSS-based design I put together. It features a rather nice sidebar design which can go on the left or right side of the page, and the tableless page structure even shows up fine (with the obligatory minor tweaks) in Windows Internet Exploder coughhackptooie.

The name is meant to represent the galaxy of customisation options available (boom boom): there's very little design structure hard-coded into the style, so those customisations that can't be made via the Customize pages can most likely be made instead by overriding the stylesheet. The basic design as shown in the preview links is pretty clean and uncluttered, but you can make it as messy pretty individual as you want.

Nifty little things include a strip-design mini-calendar, support for background images and the ubiquitous linklist and page summary features, as well as the option to use LiveJournal textured background images in up to three different content areas. You can mess with widths and margins to accommodate a background image: hell, I even found time to stick support for the new "AJAX" dynamic comment management system in there, but that's limited to deleting until I (or whoever takes over) can figure that one out.

So, on to the previews!

Preview Links:
Recent Entries
Archive (Calendar)
Entry page
Layer Browse

Themes: (with much love to kamara for being the blinkie pony goddess that she is)

...gotta catch "em allCollapse )

Sample Theme for new style Nebula
» Gradient Strip
Gradient Strip

This style was inspired by the colorbar memes that have circulated on LiveJournal. I enjoy working with the palimg textures and was ready to move on to automated color palettes, so this seemed like the perfect opportunity to combine both.

Aside from the use of colors and textures, some features that I'm particularly proud of are the customizable date formats which link to the Year, Month, and Day views, the formatting of Month pages, and the appearance of both the top-level entry and the comment being replied to on the Reply pages.

The style does not yet contain a Link List, Page Summary, mini-calendar, etc. I intend to add them, but felt it was best to have the main functionality of the style in good working order rather than putting together a lot of half-finished features. I also plan to expand the customizable properties and add more theme layers.

Preview LinksCollapse )

ScreenshotsCollapse )

Customizable PropertiesCollapse )
» Tranquility II
Tranquility II
Tranquility II is a CSS based design with tons of customizations available. I have included a few themes as well as one 'Theme' which demonstrates the ability to override the CSS and create a new layout. Check out the 'Mobile' theme to see what I'm talking about. The style, also has a built in 'print' view through CSS.

Sit back and relax... tranquility.

Preview Links
Recent Entries
Archive (Calendar)
Layer Details

Check out all of the themesCollapse )

Tranquility Screenshot
» Drifting
A simple but classy CSS based design. I love CSS based designs because they tend to break much less often than table based designs.

Ideally, this design will take input for a light color and a dark color, and apply those colors to the top image and the header image. As I have no access to the palimg information for LiveJournal, I had to make due the long way, and create a different image for each theme.

Then the color customizations would be as follows:
Light (Page Background Image)
Dark (Accent Color)
Content Background
Text Color
Title Color

This style implements linklist support, page summary support, and free text support, and it also allows the user to turn the mini calendar off, should they wish to do so. Full list of customizations can be found here.

Preview Links
Recent Entries
Friends (w/ Communities)
Archive (Calendar)

Purple - 4010915
Latte - 4011028
Electric - 4011164
Strawberry Shortcake - 4011227
Newspaper - 4011285
Kiwi - 4011362
Pretty in Pink - 4011418
Grape Vine - 4011437
Tangerine - 4011570
Granny Smith - 4011638


[Edit: Color indexed pngs can be found here (h1 icon - index 13 will want to match the background color property) and here (top bar). I have been trying to work with prop_init, and I can't tell if it's not working because the image isn't actually on LiveJournal or what, but I figure I'm going to have to let the devs do it, but everything is in place for it in this test layer.]
» Newsworthy

Here is a style I wrote this weekend because I wanted to create a style that really takes advantage of the fact that S2 is really a programming language. I also wanted to see if I could create something that took better advantage of the space available on the high-resolution displays I use most of the time. To those ends, I took inspiration from a newspaper on my desk, and created Newsworthy to lay out entries in columns wherever possible.

My favorite bit is the friends'-entries page, which, instead of simply displaying the entries in strict chronological order, sorts them by journal, ordered so that the journals most recently updated are located at the top of the page.

As I've only been working on this style for the last four days, it's pretty much still in the 'beta' phase. It'll get better as I have time to use it and find and work out the kinks. Apologies also to those bound to Internet Explorer; some of the pages may not render properly, as that browser doesn't handle the widths of boxes correctly (it expands them to fit the content, even when it shouldn't).

Preview Links

ThemesCollapse )


Addendum: The layer id for the style is 3986133.

Top of Page Powered by LiveJournal.com