|
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 ![[info]](http://p-stat.livejournal.com/img/community.gif) 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. |
|
Screenshots
|
Apr. 15th, 2005 @ 12:40 am
|
|---|
|
I've noticed that the thumbnails for voting are tiny. The ones accompanying submissions also tend to be small. So, for convenience, I've taken screenshots of every style. I hope this helps. |
|
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.
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
( More preview links )
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 ![[info]](http://p-stat.livejournal.com/img/userinfo.gif) tigertest is also available for browsing.
Screenshot
( Thumbnails )
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. |
|
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
Friends
Archive
Entry page
Layer Browse
Screenshot:
( Read more... ) |
| » "Negatives" |
|---|
Negatives
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
Friends
Archive (Calendar)
Entry
( Theme links! )
Screenshot
( Customisable Options )
Apr. 12th, 2005 @ 07:52 am
|
| » Nebula |
|---|
Nebula is now liveNebula 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!
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
Friends
Archive (Calendar)
Entry page
Layer Browse
Themes: (with much love to kamara for being the blinkie pony goddess that she is)
( ...gotta catch 'em all )
Screenshot:
Apr. 12th, 2005 @ 06:49 am
|
| » 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 Links )
( Screenshots )
( Customizable Properties )
Apr. 12th, 2005 @ 12:41 am
|
| » 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
Friends
Archive (Calendar)
Entry
Layer Details
Themes
( Check out all of the themes )
Screenshot
Apr. 11th, 2005 @ 07:44 pm
|
| » Drifting |
|---|
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
Friends (w/ Communities)
Archive (Calendar)
Month
Day
Entry
Reply
Themes
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
Screenshot
[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.]
Apr. 11th, 2005 @ 06:13 pm
|
| » Newsworthy |
|---|
|
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
( Themes )
Screenshot
Addendum: The layer id for the style is 3986133.
Apr. 11th, 2005 @ 03:23 pm
|
| » Dear Diary… |
|---|
|
My third and final submission is Dear Diary. This layout features a side navigation bar from which underlined headings run across the page and fade. It also allows the user to optionally have a coloured background pattern on the top title bar. A dozen patterns are included right now, and the user can choose both the foreground and background colour of them.
Apr. 11th, 2005 @ 06:18 pm
|
| » Mobile Device Style |
|---|
Mobile Device Style
This style is probably different than what everyone else is making because it's not "pretty". In fact, it's very basic. The point of the style is to use it on mobile devices (such as cell phones and PDAs), because it's basically just the text and nothing fancy (and no pictures except lj user heads and such). I came up with the idea when one of my friends asked me to make her a style to use on her SideKick, since she uses Component in her journal, which is hard to read on a little screen. Plus, it takes a long time to load.
My idea with this style, if possible, is for it to automatically have it applied to S2 journals being viewed on a mobile device. I know there is already code in place that identifies a lot of mobile devices and automatically shows LiveJournal pages in the "lynx" style, so this would be the same thing, except have it apply to S2 styles. That way, a user can still have a pretty style on their journal when it's being viewed on a normal computer. It could still be a choice in the drop-down menu as well, in case someone wants it to be default.
There are no themes or CSS involved in this style because they're not needed. The point of this style is not customization, but simplicity. However, the style is almost entirely XHTML 1.0 Transitional compliant as well as Section 508/WAI accessible. I say "almost" because there are some things in the style that are generated by LiveJournal (such as forms) that aren't compliant, plus a few other little things that would have required me to have each "read comment" link have different wording, which isn't very appealing. So, this style can also be used by blind users, and I assume it'd be easier for a screen reader to read a style like this than a more complicated style.
Preview Links
Recent Entries
Friends
Friends (including communities and syndicated accounts)
Archive (Calendar)
Day View
Month View
Entry
Entry with Collapsed and Multiple Pages of Comments
Reply to an Entry
Reply to a Comment
Style Information
Screenshot
Apr. 11th, 2005 @ 02:03 am
|
| » A Novel Conundrum |
|---|
A Novel Conundrum
I was re-reading my copy of Bringhurst, and was suddenly struck by a desire to see the extent to which I could replicate decent-looking print typography in, well, my LJ. As a consequence, the themes become not sets of colours, but sets of typefaces, adding styling to the text itself. This style uses many of the moderately interesting features of CSS2 such as first-letter and first-line pseudo-elements, as well as custom leading and letterspacing to actually make the text look decent (sometimes). The more arcane typographical features of CSS have been neglected. An early draft of the desired appearance (laid out in InDesign CS) is available at http://www.its.caltech.edu/~taion/lj-proof.pdf. The fleuron used was gladly donated by Wingdings after it was mugged in a dark back alley. The only font used that is somewhat obscure is Frutiger Linotype, which comes with Microsoft Reader, and is in general just a beautiful font to have anyway.
Preview Links
Recent Entries, Edit: (Offsite backup because Filetmignon hates IE)
Friends
Archive (Calendar)
Entry
Layerbrowse
( alternate themes )
Screenshot
Apr. 10th, 2005 @ 07:34 pm
|
| » (No Subject) |
|---|
|
Apply Externally is another simple, flat-colour layout. It has a fixed onscreen structure which includes a side navigation bar and a scrolling content area. It's completely colour-customisable and supports the same paraphenalia as Statuesque does, with the same nod to extensibility.
Again, the presentation is entirely CSS-based.
Apr. 11th, 2005 @ 07:25 am
|
| » Texturized |
|---|
|
Here's the second of my two layouts, this one featuring a bit more to look at and adding a few more things to customize. This adds a further level of background configurability, as well as a full positionable sidebar that was cut down in my previous layout. Again making heavy use of palimg_tint for some nice custom textures, this one should be fairly flexible and allow for a large range of designs.
The themes included are pretty much the same as for my previous layout dinky (with a couple of variations here and there to account for more to customize)
and the Themes
Hope you like this one too :)
Apr. 11th, 2005 @ 07:57 am
|
| » 3-column style |
|---|
3-column
It's pretty much what the name says. lol. A three-column style. It's not as flexible as I wish it was, but I had two extremelly busy weeks. It does have the option to add a header and a background image, though. Well, I suck at writing intros, so...
Preview Links
Recent Entries | Friends | Archive (Calendar) | Layer Browse
( themes )
Screenshot
EDITED 21/jun/2005
Answers to common questions:
1. The reply-type of text don't work
Sorry about that. I'll look into it. I'd suggest using icons at least for now.
2. Icons don't show up
Not much I can do about that. I'll email the LJ-person who I have been in contact with. Meanwhile, as requested, here are the original images:
    
They have a transparent background.
3. How do I edit the blurb text?
Go to "manage" then "customize". Look for "individual settings" and click it. Then click on the tag "text". At the bottom of that page, you can edit the blurb title and the blurb text.
4. How do I center the header?
It was supposed to be centered already, like mine is. I'll look into it.
5. The layout looks messed up on FireFox.
This is weird. I have FireFox, and it loads the page perfectly. Are you sure you don't have a big image or quiz result or something that is enlarging the posts area by itself?
6. How do I add more than five links?
At the link customization screen, just click the little button that reads "more". That is, if you have a paid account. Someone told me free accounts can't have more than 5 links.
7. Where can I find overrides for this style?
ishie has written a tutorial on how to center your header, add side boxes and change the time stamp: here
I've also been informed there's a new community for the style: 3column.
Feel free to create your own. I could even link to them here if you would let me.
8. Insert any questions about tags here.
The tags function has just been added. I don't know how to work with it yet, and I doubt it will happen anytime soon. I just got a new job, and I'm going completly insane with papers due on college, so I don't really have much free time. Sorry.
Apr. 11th, 2005 @ 11:14 am
|
| » Flexible Squares |
|---|
Flexible Squares
A help community for the style can now be found at s2flexisquares.
I started writing an S2 style because I wanted a layout that could be easily modified by using CSS, and I eventually ended up with this. The layout can be changed quite a lot by overriding or extending the stylesheet. I also wanted something that could be easily customised using the wizard as well, especially when it came to colours.
At the moment, there isn't much stuff in the sidebar, but I'm sure those can be added later.
Preview Links
Recent
Friends
Archive
Entry
Layer Info
Themes
( themes for the style )
Customisation Options:
( what you can customise from the wizard )
Screenshot
The screenshot is of the default style with no customisations. My own journal is currently using the "Fresh Paint" theme, with no other customisations.
Apr. 11th, 2005 @ 03:42 pm
|
| » Color Play |
|---|
Color Play
This style is fairly recent, and is one I created for my own use. I'm not sure exactly where, or why, I came up with the idea of using colors to indicate the entry security, but I like the effect, a lot. (For the public version of the style, I have included the option to also have text indicators of security; I don't use them, but other people may prefer to.) Again, I have tried to add a fair amount of customizability -- colors, background and header images, user picture options, order of sidebar elements, width and position of the sidebar area, width and position of the journal content, transparency options, things like that.
The preview is of what I'm currently using for my own journal, which is using something that isn't quite one of the provided color themes, but is similar, and also uses a (nonscrolling) background image. All changes were done using the customization wizard.
( Full list of customization options )
Preview Links
Recent Entries
Friends
Entry
Archive (Calendar)
Code
Theme Links
(ETA -- it was brought to my attention that the theme previews only really show public entries, unless you're me. I've included small and large screenshots with public, protected, and private entries, so you can see the full range.)
Day (browse) screenshots: large small
Night (browse) screenshots: large small
Spring (browse) screenshots: large small
Summer (browse) screenshots: large small
Autumn (browse) screenshots: large small
Winter (browse) screenshots: large small
Monochrome White (browse) screenshots: large small
Monochrome Black (browse) screenshots: large small
Pastel Rainbow (browse) screenshots: large small
Blackberry (made by hopefulnebula) (browse) screenshots: large small
sample user layer (what is shown in the screenshot)
Screenshot
Apr. 10th, 2005 @ 07:29 pm
|
| » Geometrix |
|---|
I had always wanted to create a layout that accomplished two things: (1) it would be completely user-friendly so I could share it & ensure that people could easily customize it, and (2) it would incorporate many of the neat functionalities I had seen & used elsewhere. I'm not quite sure if I accomplished that given that I only started last week, but I'm pretty happy with what I came up with.
My design, though not amazingly chic, was based more on functionality than a cool-factor. I'm a minimalist at heart, yet, this layout can range from incredibly simple to being as busy as your heart desires through the Customization area. That being said, here is a short list of all that is possible with Geometrix:
- Ability to have sideboxes (components, sidebar, what-have-you) on either side of the entries OR on both (or none at all).
- Ability to have "short" entries on the Recent Entries page (similar to Digital Multiplex OSWD).
- Automatic Color Palettes (similar to Haven). I will admit that my coding on this is a little quirky, so sometimes you may have to override the link color to be a bit more suitable. (Hey, what do you expect in a week?? :P If anything drove me crazy about this layout, it was this! I almost didn't submit it because I'm a perfectionist at heart and this was driving me absolutely mad.)
- Ability to specify a different background for pretty much everything! (Hence what I mean when I say you can make it incredibly busy if you like!)
- Ability to specify a header image.
- Ability to put metadata (music & mood) in their own little sub-box within the entry.
- Ability to hide the sideboxes on the Entry & Reply pages.
- You will be able to change the text on almost anything & everything.
- You can specify images to be used for the post comment/read comment/permalink/etc. links instead of text.
- You can specify the profile sidebox to randomize between up to five userpics. (In theory, I could add more, I just didn't have time.)
- Other new sideboxes include a text message sidebox, up to 3 Music/TV/Book/etc. sideboxes, Icon Display sidebox, and a search sidebox for Dictionary.com, Thesaurus.com, Google & Google Image Search as well as an LJ search.
- And more...!
Here are the table of links & color themes. Note that any theme marked with an asterisk (*) is also an example of other modifications that can be customized through the Customization Wizard. There's a variety of color schemes here - I think I made thirteen. The color palette functionality comes up with some interesting color combinations! :)
( Themes )
Also, if you just go to my journal: pyaari, you will see another example of this layout, customized solely through the Customization wizard.
Here's a screenshot of the default theme:
Hope you enjoy it,
Nadia
Apr. 10th, 2005 @ 09:03 pm
|
|
|
