Getting Started: Styles

[ninetydegrees]

Important: I don't update this on a regular basis. Some styles are very likely missing from the lists and we probably have more themes and styles to choose from now.

Also this post used to list more cats such as color and number of columns but the great Dreamwidth Style Browser integrated this so it's become redundant.

This is for LiveJournal users who would like to use Dreamwidth styles but are a little lost when it comes to finding one or customizing it. I hope you'll find it useful. Suggestions and corrections are welcome.

SELECTION

Dreamwidth currently has over 1000 themes and 40 different styles live on the site. Unfortunately, there are no categories for you to browse through yet so it may not be easy to find one you like. What you can do is browse through base styles first (category's in the sidebar) to find something you like then pick a theme and a page setup. To see all themes from a style, click on its name like on LJ. You can also type the name of a color in the Search bar. If you see a color theme you like but would like to see if it exists in other styles type its name in the Search bar.

-- Simpler styles (i.e. which make you think there's less styling, clean lines, fewer boxes and borders): Brittle, Corinthian, EasyRead, Five AM, Marginless, Paletteable, Refried Tablet, Stepping Stones, Tabula Rasa, Tranquility III.

-- Fancier styles (i.e. styles which make you think there's a lot of styling, lots of images and textures, unusual tricks and effects): Abstractia, Database, Drifting, Fantaisie, Fluid Measure, Funky Circles, Nouveau Oleanders, Summertime, Skittlish Dreams, Wide Open.

This is all very subjective, of course and some of these have more or less than what meet the eye at first glance. Other styles generally fall in the middle part of the spectrum: not 100% simple but not 100% fancy either.

-- Styles with decorative images: Bannering, Boxes and Borders, ColorSide (some themes), Drifting (some themes), Fantaisie, Funky Circles, Heads Up, Hibiscus, Modish (some themes), Modular (some themes), Nouveau Oleanders, Skittlish Dreams, Summertime, Sunday Morning, Wide Open.

-- Styles with transparent boxes: Abstractia, Paper Me, Summertime.

-- Styles with round corners: Ciel, Database, Fluid Measure, For the Bold, Modular, Summertime.

-- Style where the Navigation module is always displayed: Blanket.

-- Styles where the Navigation module can be put in the header area: Bannering, Bases, Basic Boxes, Boxes and Borders, Crossroads, Database, Dusty Foot, Fantaisie, Five AM, Hibiscus, Modular, Negatives, Nouveau Oleanders, Practicality, Skittlish Dreams, Strata, Summertime, Sunday Morning, Transmogrified, Wide Open.


CUSTOMIZATION

Terminology

Layouts -> styles
Friends page -> Reading page
Sidebar, Component, Boxes, etc. -> Modules

Page Setup

The layout shown on the preview is just one example of what the style can look like. By changing the page setup and module placement it's easy to turn a style you like because of the colors or because of some detail into a style you love because things are exactly where you want them to be. Don't dismiss a style just because the preview shows you two-columns right. You can generally change that.

There are seven different page setups. They're not all available for every style although one column and two columns are standard options for most of them.
-- One column: classic (all modules at the bottom) and split (modules at the top and/or at the bottom).
-- Two columns: left sidebar, right sidebar.
-- Three columns: two left sidebars, two right sidebars, one sidebar on each side.

Categories & Options

All options are sorted into nine main categories: Display, Presentation, Colors, Images, Fonts, Modules, Text, Links List, Custom CSS.

All styles basically have the same options. Some might have extra ones but they all have the same base ones. If you feel something is missing, check dw_suggestions. If it hasn't been suggested yet, make a suggestion here.


Display

Display is for Mood Themes and Navigation Strip colors.

Note that the options to select when and where you want to display the Navigation Strip have been moved to Account Settings whereas colors are still in Customize.


Presentation

Presentation is for general presentation options for journal, pages, sidebar and entries. Everything which has to do with presentation is here except for modules which have their own category.

Nothing really new here besides options which used to be available in a few selected layouts on LiveJournal or via advanced customization such as sidebar width, icon on the left or right, date format, etc. Here they're usable in all styles.


Colors, Images, Fonts

Again, nothing new besides many more options, again usable in all styles. You can set your journal base font there.


Modules

Modules is for choosing which boxes to display, where to place them and how to display their content (for example you can select the way you want to display your tags or your calendar).

To hide a module, simply uncheck the box. Change the numbers to change the ordering (make sure two modules don't have the same one).

Depending on the style you've chosen you will have more or less placement options available to you. In most styles, you'll see Main Module Section and Second Module Section. The Main Module Section is the first bottom section in One Column, the top section in One Column Split, the sidebar in Two Columns.

Dreamwidth has three new modules: Cut Tag Controls (to open or close of the cuts on the page), Style Credit and, for paid users, Active Entries (i.e. entries where new comments have been posted). All the modules are available in all styles. Note that you can set the privacy settings for Content Search at http://www.dreamwidth.org/manage/settings/?cat=privacy to control who can search your journal and what they can search.


Text

Text is for the text of Module headings, the Custom Text module, Navigation links and Entry links.

The rest, you know from LJ.


EMs?

You'll see that EMs are the preferred unit. You may be used to pixels. EMs are better because they're related to font size meaning the style will adapt to the size chosen by the viewer: larger sidebar for bigger font size, narrower one for smaller font size, bigger entry title, smaller entry title, etc. It makes sure everybody can comfortably view your journal and that no content overlaps.

However, it may make some things look huge to you. That's because Dreamwidth, unlike many other sites, has chosen not to override users' preferences. If you've never set your browser's font size then you'll suddenly see everything with it, instead of whatever the site has chosen for you (usually something very small like 10 or 12 pixels). Just check your browser preferences to set your base font to something you like.

CSS?

If you have CSS knowledge, you'll see that most styles use the same structure and that all elements have classes or IDs.

To help you with it, there's a guide on the Dreamwidth Wikipedia: http://wiki.dwscoalition.org/notes/S2_CSS

I've also made a guide which should be relevant to most styles: http://layoutmakers.dreamwidth.org/4463.html

If you've made a new style or theme and would like it to become official, have a look at dreamscapes.


More display options?

Several display options, which are not style-dependent, can be found at http://www.dreamwidth.org/manage/settings/?cat=display. To name a few: the ability to have a sticky post at the top of your journal, the ability to view any entry or any journal in your own style, the site style or the light style, 12H or 24H time display, hover pop-ups settings,...


Need Help?

style_system is the place to ask questions.

Comments

(frozen comment)

[foxfirefey]

Well, in fairness, thejeopardymaze has totally paid up for an account.

And I don't think people should stop bitching, I just think that there are more productive ways to bitch! (ie, ones that say what people still need, or specific problems, as opposed to broad declarations of dislike) I mean, Dreamwidth isn't competing with just LiveJournal of many years ago, you know? It's competing with LJ of now, and Tumblr, and WordPress, etc, etc, etc. And we totally have some features those other places don't that hopefully make it worth the while, but there will always be places to start improving.

Styles has been a weak point of ours for a long time and it'll be one for a long time yet, just because we only have so many people and so much time. And you have some really good style making talents, but, well, not everybody does, and it's not fair to expect them to.

And hiring multiple designers who could spend lots of time and energy doing lots of styles would be awesome? But, alas, we don't have that kind of money. Fortunately, we do have a lot of really really wonderful volunteers who have been doing SO MUCH WORK making things better. (ninetydegrees in particular has really taken charge of a lot of great stuff.) You know this because you've been watching it build up, but it's not as obvious to an outsider.

(frozen comment)

[holyschist]

I mean, Dreamwidth isn't competing with just LiveJournal of many years ago, you know? It's competing with LJ of now, and Tumblr, and WordPress, etc, etc, etc.

This, I think, is why I'm not bugged by DW's styles (I actively dislike most of LJ's default styles)--I'm used to Wordpress's amazing, amazing gigantic number of options for quality free themes, and both LJ and DW kind of fall down in comparison. Ditto with comparison to Tumblr, from what I've seen. I do not say this as a criticism of DW--I think it happened because DW is based on LJ and LJ's been established for a long time and doesn't have the same kind of theming community with the same goals as WP's theme community.

One of the things I really want to do when I have time to sit down and learn DW's style system (I'm still working on learning WP themeing) is try to bring some ideas from that wider theme world--I think LJ themes got pretty stuck in a rut and DW has been focusing on cleaning up the backend structure (A+) and not yet on branching away from that rut.

Although it kind of makes me wonder--a lot of WP themes are very visually striking and non-generic, and so few LJ themes are--are non-generic themes going to be something DW will welcome?

(frozen comment)

[foxfirefey]

There are actually some WP themes that are GPL based that I'd love to see ported, like:

http://www.webdesigncompany.net/motion
http://wordpress.org/extend/themes/piano-black
http://wordpress.org/extend/themes/monochrome

But, they'd need to be:

* Translated to our classing system (don't want to add tons of different classes to remember unless an element is actually unique to a style)
* Modified to work with things like icons that we have, etc
* hopefully have a fluid content column--this restriction might relax as I'm just about to submit persistant style=mine (or =light or =site)

(frozen comment)

[syntheid]

hopefully have a fluid content column--this restriction might relax as I'm just about to submit persistant style=mine (or =light or =site)

Isn't this basically already happening? I actually find it difficult to get OFF my style these days.

Though I do think relaxing the restrictions would help with getting more styles that aren't considered "ugly" since it seems that a lot of the ones people think are "pretty" are the fixed sorts or at least not as fluid as DW wants them to be.

Also possibly if it was either easier or more obvious to designers that they don't necessarily have to convert styles themselves, and that it's perfectly okay to post CSS to dreamscapes as a submission, maybe there'd be more variety in submissions, I'm not sure?

(frozen comment)

[foxfirefey]

Well, there's adding ?style=mine to every link from your reading page, and mine is in the control bar, but this would be an option that would load, say, entries in light style, even if you didn't put an argument in the URL, or show EVERYBODY's journal in your style, etc.

That makes it so that if somebody has accessibility issues, they won't be running into them just browsing the site.

(frozen comment)

[syntheid]

Ahh, okay, so I went back to see what was going on and why I seem to get "stuck" and it seems that the default adding ?style=mine to all links from the reading page is what's doing it. Is the new setup going to be optional in addition to the "just comment pages" out of curiosity? (Or did you mean submit as in a suggestion? I might be confused.)

(frozen comment)

[foxfirefey]

The new thing is just a preference you can set for entries and journals independently.

(frozen comment)

[holyschist]

Hmmm. Of those three, Motion is the only one I think of as "interesting," although I would never use it myself. This is part of why I'm wondering if there's a big disconnect in taste between LJ/DW styles folks and people like me. I don't think it's just about fluid content columns; I'm all for fluid content columns and I don't think that they necessarily restrict themes to bland.

(I'm also emphatically not a fan personally of super-dark themes, so even if I did like those overall, I'm not the person to try porting them, sorry. :( )

Let me see if I can dig around to find some examples of WP themes I like that I'm wondering about in terms of overall look (not as direct ports).

(frozen comment)

[foxfirefey]

I also think something we can do, technically, to make it easier for more community oriented style offering is to simplify the process of using somebody else's custom theme WITHOUT fiddling with copy-pasting layers or custom CSS.

(frozen comment)

[syntheid]

I was thinking that also-- I haven't actually tried submitting any themes to Tumblr, but they seem to have an official submission form which, after it's gone through moderation, just gets posted to the Theme Garden and anybody can one-click install it from there, and I kinda like that system, though I'm not sure how feasible it would be to implement with the current setup DW has.

(frozen comment)

[cesy]

Just submit them to dreamscapes, and someone else will probably pick it up and convert it and commit it so it can be made into a site style.

(frozen comment)

[syntheid]

But that doesn't actually address the issues? Personally, I've been struggling through converting my stylesheet to a standards-compliant layout on my own because I want to be able to decide where and how to make adjustments and not simply submit CSS and have someone else make decisions for me to meet accessibility requirements that may change how I thought the layout to be viewed. Plus if I do it myself, I'll know better for next time what can or can't be done.

That for DW this is a complicated and lengthy process to take a design from initial conception to a finished submission isn't actually changed by me just throwing up a stylesheet to dreamscapes and having someone else take over from there-- the rest of that complicated and lengthy process still has to happen. And I think it is kind of a problem, because while I don't think DW should be lax about accessibility requirements, it seems that so far it's meant that only a certain set of people are both willing and able to submit layouts (i.e. having knowledge of accessibility-oriented design and/or how the style is constructed and converted beyond the CSS), and given the restricted set, the designs being produced are not really including a wide range of the tastes on DW at this time (I assume, as I see and have seen a lot of people complain about the styles/themes currently offered and there are a number of people who are porting or wish to port LJ styles/themes instead).

Admittedly, once a style is made official it actually is pretty easy for the end user to one-click install on their personal account, but since a number of designers still find it easier to just write up and post CSS and have people C&P into the custom CSS box (and likewise, a number of users like/prefer the kind of designs they produce compared to the official ones), I'm curious about changes that could be made that would allow those people share their designs more easily (and also make standards-compliant layouts more easily, because that's definitely something to encourage), because maybe that would help DW offer the variety that seems desired.

Also I hope I didn't come across as just, "OMG make things easier for me!" I've just noticed these things as deterrents to myself, and in the context of the discussion holyschist and foxfirefey started of how the style system might be restructured to allow for the less generic official styles, I thought the Tumblr model might be something to consider.

(frozen comment)

[cesy]

Yeah, it would be good to improve the process in general.

In the meantime, though, submitting to Dreamscapes doesn't mean losing all control - you can post and say you'd like help to make it accessible, but still check it looks how you want it to before it goes on to the next stage.