Layout: Daydream Believer / Tabula Rasa

[laitaine]

Theme name/layout: Daydream Believer / Tabula Rasa
Author: laitaine
Layout info: layer info | layer source | preview

Sample theme: Silver / Daydream Believer
Theme info: theme info | theme source | preview

Image info: I used a bunch of silk icons in the basic layout and more in the themes. All icons used in the base layout were used as-is, but some of the theme icons where modified (I made arrows in different colours by tweaking hue/saturation). I also made some backgrounds for various themes.

I think I've set everything to be viewable and public so hopefully those previews will work. That sample theme is just one of a few I've been working on - so when this is all tested and everyone's happy, there should be quite a few to choose from.

I've tagged this as unclaimed as it needs testing by someone who is not me (I've done a bit, but more would be a very good thing). But I am keen to see this through to the end and make any patches that are necessary and all that jazz.

Comments

[ninetydegrees]

(Changing the tag to :claimed, then :))

This is so lovely and peaceful. I'm sure some people will be delighted to have something like this. I feel it was missing from the selection DW offers.

One question: was it absolutely necessary to move the userpic in print_entry? I'm asking because I think it was put after subject and meta for accessibility reasons: providing screenreader users with more relevant and important info first.

[laitaine]

It's necessary from a it-makes-my-layout-prettier point of view however the world will not end if I move it back and accessibility should be the priority here.

Basically, I want to be able to specify the distance of the userpic from the top border of the entry header. If I have the userpic below the entry header I can't do that. I can faff around with negative margins to shift it upwards (which is what I did originally) but there are problems:

1) if the entry title is uber-long it runs over two lines so my careful calculated margins will fail anyway as they will account for one line of entry title and not two.

2) if the entry title is long but stays on one line, I run the risk of hiding part of the title behind my icon (as it is set to float: right, however it's set to float below the title so it won't automatically wrap the subject line around the float.

As I said, accessibility should take precedence over pretty, so I change it back, but I would like to have accessibility and pretty if I possibly can! Yes, I want to have my cake and eat it too. Is there any way to get around this?

[ninetydegrees]

As I said, accessibility should take precedence over pretty, so I change it back, but I would like to have accessibility and pretty if I possibly can! Yes, I want to have my cake and eat it too. Is there any way to get around this?

I'm not the best when it comes to CSS but we can certainly try and hopefully other people will chime in. It seems to me ColorSide and Modular have something close to what you've done so clues may be found by looking at their source codes.

[laitaine]

Sorry it's taken me so long to reply. (I'm also trying to write a thesis and that's taking most of my time!)

I had a look at those layouts shortly after you posted this and tried to copy what they had done but with limited success. I've just tried again and still no joy.

I can get the icon positioned in the right place but the text won't wrap around it, OR I can get the text to wrap around it but then the positioning goes screwy if I have a long subject that takes up two lines. But I can't get it to do both. I guess ugly but accessible is the way forwards here.

[laitaine]

Spoke to soon! I just had a brainwave and it worked!

[ninetydegrees]

\o/

[laitaine]

Right, I think I am (finally!) ready for the next step. *must stop tweaking*

I have a bunch of colour schemes for this layout and another new layout, also with lots of colour schemes.

The layout needs testing. Do the colour schemes need testing too, or do I just run with them?

Either way, I was trying to make a new post here for testing the new layout and dreamscapes doesn't come up in the list of journals I can post to. I obviously managed to post before, but now I can't seem to. Am I just being a muppet or has posting access changed?

[ninetydegrees]

I think you are too. I can't remember if you need my help with that so feel free to refresh my memory. Also, I can't remember if I've given you my e-mail address should you need it.

It's always best to post the color schemes here too, yes, if only to get feedback about color contrast and to make sure text is readable in every view (even if you triple checked it yourself ^_^). Whatever you do with the feedback is up to you, though.

[laitaine]

I have a vague idea of what I think I might have to do probably, but I don't actually know. I know I have to make a patch and I have made patches before, but not for styles so I don't know exactly what I need to add/change and where. A bit of help would be appreciated, please :) I do have a dreamhack already.

I don't think I have your email. Mine is laitaine@laitaine.net.

And I shall get colour scheme feedback, as I can read everything, but I'd like to make sure other people can too!

[laitaine]

Okay, apparently I am a muppet. I have found a post link. Though why I need to use a special "post to community link" instead of being able to post from the usual post page is confusing. Is this intentional or a bug that needs mentioning?

[ninetydegrees]

I think only communities you're a member of are listed on the Update page so I don't think you've ever been able to post from there.

[laitaine]

Ah, okay, that makes sense!

CLA?

[ninetydegrees]

Administrative question: have you sent a CLA?

Re: CLA?

[laitaine]

Yup, I've done some basic patches before so I've already had to do the CLA thing.

[baggyeyes]

Testing. I'll chime in if I find anything weird, or wrong. I'm using Firefox 3.6.3 on Mac OS X 10.6.3 as my main browser. I'll test with other browsers as well, and on Linux, as soon as I install it. ;)

[laitaine]

Awesome, thanks!

I've tested using Chromium on Ubuntu 10.04 and 10.04 NBR. And FF on Solaris (crappy work machine - not sure of version number but I suspect it's not that up to date).

[oona]

I just previewed it to see what it looked like, and I saw that the hspace="8" attribute that I put into my image tags when they have text by them does not work. I have also seen this on the Latest Things page layout. I use Firefox 3.6.3. I am just leaving this here as a comment. I am not layout technical by any means.

[laitaine]

