dreamscapes | Tabula Rasa: Basic Boxes, Modish, ColorSide

Entry tags:

Tabula Rasa: Basic Boxes, Modish, ColorSide

Theme name/layout: Basic Boxes Green / Tabula Rasa
Author:

branchandroot
Layout info: theme layer
Image info: No images.

Theme name/layout: Modish Scarlet / Tabula Rasa
Author:

branchandroot
Layout info: theme layer
Image info: One background image in header, from stock image site Stock Xchange, permission secured for use in a web template, see CLA.

Theme name/layout: ColorSide Nadeshiko / Tabula Rasa
Author:

branchandroot
Layout info: theme layer
Image info: No images.

Theme name/layout: Stepping Stones Purple / Tabula Rasa
Author:

branchandroot
Layout info: theme layer
Image info: No images.

Testing Needs: These have been tested in all required browsers, but I would much appreciate it if they could be double-checked in IE 7 and 8 since I was only able to test those via www.browsershots.org.

Flat | Top-Level Comments Only

(everything below tested in IE7 with navstrip on and logged in. I've concentrated on the general page layout, because hopefully the rest won't be too different cross-browser. )

===

Theme name/layout: Basic Boxes Green / Tabula Rasa
* one-column, two-columns-right: looks good!

* two-columns-left, three-columns-left, three-columns-sides:

What in the world, IE7? When I load the page initially, the left sidebar hides behind the main content (it's shifted too far to the right, so it ends up right under the entries)

If I resize the window, then it shows up to the left again. (How can this be sane? Ack!)

* three-columns-right: the right most sidebar overlaps the other sidebar (this seems to be true for all

BTW, in all cases the header is narrower than the body. Just double-checking that this is deliberate?

==

Theme name/layout: Modish Scarlet / Tabula Rasa

* one-column, two-columns-left, two-columns-right, three-columns-left, three-columns-sides: looks good!

* three-columns-sides: same sidebar overlapping problem as before

(so clean and pretty :))

===
Theme name/layout: ColorSide Nadeshiko / Tabula Rasa
Ooooh

General notes:
* the navstrip doesn't extend across the entire screen
* userpic may overlap entry text a tiny bit

* one-column, two-columns-left, two-columns-right, three-columns-sides, three-columns-left: looks good!
* three-columns-right: sidebar overlap (hehe, maybe I should stop noting this)

wtf, IE, just wtf? *disgusted* I'll get Ken to bring the laptop home and play with Basic Boxes on that, see if I can tell where the sidebar-hiding thing is coming from.

Can you tell if the general sidebar thing is happening in Tabula Rasa Plain, too? If it is, then at least we'll know which style sheet has to be fixed.

Yes, the Basic Boxes header is supposed to be narrower!

I bet the Colorsides navstrip problem is because of where the borders were put; I'll try moving those to #canvas, now that #canvas isn't floated weirdly. And I'll see if the userpic can be edged up a titch more.

Yup, general sidebar thing is happening in Tabula Rasa Plain too (and I've seen it in all TR-based layouts that I've tested, which is yours and a few others on

dreamscapes).

Found it when I was looking at http://bugs.dwscoalition.org/show_bug.cgi?id=1432, and I've been poking at it intermittently, but so far have made no progress.

(I'm right now going through http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/, hoping for a clue. I am torn between weeping and tearing my hair out. Oh IE)

Hmm. Normally that's the kind of thing that happens when the margins and padding are somehow in conflict with the width. That was why I put padding on the .inner divs instead of those main containers. Perhaps we should explicitly zero out the padding and margin for #primary, #secondary and #tertiary. That is, set all three of those to margin:0; padding:0 before all the column related declarations. It wouldn't hurt to include body and #canvas in that too, just to be sure. And then, if padding or margin is needed, they can be explicitly set but we wouldn't have to worry about any weird inheritance bugs.

Just tried it, and that didn't seem to have any effect. It's not just a tiny bit of overlap though: it's the #tertiary being right on top of #primary; I wonder if that indicates a different bug?

Uploaded a screenshot: http://bugs.dwscoalition.org/attachment.cgi?id=1882

Here's the code I used by the way:

#primary, #secondary, #tertiary, body, #canvas {
margin: 0;
padding: 0;
}

Hm, the three-columns-right appears to be affected by the same bug as the two-columns-right, as well, where the modules in #tertiary end up in the middle of the content (but I guess that'll be fixed by the same thing)

(I am wickedly tempted to hide the three-columns-right option until something is worked out, tbh :-))

