Independent/prototype Style Browser

[foxfirefey]

Take a look at this Dreamwidth Style Browser, especially the theme list (click on the Filter heading to see what filters you can use).

This little independent project was inspired by ninetydegrees' getting started styles post, where she started to make a list of what layouts and themes had what features.

It's certainly not perfect--the layout and theme properties need better guides and explanations, the color categories need tweaking, and I think I need to define more areas as feature colors as opposed to accents, along with other tweaks and improvements. But, I think it's implemented enough to start showing to a wider audience!

Comments

[elfin]

Oh, holy crap that is cool!! Thank you!

[branchandroot]

The high/low contrast filters seem a bit off. How are those being sorted?

[foxfirefey]

It's an automatic thing--it figures out the foreground and background for entries and calculates the contrast ratio. High contrast themes have a value above or equal to 7, which is the level of AAA compliance or something, and low contrast themes have a value of 5 or below, which catches anything that fits AA compliance (4.5 ratio) and below. If you can point out which ones you think don't belong in a category, I can definitely check it out and see if the parameters need tweaking.

[ariestess]

That is so awesome!

[vanessagalore]

That's *really* great. Is the availability of one or more free text areas something that should be added to the filter options? I noticed when doing a new Transmogrified layout recently (after doing a Smooth Sailing layout for a friend on lj) that the Transmogrified free text area was pretty limited compared to Smooth Sailing. I figured out a workaround, but most people wouldn't want to bother...on Smooth Sailing, we threw in a whole bunch of gifs and quotes on the sidebars as a really easy process. The free text thing seems to be really important to some users. (Does "module support" includes free text areas?) Sorry if I'm asking a dumb question...but you might consider me a good guinea pig, because I'm not an expert at layouts, but I can modify them and do a lot once I have something to base them on (i.e. I'm a medium-skilled user).

[foxfirefey]

You are not asking dumb questions and also I love guinea pigs.



Module support *does* include free text areas, but it sounds like you had trouble using it in Transmogrified, so we should look and see if we can fix the root of that problem. Describe it a bit more maybe?

[vanessagalore]

Well, I wanted more than one text area. I needed to give more people credit on the layout than is provided in the defaults. Then I wanted the sidebar to extend down further, since I want about 10 entries per page; I like having some images on the sidebar and wanted to add them... And then the layout that I was bastardizing customizing had cool drop cap lettering, had to look up how to do that with span styling. As you can see, I like playing with this stuff even though I don't really know what I'm doing. In working with CSS I've been known to replace all the color codes with #FF0000 to see what each one is actually doing...anywho, this is what I came up with in the "Custom Text" module.

<font color="#DCDD97">Base style: Yvonne Theme: <user name="branchandroot"> Resources: <a href="http://www.colourlovers.com/palette/164203/meow">meow</a> Layout: <user name="arobynsung"> Header: <user name="turlough"> Screencaps: <a href="http://www.vm-caps.com/caps/index.php">VM-Caps</a> <span style="font-variant:small-caps">Momentary Thing</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/momentarythingsidebar.jpg" /> <span style="font-variant:small-caps">The Edge of the Ocean</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/edgeofoceansidebar1.jpg" /> <span style="font-variant:small-caps">I Turn My Camera On</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/turnmycamerasidebar2.jpg" /> <span style="font-variant:small-caps">Sway</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/swaysidebar.jpg" /> <span style="font-variant:small-caps">We Used to Be Friends</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/used2bfriendssidebar.jpg" /> <span style="font-variant:small-caps">La Femme d'Argent</span> <hr color="#8EB365" /> <img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/femmesidebar.jpg" />

and voila I got the sidebar I wanted. Not actually *hard* to implement, but I don't think someone who's not as OCD as me would have bothered. I like the challenge of trying to do this stuff and figure out the answer for myself--I just don't think other people would do it, and might give up and say that "DW layouts don't have the features I want".

[ninetydegrees]

<3

Have you finished the classification for all cats?

[foxfirefey]

Everything except the brown color group, I think!

[ninetydegrees]

Then I think you have themes missing from 'header bkg img' (all the ones I've made from Funky Circles, Modish/Scarlet, Modish/Teal, Modish/Lotus, all Skittlish Dreams themes, all Crossroads themes made by rising) and from 'page bkg img' (Brittle/Drab, Brittle/Buttercup Yellow, nearly all Funky Circles themes, all Modular themes made by branchandroot).

[musyc]

This. Is. AWESOME. Almost exactly the sort of thing I wish the current style browser could do. The ability to filter for certain features is especially delightful - I never want to select one column layouts and being able to cut them out from the start is great!

[denise]

Once you get this cleaned up a bit, I totally think we should add it to the main site.

[exor674]

I've been telling her the same exact thing!

[0jack]

You are so cool. <3 Really nice work.

[ex_pippin880]

:D

How about a "navigation in sidebar/column" option to go with the in-header one? Navigation being in the header confuses me sooooooo much.

[noxie]

+1

[ninetydegrees]

I'll have to check this but I think all styles have this as an option except EasyRead and Blanket which only exist in one-column mode. If you can think of another style where the nav module can only be placed in the header, please tell me so that I can file a bug about it.

[ex_pippin880]

Oh! I hadn't realised the modules were that flexible.

[ninetydegrees]

We're trying to standardize options as much as possible so that picking a style depends on aesthetics/layout rather than on customization features (it would be a shame to find a style you like only to discover you can't use it because it's lacking a certain feature)
Styles allowing placement in the header are actually the exception. :)

[ex_pippin880]

Ah, that's awesome! I never changed layouts on LJ because most of them had differences to which I couldn't adapt (like avatars swapping sides); it is sooo cooool to find out I can change layouts here and still have stuff where I like it to be. :3

[sistabro]

First, this is awesome!

One thing that might be really cool is for colors. right now you have individual colors, color groups, but what about showing the theme colors as an option too? Some folks are drawn to the features (and the filters are so cool!) but some just want to see how the colors work together as a group. If you combine theme color strips plus the filtering ability, you can pretty much pinpoint the layouts you want to examine in a lot less space and browsing from page to page.

Another nifty thing might be to have a check box that a user can select to compare one layout to another.. you know, like you do when shopping :) With the paging, I can see this as being really useful, eliminate some of the back and forth.