Not 100% sure why that is, but I'd guess that it's because a lot of the images I've put in are put in via css as background images. If you want to create more space between image and text, you'll need to tinker with the padding values I've set for those elements.

[timeasmymeasure]

Oh this is really nice!
I love how peaceful and ordered it all is. Though out of personal preference, I'd prefer a fixed navigation bar.

I really like this though. Looks good on Firefox.

[laitaine]

Thanks, glad you like it!

[baggyeyes]

I make use of the navigation bar A LOT, so I find it useful to not have to scroll all the way back to the top to switch sub-filters.

As for the rest of the layout/theme, I haven't yet found any snafus. I'll keep testing.

[laitaine]

Awesome :)

[ninetydegrees]

Hi Laitaine,

I was wondering if you still wanted to patch this and your other style.

[laitaine]

I do (and I did start a while back) - it's finding the time. Problem is I don't have a clue what I'm doing, so while I'm sure it's actually a very quick process, it takes me ages at every stage to figure out what I'm supposed to do (and so consequently I can't just sit down in a spare half hour and get it done). I've got some time off work in a couple of weeks and it's on my list of things to do then. If I don't manage to get it done then, I'll give up and pass it on to someone else so that they styles can be used. But I really would like to try.

[ninetydegrees]

I'm so glad to hear from you! I was afraid you were gone. I'm on vacation for a long while so if you have questions don't hesitate to ask.

The first step is to make sure your layers are as good as possible before you patch anything and test things out even more extensively (and you have a very good base so it shouldn't take very long).

I'd just started to look at the source for Boxed In and I noticed a few things:

1) You're not using the latest TB code so you need to update it.

2) It seems to me you created custom color properties which weren't really needed since you're not using them.

3) Instead of creating color_entry_header you can use color_entry_title_background instead. Existing properties doesn't have to necessarily apply to the exact element they were meant for originally. If something's very close to what you want to do, it's ok to use it.

4) However, you generally shouldn't use entry properties or module properties which aren't in entries or modules (the Nav Strip and Contextual Pop-ups being exceptions). So #header color properties should use existing or custom header properties even if they all use the same colors.

5) Background and foreground colors should always be matched properties. For example, if the background color is set to color_entry_background then the text color must be set to color_entry_text. Otherwise, this makes things very complicated for designers and users and we always run into readability problems later on.

6) You can't lower the base font size. It's important for accessibility reasons that we don't override one's default browser setting.

7) You need to capitalize the font names as it can cause some issues with Linux if I remember well.

8) I don't think it's very wise to hide modules or text for usability reasons. I mean people can enable the modules again (if they realize they can) but they can't unhide the text. About date and time formats we have more now so maybe you can pick ones which already exist.

9) I don't understand the need to add a spacer in entries. I know it had to with alignment but I removed it and I don't see any difference between this and adding a side margin to the header. What have I missed?

10) I you haven't already done so you need to test the style with all the different presentation options (userpics on the left, small userpics, no userpic, metadata at the top, margins, icons as text, etc.), page setups (one column, three columns left, etc.) and modules in various positions or disabled.

11) I've seen some redundant CSS (Tabula Rasa has padding set to 0 for body so no need to add it again) so you may want to go over that again.

12) On a stylistic note, you should remove leading zeros when you only have decimals so .5em instead of 0.5em for instance (that's one character less so a lighter stylesheet) and use shorthand for margins and paddings whenever possible so margin: 0 0 .4em instead of margin: 0 0 0.4em 0.

13) In your theme layer, colors need to be sorted by section (page, entries, modules, fonts, images) to match other files. You can see what the sorting order is here for example. If the current sorting makes things easier for you you can do that later.

[laitaine]

Thanks so much for these - I'm slowly working my way through them. The TR code has changed since I made the layout I think, which is the source of some of these things. And so much of this would have been REALLY useful to know when I made the layout.... only I made the layout for me, not anticipating I would do any of this, so I didn't pay any attention to making it more streamlined and compliant with any guidelines but my own!

I do have a couple of questions.

Regarding point 5, I understand the principle behind what you've said. However, in some cases my background colour is not a color_*_background, because I create the double border effect by switching the border and background colours first in the outermost element and then use the background colour as the background colour in the inner element. Like this:

.navigation {
background-color: $*color_module_border;
border: .5em solid $*color_module_background;
color: $*color_module_text;
}

.navigation ul {
background-color: $*color_module_background;
}

Is that likely to cause problems? Do I need to create more colour properties for this instead of handling it as I do?

And do I set the text colour in both of these, or is it sufficient to set it in .navigation as .navigation ul will inherit.

Thanks!

[ninetydegrees]

Sorry for the late answer, Laitaine. I have the nasty habit of accidentally deleting notifications I meant to keep because I want to answer them. *facepalm*

Well we're still figuring all of this ourselves, you know. :) I often make additional patches when patching themes because issues we didn't anticipate crop up. That's why I like seeing new designers submit stuff or people experimenting. It's been incredibly helpful.

To answer your question, what you have is perfect (and very smart!) because the way you coded it users and designers won't have any problems.

I think it's ok to leave $*color_module_text out of .navigation ul as Tabula Rasa don't set this so inheritance should work indeed.

[laitaine]

Now it's my turn to apologise for the late reply. I do the opposite (though the overall effect is the same) - I am bad at deleting anything, even stuff that has been dealt with. So I keep things in my inbox when I don't have time to deal with them when they arrive... but then the get buried and never see the light of day again (or at least not for a while!).

Anyway, thanks for your comments!

Of course, checking the things you mentioned turned into tweaking, but I think I'm finally happy with the layout :)