Dreamwidth Styles

Heads up: one-column layout changes

Thu, 25 Aug 2011 17:03:27 GMT

We're introducing a new one-column mode that will allow you to place modules before and after entries, instead of just after. EasyRead already puts this to good effect by placing the entry summary before the list of entries; we've opened up that option to the other styles as well.

You can switch between normal one-column mode and split one-column mode at the customize page. (not yet available, but will be within the next day or so).

One big change that accompanies this is the modules in one-column mode are now all the same width as the entries column. That is, it's no longer going to be one skinny column that looks somewhat like a sidebar that got displaced.

This change will affect all existing layouts in one-column mode. Posting this early so you won't be surprised when the change happens.

comments

Which other methods of categorizing styles can you think of?

Tue, 23 Aug 2011 14:42:15 GMT

I've just migrated Bug 3883: Add an Optimized-for-small-screens category to the Select Journal Style page and am opening a bug for additional other categories:

* optimized for large fonts
* high contrast
* low contrast
* streamlined/minimal distractions

What other categories can you think of that you would want to see? I'm mostly interested in things that are accessibility-needs related, but if you can think of other ways to categorize, I'd like to know.

comments

New Layout: Five AM!

Sun, 19 Jun 2011 05:14:59 GMT

We have a brand new layout going out with the latest code push: Five AM by winterfish! Check it out. Theme makers will be sure to be making more themes for it soon!

The code push also brought out 73 other new themes, besides Five AM's Early Edition. They're all in the featured area of the Journal Selection Area.

I've also updated my prototype style browser to have all the layouts and themes--and it has a stats page, if you're curious.

comments

Theme paid time

Mon, 06 Jun 2011 03:39:39 GMT

Just gave out the paid time to everyone who submitted themes that have been committed (most of them are currently live, some of them have been committed and will be live by next code push)

Enjoy! And thank you for all the themes :)

comments

New style feature: icon scaling

Mon, 16 May 2011 06:08:13 GMT

Hey, folks! Recently, ninetydegrees did a lot of work on adding another standardized feature to our core2 style: adjustable comment and entry icon sizes. It should now be available in every style except Zesty.

You can find it in the presentation section of theme customization under the label "Select the size of icons". Full is at 100%, Small is at 75%, and Smaller is at 50%.

I'll also note that I've updated my Prototype Dreamwidth Style Browser--it now includes all 380 themes of the 26 different layouts.

comments

Choosing styles that work well on small screens

Sun, 10 Apr 2011 20:13:24 GMT

Hey, folks--lately we've had a couple of requests pop up about a need for styles that work well on small screens. This post will try and give a run down of how to choose a style that works well on a small screen.

( First, choose a layout with a one column option. )

Another common request recently is adding a header image; most styles support header background images in the images section of the customization area

Remember that you can always ask questions to have people assist you with your style in style_system or getting_started.

comments

Anyone interested in a course on DW styles?

Wed, 30 Mar 2011 02:25:44 GMT

I'm considering running a class on DW styles over in style_system. All experience levels are welcome; the main class project would be making your own layout, page by page, whether just using CSS or making bigger changes using S2.

comments

CSS cleaner question

Thu, 02 Dec 2010 19:14:27 GMT

I'm not sure if this is the best place for this, but I bet someone here has the relevant deep understanding.

Is there a way to vouch for Unicode characters as safe (or otherwise input them) in custom CSS? I'd like to use asterisms (\u2042) in a content: attribute as separators in my custom stylesheet, but the cleaner objects and removes the whole bunch of CSS due to suspect high bytes (whether I use the \u2042 as suggested in the spec, or the character ⁂, wrapped as CDATA or not).

Thanks for any insight you can share!

comments

Default Style Change

Fri, 05 Nov 2010 05:19:22 GMT

In very limited circumstances (if you have never visited the Select Journal Style page), your default style would have changed when we changed the site default. We'll work on it so it won't happen again.

See the dw-maintenance entry for full details. (Turning off comments here so they're in one place).

comments

Independent/prototype Style Browser

Thu, 28 Oct 2010 18:00:25 GMT

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

Error while previewing

Sun, 24 Oct 2010 17:18:42 GMT

With this last code push, if you're using a core1 journal style -- one imported from LiveJournal or another LJ-based website -- some people are receiving an error when previewing posts:

Error running style: Died in S2::run_code running EntryPage::print(): Can't use string ("") as a subroutine ref while "strict refs" in use at (eval 1872)[/home/dw/current/src/s2/S2.pm:201] line 1096

It appears to be happening when you use an imported core1 journal style and have custom comment pages turned on.

If this is happening to you, you can fix it by recompiling your layout layer. If you don't know what that means:

1). Go to http://www.dreamwidth.org/customize/advanced/layers and find the style you're using. (If you have more than one there, which you probably will: look for the one that says it's a "Child of layer 1: LiveJournal S2 Core, v1")