Edited 2009-07-30 17:04 (UTC)

*looks at screenshot*

*looks at css*

*tries not to swear*

I think that IE is screwing up the float order. So it thinks the wrong one comes first and our margins are telling it to float those two columns into the same space. What happens if, instead of the sidebars being floated right in three-columns-left and three-columns-right, we float both tertiary and secondary left, in those? At that point, the margins should make them separate again, no matter how stupid IE is.

Hmm, still overlapping sidebars, though that could be because I haven't adjusted the margins:

http://afunamatata.com/screenshots/3cols-right-float-left.png

I'll see if I can play around with it later, but right now I need to run off to work.

Hmm, okay, I added this:

.three-columns-right #tertiary {
margin-left: $*sidebar_width;
}

And it seems to work in IE7 and Firefox, for Modish Scarlet. I am cautiously optimistic; will try in a couple of other layouts.

Oh, thank goodness. *shakes her fist at IE* Act like a sensible browser, you wretched thing!

ColorSide is revised and the navstrip and userpic should be nicely in place. Still waiting on a computer to fiddle with Basic Boxes on.

Hey, if you can't get a computer to fiddle with, ping me and I can take a look. (Now that we have two layouts showing the symptoms, it may be possible to isolate common code? Or so I hope -- and I can try that *G*)

Could you? I'd appreciate that a lot; the computer I can get with IE on it is my spouse's work computer and he can only bring it home one evening at a time! I've found that the weird overlap-and-then-snapback thing is happening with my current layout (Fluid Measure) too. It snaps back if I just click to a different tab and back! Wtf, IE? So that's another data point.

I wonder if it's actually the #secondary/#tertiary .inner padding that it needs to stay straight, somehow...

*says a lot of bad words* Never mind. I know what it is. It's the fricking "position: relative" on #canvas, in all three. *pulls hair* I /need/ that! I can't position the nav links or do z-index without it! Argh.

*goes to try and find anyone who's figured out how to freaking fix this*

Got it! For future reference, if a containing div must have position:relative, slap this line underneath the relative command, and that will fix it for IE7:

float: left; width: 100%; /*asinine IE7 hack to keep left sidebar from sliding under #primary when #canvas is relative*/

Width to be adjusted appropriately if the container has margins. Okay, Basic Boxes and Boxes and Borders should now be clear.

Oh god, how much do I hate IE...

<333

(And now I'm thinking of having tips and tricks entries. There are a couple of other things, like making sure margins go on #canvas and not body so it won't interfere with the navstrip, that could go in one of those)

I'll check later! Just about to head to bed. But figure that with those, we're now clear to commit?

Yeah, as long as the double-sidebar versions check out, I think we're good to go.

So:

Basic Boxes Green
- three-columns-right, overlapping sidebar is still broken

Modish Scarlet
- three-columns-right, overlapping sidebar is fixed

ColorSide Nadeshiko
- three-columns-right, overlapping sidebar is fixed
- rest of the issues look good as well. Note I've only tested in three-columns-right and two-columns-left in IE7

Boxes and Borders Gray

one-column, two-columns-right
- looks good

two-columns-left, three-columns-sides, three-columns-left
- the left sidebar is overlaid onto the content

three-columns-right
- #tertiary overlays #secondary

Actually, I suspect that these are the same issue as with Basic Boxes; just that basic boxes had a background, so the content managed to hide the sidebar

Stepping Stones Purple
(ooh I find the overlap on this one interesting!)

* one-column, two-columns-right, two-columns-left, three-columns-sides, three-columns-left, three-columns-right - looks good!

Mmm and I just realized I haven't made sure to test the two-columns-right issue; I assumed everything was broken and forgot to confirm.

