dw_styles | Recent Entries

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.

denise

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.

foxfirefey

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.

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 :)

foxfirefey

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.

foxfirefey

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.

foxfirefey

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.

metawidget

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!

Current Mood: curious

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).

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!

denise

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!

foxfirefey

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 )

stormy

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

cesy

For those who haven't seen it yet,

ninetydegrees wrote a really useful post describing what styles have what options and stuff.

ninetydegrees

-- 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.

foxfirefey

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!

foxfirefey

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!

foxfirefey

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?

foxfirefey

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?

foxfirefey

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.

Profile

Dreamwidth Styles

Customize your style

Navigation

Resources for creating layouts

August 2014

S	M	T	W	T	F	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Syndicate

Page Summary

fu - Heads up: one-column layout changes
denise - Which other methods of categorizing styles can you think of?
foxfirefey - New Layout: Five AM!
fu - Theme paid time
foxfirefey - New style feature: icon scaling
foxfirefey - Choosing styles that work well on small screens
foxfirefey - Anyone interested in a course on DW styles?
metawidget - CSS cleaner question
fu - Default Style Change
foxfirefey - Independent/prototype Style Browser
denise - Error while previewing
foxfirefey - Icon Pages and Styles
stormy - Layout Layers!
cesy - Grouping styles
ninetydegrees - Core/Tabula Rasa: Questions/Things to Investigate/Suggestions
foxfirefey - Help us check styles for consistency with new link display options
foxfirefey - Styles, the code push, and you: external stylesheets and comment titles using heading elements
foxfirefey - Styles documentation update
foxfirefey - Ramping up styles documentation
foxfirefey - Bug report: Nouveau Oleanders, Firefox, and non-working cut tugs

Active Entries

Style Credit

Style: Night Sea for Tranquility III by branchandroot

Expand Cut Tags

No cut tags

Page generated Oct. 18th, 2017 12:47 pm

Dreamwidth Styles

Recent Entries

Heads up: one-column layout changes

Which other methods of categorizing styles can you think of?

New Layout: Five AM!

Theme paid time

New style feature: icon scaling

Choosing styles that work well on small screens

Anyone interested in a course on DW styles?

CSS cleaner question

Default Style Change

Independent/prototype Style Browser

Error while previewing

Icon Pages and Styles

Layout Layers!

Grouping styles

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

Help us check styles for consistency with new link display options

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

External Stylesheets

Comment titles now use heading elements

And now, on to the fun stuff!

Styles documentation update

Ramping up styles documentation

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

Profile

Navigation

Links

Resources for creating layouts

August 2014

Syndicate

Most Popular Tags

Page Summary

Active Entries

Style Credit

Expand Cut Tags