2). Hit the 'edit' button.

3). Once that loads, hit "Save and compile" (it's in the top bar)

That should make it work again!

comments

Icon Pages and Styles

Sun, 26 Sep 2010 05:22:46 GMT

exor674 has been doing a lot of great work lately making it so that your icons page can be viewed in your journal style. I've asked her if I could share what's been done so far, and she agreed! So without further ado, let me give you all a rundown:

This will make it so that instead of viewing your icons page in the site layout, it can display in your style, like the rest of your journal. You'll be able to turn it on in the Presentation area of Style Customization.
You can decide whether you want the default sort order to go by keyword or upload order.
There will probably be a max limit, but you'll also be able to decide how many icons go on each page.
Once the main parts of this feature have been reviewed and committed, the styles team will work on enabling the icons page for each official style and theme.

For those of you who are more advanced users of styles and S2, I've cut out some of the relevant parts for you to review and make comments on--read under the cut for more! It's still a work in progress, so feel free to make suggestions.

( Relevant S2 code for Icons pages in styles )

comments

Layout Layers!

Fri, 17 Sep 2010 16:18:10 GMT

Good morning, Styles team!

At 7am, I had an epiphany. The largest complaint we hear at Dreamwidth is that we don't have enough good layouts. Well, we've had much less time to create our layouts than the competition, but that's not the issue; The problem is that not enough people have come forward to say what they want and how they want it placed. It's not even a matter of colors or design as much as where elements are on the page that people can't seem to get around. Colors and customization are easy, but positioning the elements fluidly so that they'll work for multiple users, and appear roughly the same on any monitor is very difficult. It's an even larger task to do this so that you can support some of the customization options on Dreamwidth - how many columns, where to place the metadata, etc.

I can make something look pretty, but positioning the elements fluidly so that they'll work for most people and still look the same is very difficult for me personally. It's why I don't submit things to styles (especially since I'm a fixed width girl), not that I wouldn't like to help elsewhere.

Might I suggest an entry or community for user submitted "paint layers"? ( More information right this way and an example! )

comments

Grouping styles

Thu, 16 Sep 2010 09:54:55 GMT

For those who haven't seen it yet, ninetydegrees wrote a really useful post describing what styles have what options and stuff.

comments

Core/Tabula Rasa: Questions/Things to Investigate/Suggestions

Sat, 11 Sep 2010 16:47:06 GMT

-- Why is the title of the tags box on the Tags page an H2 and not an H3 as in entries?

-- Why do management links LIs have an additional class (.link) whereas Interaction links LIs don't?

-- Why do entries have an extra, nameless DIV before .contents whereas comments don't? What's it for?

-- Why do entries use .datetime, .date, and .time and comments only .datetime?

-- Why aren't there any headings for days on Month pages? Does making them DTs make it pointless for screenreaders?

