NaNoWriMo 2010 theme

[cheyinka]

I'm working on a theme for Practicality: it's Layer 165849 (preview) and uses nanowrimo_participant_03_120x90.png from the NaNoWriMo site. (Image rehosted in my own webspace - it's from http://www.nanowrimo.org/eng/webbadges.)

I've gotten permission to use the image as long as the image itself isn't being altered. (I emailed the Office of Letters and Light to ask - should I forward these emails somewhere?) I still need to send in a CLA, but I figured I could get comments on what I have so far while that's on its way.

Comments

[cheyinka]

As evidence that it's something to do with that, the Recent Entries bit looks fine on my journal, where I don't have a subtitle set.

[holyschist]

Is it supposed to be all the way over to the left or under the title?

[cheyinka]

For two-columns-sidebar-on-left, it should be on the left, I'm pretty sure. (I could be wrong! Someone more familiar with Practicality may know.)

[holyschist]

Okay, yes, it does have something to do with the subtitle, then. I bet it's about the height of the title box, or something not clearing correctly due to the image..

[cheyinka]

Aha! By adding
div.module-wrapper { margin-top: 1em; }
to the CSS, it now pushes the top of the modules down far enough that it looks right - is the red readable on the reddish-gray, though? (It looks weird if I add
h2#pagetitle { background-color: #f4e7d9; }
even if I have padding on the left and right.)

[cheyinka]

hmm. Is it readable if I do
h2#pagetitle { color: #f4e7d9 }? (that's the pinkish color instead of the reddish-orange color)

[holyschist]

Hmm, it looks kind of odd on my screen--staggered. IDK.

[cheyinka]

I agree that it looks pretty odd! Is there a way to have special CSS if there's a subtitle? (That is, I'd leave it as it was if there wasn't a subtitle, and if there was a subtitle, bump the module-wrapper down 1em and put a background on the pagetitle.)

[holyschist]

I think there might be, but I'm really rusty on my CSS so I can't think of what it is. What DW needs is a css_help community or something like that!

There may be a more effective fix than bumping it down 1em, which I suspect is going to display somewhat inconsistently and unpredictably.

[cheyinka]

I think there probably is, but messing around with margins didn't seem to be it.

(I'm somewhat afraid that the answer is going to be "do something in S2 to make the pagetitle display differently"...)

[ninetydegrees]

The fact that the profile module (or any other module put in the first position) is higher than in the default version of the style is caused by this:

div.module-wrapper { margin-top: 2em; }

In the default style, having this module right below the journal header isn't an issue because journal header and module always have different colors.

[cheyinka]

Right, I put that in there so that the pagetitle didn't overlap the first module's title. Otherwise, if there's a subtitle present, the pagetitle seems to be too low.

[ninetydegrees]

Hmm. This didn,t come up during testing. Would you tell me which browser, screen resolution and font size you're using please? I'd'like to file abug for this.

[cheyinka]

I think it's only because I have a background image in the header (and thus moved the h1#title and h1#subtitle over 120px) - I'm not sure it's actually a bug!

Just in case, though, I'm using Firefox 3.6.9 on a 1024x768 screen (but I keep my browser window 940x710 most of the time), and the base font size for non-fixedwidth fonts is set to 16.

[cheyinka]

I appear to have solved it by copying Page::print_global_title() into my theme layer and just adding the image there. Does it look better to you now too?

[holyschist]

Provided there is not meant to be gray between the title bar and the PROFILE / PREVIOUS 20, yes.

[cheyinka]

I don't believe there is meant to be gray there, no.

[holyschist]

I think you got it, then, at least in my browser.

[cheyinka]

I put in a bottom border on the header so that there'd be gray between the title bar and the sidebar / previous 20 / etc. I think it looks a little better with that separation there.