Refried Tablet -- Converted!

[zvi]

Theme name/layout: Refried Classic / Refried Tablet
Author: zvi
Layout info: Layout, Theme, and Live.
Image info: No images

The info links go to my dreamhack. If you want to test it on your own journal, the layout # on Dreamwidth is 78331. The theme # is 78333.

This got tested when it was CSS, but this is my first conversion, and I'm just not sure it works as expected. If you could take a look at it and tell me if it worked okay, I'd really appreciate it. (If something doesn't work, it's very helpful to get your browser and version number.)

This should work for all column configurations except "none", which returns a giant mess. If you have any ideas about how to get something legible from none, I'd love to hear it.

Comments

[baggyeyes]

Hi,

I've tried the last few versions, and I'm looking forward to this being official.

I'm currently testing with a two column, left sidebar setup, no extra customizations at the moment. I'm using Flock 2.5.2, based on Firefox 3.5, Mac.

I noticed on the module-tags_multilevel, some of my tags disappear right off the side of the browser. Do you want a screenshot? Or is it visible to you?

I'm going to use this layout/theme for a bit and really check it out.

[zvi]

Hmm, it's not showing when I look at your journal in IE7. Could you take a screenshot, please? And, if possible, put red lines or something on it to indicate where things are being run off the side.

[baggyeyes]

I hope this helps:



I'll test it more with Opera and Safari.

[turlough]

Looks good to me in Firefox 3.5.3.

More screenshots

[baggyeyes]

Here is the tags module in Opera 10, Mac:


Safari 4.0.3:


I'll take a look at the whole layout/theme in the coming days.

Re: More screenshots

[zvi]

Oh, er. I figured out the issue, I think.

/* add padding to module content because whitespace is good! But we don't need so much on ul and table. */
.module-content { margin: 1em; }
.module-content ul, .module-content table { margin-left: -0.5em; }

/* make lists prettier */
.module-content li { text-align: left; list-style-type: none; list-style-position: inside;}

Now I have to figure out how I should change it up. I may just get rid of the negative space on .module-content ul and .module-content table; I think that should fix it.

Are you using the layout layer I supplied on my journal, or did you copy it over? If you copied, could you try commenting out that specific line and see if that fixes it? Thanks.

Re: More screenshots

[zvi]

Ah, ha, if I change .module-content ul, .module-content table { margin-left: -0.5em; } to .module-content ul, .module-content table { margin: 0 0.5em; }, I get better results.

Re: More screenshots

[baggyeyes]

I used the code from the links you supplied here. I'll try your fixes tomorrow.

Re: More screenshots

[baggyeyes]

This (and your following fix) worked. It looks spiffy.

Content side extra space

[baggyeyes]

I've found that there's a space on the edge of the right side of the browser window:

Top is Firefox 3.5.3, middle is Safari 4.0.3, and bottom is Flock 2.5.2, Mac.



The same is true of Opera. I just didn't have enough screen space. :)

Again, I haven't made any changes in the wizard interface - I just installed the layer/theme, and started using it.

Re: Content side extra space

[zvi]

Oh, that was ... bizarre. The positioning to make the header and the poster name next to the icon resulted in a very wide header. Add the following lines, and it should be fixed:

.two-columns-left .entry .header, .three-columns-left .entry .header { margin-right: 105px; }
.two-columns-left .entry .poster, .three-columns-left .entry .poster { margin-right: 105px; }

Re: Content side extra space

[baggyeyes]

As usual, it worked. :) Thanks!

Re: Content side extra space

[zvi]

Hey, thank you. You catching this stuff means the style will work when it's all official-like.

Re: Content side extra space

[baggyeyes]

Sorry I'm moving at a snail's pace, though. It's a mixture of dialup and my own fuzzy brain.

The Profile module

[baggyeyes]

More stuff, this time the profile box. The management links butt up against the username when the user is logged in.

The usual browsers are Safari 4.0.3, Opera 10, Flock 2.5.2, and Firefox 3.5.3 on Mac.
Opera is the only one screencapped as logged out.

Three Columns on either side setup. Gap between header and sidebar on right

[baggyeyes]

Three column, sidebar on either side setup. The right sidebar does not meet to the Header.

Re: Three Columns on either side setup. Gap between header and sidebar on right

[zvi]

To clarify, you only get the gap on Three columns either side, and not on three columns left or three columns right?

Re: The Profile module

[zvi]

.module-userprofile .userlite-interaction-links {
margin-top: 1em;
margin-left: 0em;
}

Can you see if margin-top of .5em is enough for you, actually? I'm not having a problem with FF 3.0 on Linux, and it looks a little weird to me now, actually. Is the spacing different than you see on other styles?

Re: Three Columns on either side setup. Gap between header and sidebar on right

[zvi]

.three-columns-sides #tertiary .inner:first-child, .three-columns-left #tertiary .inner:first-child, 
.three-columns-right #tertiary .inner:first-child {
    padding-top: 0em;
}

Does that fix it?

Re: The Profile module

[baggyeyes]

I'm having trouble with my connection to the internet - I'll try as soon as I can, and reply to your other comment, too.

Re: Three Columns on either side setup. Gap between header and sidebar on right

[baggyeyes]

I'm so sorry it took so long to get back to you. This worked, and it worked across the board on my browsers. \o/

Refried Tablet

[baggyeyes]

I've tried this layout in all the sidebar possibilities, and the only thing I've seen is a small gap of space with the #tertiary column, regardless which side its on. (Three columns, sidebars on left, three columns, sidebars on right, side bars on either side).

It might only show up on my browsers. I can't post screenshots right now, I will during the week, Monday most likely.