As a quick FYI, I just found a way to use Tabula Rasa as a base for another layout layer. So the themes here will go live on the site as their own layouts, and we can easily customize the colors via properties in a theme layer. (They're using Tabula Rasa properties setup and CSS etc in the backend! But they look like an entirely new layout layer from the front *G*)

*claps hands* Oh, that's /fantastic/! I was wondering if that could be done and couldn't find a way when I skimmed the old documentation. That'll be pefect, then. Thank goodness, because a few of these do require altering a function or two and that's a massive pain to edit seven different times!

Ah, and I've just finished some minor updates and edits to these layers, so if you want to grab the copy from the links today, they'll be all fresh and polished.

(It's how LJ does Mixit versus Expressive *G*)

And okay! I actually just finished experimenting with converting Basic Boxes into a new layout layer. About to head to bed, but I shall grab the shiny tweaked layouts and finish the rest of it tomorrow! :)

(And then the other stuff in dreamscapes, mwahahha)

Bit of a silly question, but do you prefer the themes to be "Basic Boxes Green", or just "Green"? (The layout is already named "Basic Boxes" obviously)

Good question, actually. Um. I think Basic Boxes Green.

Okay, so I'm done I think! So FYI:

I did some tweaks to the margins of the entry-interaction-links, as per http://bugs.dwscoalition.org/show_bug.cgi?id=1595

I also changed some of the stuff to use generate_background_css (the main difference being that if for some reason there's no value set on a variable, it prints out nothing instead of printing out "color: ;")

So now all I'm waiting for is the preview images (which someone will do shortly) YAY \o/

Oh, lovely!

(Also, the person who review the patches keeps squeeing at me "OMG, so pretty. How am I ever going to choose?")

*blushing*

Oh, I've been meaning to ask, will there be a metadata area where we can put things like "inspired by X" or similar? A description field in the header or similar?

Hm, we have a layout credit module in the works (http://bugs.dwscoalition.org/show_bug.cgi?id=1412). That could fit under the Resources section, or perhaps a free text section in that same module?

Oh! or if you mean that you want it in the theme layer itself but not on the page? that works too. It can go into the layerinfo description.

Yeah, that was it! Okay.

Because I am never going to be able to choose. It's only the truth! :)

*blushing some more*

Hi, I am

yvi. Let me be your first fangirl!

*laughing* Hi! I'll try to get on to porting the color variations for Modish and ColorSide soon, so you can have those to choose from, too. ^_^

Hi,

There's a small issue on the month page: on community journals poster and entry subject aren't separated by any space. Assuming this is not intended, do you want to report and fix it yourself?

You can see what I mean here for example: http://onesongaday.dreamwidth.org/2010/04/

Not intended, no! If it shows up here, that probably means it's something that should be fixed in Tabula Rasa itself.

I won't have time to do this for at least three weeks, so if you have a sec to log and/or fix it, please feel free!

My bad. You're right. You added some padding back to Crossroads and that's why I thought it wasn't all TB-layouts. Thanks again.

Edited 2010-04-20 22:16 (UTC)

Hi B&R! I've started patching bug 3719 and I wanted to know if making the custom icons page look like the system icons page was fine by you or if you wanted something more specific (you can tell me what you want or code it yourself depending on what you have time and energy to do).

Here's Basic Boxes looking like the current page to give you an idea: http://system.ninetydegrees.hack.dreamwidth.net/icons

Edited 2011-12-27 13:39 (UTC)

That example looks just fine! Keeping the basic system arrangement should work for all of these. That'll make it recognizable, and also a bit like the Tags page. That fits.

Flat | Top-Level Comments Only

Tabula Rasa: Basic Boxes, Modish, ColorSide

Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Quick look at the first three layouts

Re: Boxes and Borders; Stepping Stones

Re: Boxes and Borders; Stepping Stones

Re: Boxes and Borders; Stepping Stones

Re: Boxes and Borders; Stepping Stones

Re: Boxes and Borders; Stepping Stones

Re: Boxes and Borders; Stepping Stones

no subject

Boxes and Borders; Stepping Stones

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Icons Page

Re: Icons Page