-- Why is the date repeated twice on Day pages (you've got the page title which is an H2 and is equal to the date, then the date again in an H3 and the entry titles in H3s too)?

-- I'm quite confused about .module-wrapper. For entries and comments, you've got a wrapper around *each* entry and *each* comment but for modules the wrapper is around a whole section, not individual modules. Why?

-- It's pretty hard to style the Mass Action area. Could label and such have IDs or classes?

-- Most things which are repeated twice in the page get a top/bottom selector but .comment-pages don't. Could it be added?

-- There aren't any props for entry text font. What do you say about adding them? (The topic's just come up in a bug I'm fixing).

-- Styling the Tags page is not easy as there are no containers between the box title and the list. Could we add at least a DIV? I would suggest duplicating the entry structure but that would mess up quite a few styles so maybe just a div with a unique name so we can at least have a container before content.

-- Several elements get printed even when they don't have any content. While userpic and navigation are now easy to style when empty, poster isn't. You need something like six or seven selectors to catch all the pages where a poster is printed. Could we had something to make this easier? Maybe an empty class too.

comments

Help us check styles for consistency with new link display options

Mon, 09 Aug 2010 21:34:03 GMT

As you may or may not know, the last code push introduced the ability to customize whether icons or text labels show up for comment, post, and profile/user actions in the Customization Wizard. This is great, but there may be some bumps to smooth out for this feature for various styles. For instance, I notice that in Bases the resulting text link ends up with the default link color, which can render it unreadable in certain themes like Tropical. We'd really appreciate assistance in ferreting out other fixable problems with using different link style options (such as icons for styles designed for text links, and text links for styles designed for icons) in all of the styles.

If you'd like to help, go to the Customization Wizard and fiddle around with these Presentation settings and see if your style (or other styles!) work with :

Select whether user interaction links are printed as text or using the available icons
Select whether entry management links are printed as text or using the available icons
Select whether comment management links are printed as text or using the available icons

Remember, you can always put them back the way they were. Your help is greatly appreciated!

comments

Styles, the code push, and you: external stylesheets and comment titles using heading elements

Thu, 29 Jul 2010 06:37:23 GMT

There are a couple of important style happenings that could affect people who make their own custom styles; remember that if you end up having problems with your style, you are always free to ask for help here or in style_system. We are more than happy to assist you!

External Stylesheets

So, we've flipped the property to make style sheets load externally by default (external_stylesheet). This is actually going to be great for styles--it means that instead of putting the CSS in the HTML page on every single page load, increasing load times, browsers will be able to cache the externally linked CSS! It does mean, though, that if you have manually overwritten the print_default_stylesheet function, you might end up with some problems--to solve them, take away any <style> tags you may be printing out, as the system will add any necessary ones inline.

Comment titles now use heading elements

Comment titles now use heading elements--this allows people with screenreaders to jump by a certain element level, which increases accessibility. We've updated the CSS for official styles for this (let us know if anyone finds anything amiss), but you might have to add extra CSS for any custom styles.

And now, on to the fun stuff!

There are a LOT of new themes, thanks to timeasmymeasure, dancing_serpent, busaikko, and sarken. Layouts with new color themes include: Drifting, Bases, Negatives, Skittlish Dreams, Nouveau Oleanders, Modular, Blanket, and Brittle. Other fun changes include:

Sunday morning now has one column and two-columns right layouts. (ninetydegrees)
Transmogrified now has a two-columns-left layout. (ninetydegrees)
More official styles support the placement of icons to the right or left side of entries now. (ninetydegrees)
More official styles also support placing metadata at the top or bottom of the entry. (ninetydegrees)
There's a new journal search module! If you're a paid user (or can search the journal you are viewing), and are viewing a style that includes the search module, you can use it to search the journal! (foxfirefey, ninetydegrees, fu)
You can now use community icons instead of the poster's icon on your reading page for community posts (kareila and fu)

( Other changes and fixes )

This was a huge update, so if I missed anything or missed giving credit, please let me know!

comments

Styles documentation update

Tue, 22 Jun 2010 00:24:38 GMT

So, as a recap after about a week of work, there are now two main documentation bodies springing up for S2. I think there's currently enough space both for beginner and more advanced level documentation within those two sets.

S2 Guide: The Language Tutorial is filling out nicely as a first draft. However, the more I work at it in its current state, the more I think it's going to need to be rearranged for better flow at teaching beginners. The Style System Overview has a little bit of content, but is still kind of clunky. But the Troubleshooting section has some pretty awesome stuff right now, if I do say so myself. Haven't yet started on the Core2 Overview, Backend, Glossary, or Language Reference (a more concise version of the Language Tutorial, for cheatsheet checking or referral by people who already know programming).

S2 Cookbook: This starts out with a testbed layout that lets people have a really simple environment to test out code bits. A couple example pages starting to get filled in are strings and on Dates.

Other miscellanea:

* matgb has pointed out that the advanced page points to defunct documentation URLs. What's worse, the layout editor does, too. Hopefully we can point it at the S2 guide instead, or the core2 layer documentation.
* Doing this documentation has also given me several ideas for built in functions to add. For instance, S2 has a split function for strings, but no "join" function for string arrays. Why is there no join function! Does anybody have any input on that?
* Some people have already been diving in to tweaking and editing! Thank you murklins and azurelunatic for your assistance. And thank you everybody who gave your input on the last post on this topic!
* ninetydegrees has some suggestions up regarding this area: Your Layers page: redesign layers table as a tree , Styles: Add links to Your Layers, and Improve the S2 Compiler. They're making me think that instead of wee changes, each area should just go through a redesign. What do you envision the advanced customization area operating like?

comments

Ramping up styles documentation

Sun, 13 Jun 2010 21:20:13 GMT

Up until now, the biggest homegrown documentation effort for styles has been the S2 CSS docs--which are nice for people trying to modify their styles with CSS, but there's no real cohesive documentation on the S2 system except the old LJ S2 manual. They are the kind of docs that say, and I quote, "The language is very similar to other languages which geeks are already familiar with. The learning curve isn't too steep." And that's the kind of person they're designed for. Unfortunately, for a lot of people, that is a steep learning curve--and we want to try and alleviate that.

( On with the show )

Are there steps in this plan you'd change? Steps you'd add? What do you need? Who wants to help? Do you have links to awesome references to crib from/emulate, other than the original documentation?

comments

Bug report: Nouveau Oleanders, Firefox, and non-working cut tugs

Fri, 11 Jun 2010 20:37:14 GMT

There is apparently an obscure bug--in Firefox, expandable cut tags aren't working on Nouveau Oleanders...because of the styling of the first letter of the entry's contents. People are working on a fix, but in the meantime, if you don't want to change to another style, there's a rather over-the-top but workable fix.

First, look at the source of your journal layout. You're going to want to copy everything between <style type="text/css"> and </style> (which will all be in the <head> section of the source) into custom CSS. Then, you're going to want to find the :first-letter styling...and remove it! It looks like this:

.entry-content:first-letter { font-size: x-large;
    font-style: italic; }

After you've entered it, uncheck "Use layout's stylesheet(s)" and save. If you've done this correctly, expandable cut tags should work. If you want to tinker around with this bug, and figure out a way to make them work by overriding previous CSS instead of replacing it entirely without the offending part, let us know the results--I tried a simple "inherit" for both those properties instead, and it didn't work.

If you have problems, you can always put things back the way they were by deleting all Custom CSS (except what you had before) and rechecking "Use layout's stylesheet(s)" and saving.

If you need more help or have suggestions, feel free to comment to this entry.

comments

Styles roll call!

Tue, 08 Jun 2010 06:28:09 GMT

Hello, dw_styles! This post is a roll call for people currently interested in helping out with styles, new and old. While people are always welcome to submit more layouts for consideration as official site-provided layouts (you can read layout submission guidelines in dreamscapes), right now we're looking for people interested in helping us take submitted layouts and themes to the next level in a few areas--and also for people with experience willing to take others under their wing.

( On with the specialities! )

comments

Help, Styles Team II!

Thu, 27 May 2010 22:18:56 GMT

There are several submitted styles which need testing and have needed it for ages and the few people doing that in dreamscapes can't do it all on their own. Baggyeyes and Turlough have been beyond awesome but it's just two people and we need more feedback, more resolutions, more font sizes, more browsers, etc. so please, if you can, help out.

Hopefully, this post will get more answers than my last one. :/

Edit: What's involved?

* We currently have four styles which need testing: http://dreamscapes.dreamwidth.org/tag/needs+testing
One of them, Strata, has a link to a preview. You can click on the link and navigate through the various pages to see if anything looks odd (boxes overlapping, text not displayed correctly, something odd with colors, etc.). Then comment to report what you've noticed or tp say that everything looks fine to you. It's always a good idea to mention which browser/resolution (and sometimes font size) you saw the layout in.
Otherwise you need to install the layout. I can explain if you're not familiar with this process.

* We routinely need people to test color themes. What's really important is to make sure text is always visible; it can happen that there isn't enough contrast to make it easily readable and it's ok to politely say that to the designer; it doesn't imply that you expect them to change their style. Some will, some won't.

comments

Help, Styles Team!

Sat, 01 May 2010 00:38:00 GMT

Hi!
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 )