And I hope you don't mind me spouting ideas at you. This is far superior to what we have right now as is!

[noxie]

I love this! Great idea!

[artisan447]

Oh! Checking this out via the Weekly Update and I LOVE the theme list. :)

The only teensy tiny additional thing that would be useful for me would be a link or other easy way to swap the view for each theme between boxes right or left (I have an unreasonable fixation on having them on the right).

Well done, that's so useful!

[charamei]

Another person here via the weekly update to say how much I love this - I'm updating my journal style at the moment, and I've been bemoaning the apparent lack of a layout that did everything I wanted for about a week.

Now I've found one! Thank you.

[sophinisba]

This is really great and useful!

[susanreads]

This is great. I was puzzled by the Colors section, till I realised what I want is the Color Groups filter on Themes.

There's another feature I'd like to be able to filter on: how links are displayed. I want links (in entries, at least) to be Always Underlined; other people don't. The only layout I'm confident the links "work" for me in is Transmogrified, which I could get bored with.

[lorax]

Oh this is awesome, and so, so useful.

[delladea]

This is really nice! :D

[owl]

This is so cool!

[twisted_times]

I have to say, I've had this comment open in a tab in my browser for ages but have only just got around to looking at the Style browser link... it is officially awesome. :D

If I ever have the time I may destruction test tinker with it some more. :)

[bindingthreads]

This post is so ridiculously useful! I was just looking for something like the Dreamwidth Style Browser. :D

[foxfirefey]

Glad to be of service!