ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
[personal profile] ninetydegrees
I'm currently going through all layouts to see which ones have (potential) issues concerning non-default page layouts and module positions in Customize and I would appreciate some help because DW has 23 layouts and this is long and tedious and not really fun. :) To explain what I mean let me give you an example: in Bases, the Navigation module is always displayed in the header even when set to something else or to none. In Basic Boxes, the Navigation module is displayed incorrectly in Firefox when set to Group Two and the layout's two columns. See what I mean? I'm also interested in any possible improvements concerning page layouts and module positioning. For example, in Brittle, module settings are named Group One and Group Two in Customize which could be renamed to Sidebar/Footer for better clarity. Two-column-left may be easily implementable for this layout as well.

So it would be great if you could pick one or two layouts and test the options in Customize and report what you noticed (and what I missed!) here.

Here's what I've got so far )
aveleh: Close up picture of a vibrantly coloured lime (Default)
[personal profile] aveleh
If you're looking for a chance to exercise your CSS skills, Dreamwidth is looking for your themes! We are soliciting official themes for Tabula Rasa. This round of solicitation is aimed at designers and developers who are comfortable with CSS; you don't need to know S2 to participate.
  • To get in the creating head-space, there's a post by [personal profile] nova about Visual Design for Styles with tips and guidelines.

  • Your CSS must work with the "Tabula Rasa" layout. Select the layout from the "All" category on the Select Journal Style page (or apply it from this direct link). You can either choose to inherit the included stylesheet designed by [personal profile] branchandroot and [personal profile] dani_the_girl or use it to get ideas. And of course, if you want to design your stylesheet from scratch, you should absolutely do that! You can customize your style's CSS on the Customize Journal Style -- Customize CSS page. By default, the "Use layout's stylesheet(s)" checkbox will be selected; if you would prefer to design from scratch, deselect the checkbox. You can put CSS into the embedded CSS box, but if you're making your stylesheet available for others to test, you will want to find somewhere to host your CSS file externally so that you can correct bug-reports for everyone at once.

  • The "Tabula Rasa" layout is designed to be completely customizable by CSS. There are a lot of classes used to control elements, and a number of classes that can be left unused. We have started a guide on S2 CSS, where you can find listings of the main elements and classes for each view. Feel free to help out with documentation as you go.

Have fun and play with your CSS! We're very excited to see what people come up with. Keep an eye on the new [site community profile] dreamscapes community, because that's where more information will be posted, and users will be able to share and test styles. Thanks very much to [personal profile] branchandroot, [personal profile] dani_the_girl, and [personal profile] gossymer for organizing this community. Check out their first post: Introduction to Dreamscapes, and ask your questions there!
nova: (Default)
[personal profile] nova
Here are some things to keep in mind when designing styles, especially for others who may be using their journals differently than you.

1) Size and Positions Matter

There are many different elements that can either be empty and/or vary drastically in size:

  • Icons can be non-existent or anywhere between 1-100px on either side. Also remember that they're not always square.
  • Usernames can be anywhere between 2-25 characters.
  • Journal titles and entry titles can be empty, short, long.
  • Entries themselves can take up a single line or a whole screen or more.
  • Sidebars and modules will vary depending on the ordering the user chooses and the content displayed (how many tags, how many current entries displayed that are visible to the viewer, etc.).
    Modules can be moved around by the user. It wont necessarily always be in a sidebar; something could be in the header or footer of the style.
  • Text like "Leave a comment" can be changed by the user to their liking, so that could potentially also be really short or really long. Text strings can also be translated into other languages; something like "Links List" might end up being three times as long in Russian or Icelandic.
  • Comment subject lines and comment subject icons are sometimes forgotten, but they are there, and do appear when used.
  • Website link, user's display name, and probably many other things I'm forgetting, but you get the idea.

2) When It's Too Big (or Too Small)

A couple of things to consider based on how things change in size as mentioned above:

How will that specific part of your design stretch and/or repeat if there's a long string of text or a large image? Not just horizontally, but vertically too. Whether your style is fixed-width or flexible-width, there will be parts of it that need to tile. Make sure these pieces connect seamlessly to look good in all cases.
Examples using a title banner )

What happens when something exceeds the width you've set to an area? For example, an image wider than the entry space, or a username that is too wide to fit into your sidebar. Should scrollbars appear in that section to keep the content viewable? Should the rest of that image/text be hidden? Should it show in full and overlap or underlap whatever is to the right of it? Should it show in full and push everything else down as needed?

3) Text and Typography

Refrain from using graphical elements in type; they need to be text rather than images so they can be translated into other languages or by user-input such as "My Friends" in place of "Links List". Having a graphical element behind or around type, however, is okay.

typography examples

Use web-safe fonts to ensure that text is rendered as close to the same as possible for anyone viewing your style. Below is a table of web-safe fonts, and the font type they fall under. They're not very exciting, so if you must use a font that is only available on Mac or only available on Windows, pick a web-safe backup.

Serif Sans-Serif Monospace Cursive
Times New Roman Arial Andale Mono Comic Sans MS
Georgia Impact Courier New
Lucida Sans
Trebuchet MS

4) Other Views

Don't forget that you're not just designing for the Recent Entries page! There's also the Entry/Read Comments page, the Leave a Comment Page, Read Page, Archive, Year View, Month View, Day View, and Tag pages.

Also keep in mind that your style will be used for more than just journals. In addition to communities, a user can choose to view any page (other journals, communities, feeds) in the journal style they have set.

And that's it for now; hope you found this helpful! If you'd like to see more posts like this, feel free to comment with suggestions. Other posts about S2 and CSS are forthcoming.


Dreamwidth Styles

Resources for creating layouts

August 2014

17 181920212223


RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 18th, 2017 12:43 pm
Powered by Dreamwidth Studios