comments

Heads-up: font size adjustments

Tue, 20 Apr 2010 05:08:38 GMT

A quick heads-up: We're about to adjust font sizes for some layouts.

We've been trying to make our layouts as accessible as possible, out-of-the-box. Too-small font sizes can cause issues for some viewers -- for users with low vision, or users using large screens with higher resolutions, for example -- so we'd like to make sure all our layouts respect the viewer's desired font size, rather than overriding their preferences.

We were able to do this for the majority of layouts, but we weren't always able to catch this especially with the earlier layouts. So we're going to fix this for the five remaining affected layouts: Bases, Blanket, Funky Circles, Sunday Morning, Transmogrified.

So what's going to change?

If you're using one of the layouts above, the font size for entries, etc, will likely become larger. We've tried to adjust the other font sizes (entry titles, journal titles), so that these are not super-huge in comparison to before, but some will likely also be larger than before.

If you're using one of the layouts above, but you have your own highly-customized styleseheet, and have the "use layout's stylesheet" option unchecked, then you won't see any difference at all.

ETA: If you've changed the font size, but not the font unit, you'll likely find that you have gigantic text. If that happens, you can switch your font size to 1em, or switch your font unit to px or pt, and then adjust to taste from there. You can also switch back to the old font size and units, as described below.

For reference, I'm noting all the font sizes that have changed below the cut. There are also instructions at the very bottom if you'd like to change back to the old (current) font size settings.

( comparison of old to new font sizes )

comments

@font-face rejected!omg

Wed, 14 Apr 2010 17:15:25 GMT

My custom font style is being cleaned as suspect (too many bytes). I've tried linking it, adding an external sheet, and encoding in base64, but no dice. I know it's a big weight (74kb in base64), but it's only in ttf/woff, so Internet Explorer users won't dl it anyway. And I don't have a banner on the page, which could be vastly huger.

Is there a way to get an exception for fonts? Could I buy more space? Is there a sneaky way round it, does anyone know? It's not an obnoxious font! It's only for the titles... I'm whining here, I realise. *g*

update Answered: the culprit is the font smiley method. Use ordinary Irish method instead.

comments