Brainstorming: What do we "need" template-wise?

[d_cee]

Hi

Well done Don with the solution to the extra space issue

Dave, did you already upload a zip for me to do that text-based colorset? Sorry if I missed it.

You didn't miss it - I've just been overwhelmed with work recently and forgot. Sorry! You can download the steel colourset from here. I've not had time to tidy up the code yet - I'm more interested in whether I've covered all combinations and that it works on linux, mac and windows.

catch you later


Dave

[Don Chambers]

You EDIT: DO NOT need to unwrap the banner and footer YL - this seems to work on its own. I guess that is the advantage of walking away from the issue for a few days. Fresh perspective. As I started to review the problem, and realized the sidebars were pushing #wrapper too wide, the solution became fairly obvious. Again, I do not know if it is ideal, and I am not even sure why IE was allowing it, but it does work, and lets us keep the 100% total width of LSB+content+RSB.

[Don Chambers]

OK - how about equal height left & right sidebars?

Add to the existing styles:

Code: Select all

#serendipityLeftSideBar,
#serendipityRightSideBar {
    padding-bottom: 20000px;  /* make sidebars equal height */
    margin-bottom: -20000px;} /* make sidebars equal height */

#footer {position: relative}

Also requires #wrapper have overflow: hidden, but we just picked that up for the width issue.

Optional: Adding #content to the sidebar paddings and margins above makes all 3 columns equal height. At least, it does when I try it using editcss on the sandbox.

Now, this concept comes from here: http://www.positioniseverything.net/art ... qualheight

However, I guess since the concept was originally proposed, there are a few scenarios where it might be problematic, and the link discusses those problems. So, I'll let you guys weigh in on whether or not this addition is desired. I saw no problems in my versions of IE and FF. However, one of the greatest problems relates to in-page anchors, and BP is not using any.

The other reality is that BP may never suffer from the problem. It is not structured like the 3 column layout that positioneverything uses this equal column height technique on.

[yellowled]

Now, this concept comes from here: http://www.positioniseverything.net/art ... qualheight

However, I guess since the concept was originally proposed, there are a few scenarios where it might be problematic, and the link discusses those problems. So, I'll let you guys weigh in on whether or not this addition is desired. I saw no problems in my versions of IE and FF. However, one of the greatest problems relates to in-page anchors, and BP is not using any.

Uhm ... I'm very suspicious of that one. Carl and I tried to port this to s9y, and it turned out to have more flaws than expected.

Anyway - there is a little problem with overflow: hidden for #wrapper. I'm on it, but I can't describe it in detail at the moment. I'm getting not much done right now, but I'll address that later and report back.

YL

[yellowled]

Uhm ... I'm very suspicious of that one. Carl and I tried to port this to s9y, and it turned out to have more flaws than expected.

I'm still not comfortable with that. There are other ways to have equal heights sidebars if someone insists on having them, so I say let's not incorporate this in bulletproof. Might be Pandora's box.

Anyway - there is a little problem with overflow: hidden for #wrapper. I'm on it, but I can't describe it in detail at the moment. I'm getting not much done right now, but I'll address that later and report back.

Okay, so I guess the detail was that the IE italics bug was interfering with Don's overflow: hidden for #wrapper, so I threw the italics bug fix out. Zipfile and sandbox updated to this snapshot.

Okay, so I have experience some small issues with IE and the calendar on my local xampp installation. Please verify these, guys. First, IE 5.55 and 6 don't seem to display the calendar arrows. Well, sometimes they do, sometimes they don't. IE 5 does this correctly, but has an issue with the transparent spacer png used in the calendar. I think this is neglectable, plus we probably won't be able to do much about this. We could use a gif instead, but seriously - just for IE 5? I don't think so.

YL

[Don Chambers]

Can you be a little more specific about the problem with the italics thing? I didn't notice anything wrong when I tested overflow:hidden.

I have never noticed the calendar arrow NOT displaying under IE6. I do, however, see a little grey square, which is presumably your spacer png. Given all the issues about transparent pngs, I try not to use them. It is interesting to note, however, than the s9y banner uses transparent, curved, corners, and I do not hear of too many people complaining about that PNG.

Why does the spacer png need to be there at all? If it does need to be there, could you style it with a visibility: hidden? It still takes up space that way, unlike display:none.

Regarding the equal length columns - I honestly think it will be a heavily requested thing because that is what so many people are used to seeing. It is fairly easy to accomplish with additional DIVs, but I know we were trying to avoid the excess where possible.

[d_cee]

Hi guys

I thought we weren't bothering with IE5? Although as a matter of interest it holds together Ok in IE5.2 mac. I'm still using the last zip though.

Calendar arrows on your sandbox and my dev bulletproofs are both Ok in IE6 - transparent png looks messy on the 'steel' colourset in my Dev though

I'm just doing some work on a no-graphics colourset but I'm interested to know how the graphic 'steel' colourset holds up on your machines and installs.

I'll download the latest zip to do the new colourset.

cheers

Dave

[yellowled]

Can you be a little more specific about the problem with the italics thing? I didn't notice anything wrong when I tested overflow:hidden.

When I had the overflow: hidden for #wrapper and the italics fix (which changes the overflow for various parts of a site in IE) in the stylesheets, I didn't - very interesting - get a vertical scrollbar in IE 5 and 6 although the content of the test blog needed to be scrolled vertically.

I have never noticed the calendar arrow NOT displaying under IE6.

Interesting. Might be one of these things which happen only when you scroll the site, 'cause I remember it being display when the page was rendered, but then disapperearing. Very weird, but hey - it's IE after all. But if neither you nor Dave can reproduce this, maybe it's my xampp installation ...

I do, however, see a little grey square, which is presumably your spacer png.

Yup, that's it.

Why does the spacer png need to be there at all? If it does need to be there, could you style it with a visibility: hidden? It still takes up space that way, unlike display:none.

To be honest, I have no idea. It looks like a throwback to the old days when people used blank gifs to give table cells a minimum size. However, the blank png is half the height of our calendar arrow images ... Dave?

Regarding the equal length columns - I honestly think it will be a heavily requested thing because that is what so many people are used to seeing. It is fairly easy to accomplish with additional DIVs, but I know we were trying to avoid the excess where possible.

Actually, I think I haven't seen sidebars with a different background color than the content in ... well, ages I have put it in the latest update, which is being uploaded while I'm typing this. So let's just test this in the sandbox for some time. After all, this is easier than using bg images, so let's give it a try.

Edit: Working fine in FF/Iceweasel 2/Linux. Can't test Opera right now, some Debian update screwed up my Opera installation.

YL

[yellowled]

I thought we weren't bothering with IE5?

Well, we're not really bothering with it, I just thought I'd report it Plus, if there's an easy solution, I think it's still nice to make this work in IE5.

Calendar arrows on your sandbox and my dev bulletproofs are both Ok in IE6 - transparent png looks messy on the 'steel' colourset in my Dev though

What exactly does 'messy' mean? I just see it (as a grey square), and the calendar looks a little too wide in IE 5 and 6, as far as I remember ...

I'm just doing some work on a no-graphics colourset but I'm interested to know how the graphic 'steel' colourset holds up on your machines and installs.

I have to admit I haven't even looked at it in a dev blog yet, I only know the screenshots Don made So does that mean you have time to do a no-graphics colorset for this, too? Because I won't have much time before ... well, Tuesday, probably.

YL

[d_cee]

Hi

What exactly does 'messy' mean?

I think I meant it looks like it shouldn't be there. I can't rememeber whether I put it there originally to stop the cell from collapsing in earlier browers or to make the arrows equidistant from the centre. Either way it could be hidden - or a gif.

o does that mean you have time to do a no-graphics colorset for this, too?

I've pretty much done one, a green one. Quite a few bit's and pieces to finish yet and not very exciting but it's there on the dev blog.

cheers
Dave

[yellowled]

I think I meant it looks like it shouldn't be there. I can't rememeber whether I put it there originally to stop the cell from collapsing in earlier browers or to make the arrows equidistant from the centre. Either way it could be hidden - or a gif.

That's exactly what I thought - looks like it shouldn't be there, but it was there in, erm, IE 5.01 I think. Whatever, visibility: hidden should work even in that one to my knowledge, so I have incorporated that one into plugin_calendar.tpl as an inline style. Seemed appropriate since it does already have an inline style for the border, also saves introducing a new class or id. Update will have to wait 'til Sunday night, I'm beat right now.

I've pretty much done one, a green one. Quite a few bit's and pieces to finish yet and not very exciting but it's there on the dev blog.

I think it's nice - just remember the great response to camouflage-like, military type templates in the past. Which once again suits our template name

So have a nice Easter weekend, everyone

YL

[Don Chambers]

Sorry guys - been buried again. Not likely to get grounded in what the current issues are for a few days. Have an enjoyable Easter weekend.

Green looks good Dave.

[d_cee]

Hi Guys

hope you had a good easter break

I've now made another colourset - a blue one which is on daviddot.com at the moment. Let me know what you think. Both this and the green one are 'all options styled' so they work pretty well IMHO as proof of concept the template. Or at least they will if we can sort a couple of IE rendering errors.

If you take a look in IE6 or 7 you'll see that where a sidebar title runs onto 2 lines the left padding doesn't take. In FF or Safari it's fine.

The other error only shows on the Green colourset. The sidebar content doesn't butt up to bottom of the sidebar title in IE - there's a small margin between them. In Firefox there's no margin - as it should be. In the blue colourset I left a margin so this error doesn't apply.

One other thing having made these coloursets. I think it would be really useful to be able to style the navbar differently if it's positioned 'above the header' rather than having the same style as 'below the header'.

And I still think that somehow giving a user the ability to change the header image (or insert one if theres none set) would be a great addition to the config
catch you later

Dave

[yellowled]

Okay, guys - Easter break's over, time to get back to work

Well, basically, I think we don't have any work left. I've just now uploaded the latest update including that visibility fix for the spacer png in the calendar. Hopefully, that was the final IE bug we had to smash.

However, I recently got Dan Cederholm's "Bulletproof Webdesign", and Dan has some interesting ideas which might or might now help us improve bulletproof even more, so I thought I'd run them by you.

First of all, Dan suggests a different approach to font-sizes. His way is to assign a keyword size (font-size: small;) to the body and use percentage sizes for everything else. I'm not sure whether this is really an advantage over our approach using percentage plus ems.

Another idea would maybe make it possible to convert any of our layouts to be content first - I have to take a closer look at our code, but the basic technique behind this is to put the left sidebar (in a 3-column layout) into a container div with the content. However, that's extra markup ...

Here's another idea which came up in a thread in the German forum. We could pretty easily strip the sidebar plugins of excessive divs using sidebar.tpl. I'm not completely done figuring it out, but basically, we could use something like this:

Code: Select all

{if $is_raw_mode}
<dl id="serendipity{$pluginside}SideBar">
{/if}
{foreach from=$plugindata item=item}
   <dt class="serendipitySideBarItem container_{$item.class}">
      {if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}">{$item.title}</h3>{/if}
   </dt>
   <dd class="serendipitySideBarContent">{$item.content}</dd>
{/foreach}
{if $is_raw_mode}
</dl>
{/if}

Now, I don't think any of this is necessary, and at least the content first technique would mean to seriously reconsider the index.tpl, so that might be quite of a hassle. The font sizes should be fine the way they are, and personally, I can live with the sidebars just the way they are now.

That's why I wanted to hear what you guys think.

YL

[yellowled]

I've now made another colourset - a blue one which is on daviddot.com at the moment. Let me know what you think.

Neat! I can't speak for Garvin, but this has potential to become a new default template

If you take a look in IE6 or 7 you'll see that where a sidebar title runs onto 2 lines the left padding doesn't take. In FF or Safari it's fine.

Hm, I can't take a look in IE right now. Frankly, I don't want to

The other error only shows on the Green colourset. The sidebar content doesn't butt up to bottom of the sidebar title in IE - there's a small margin between them. In Firefox there's no margin - as it should be.

In my humble opinion, this screams "don't care about it, it's IE".

One other thing having made these coloursets. I think it would be really useful to be able to style the navbar differently if it's positioned 'above the header' rather than having the same style as 'below the header'.

I thought about that, too, when I did the tabbed navbar for http://matthias.yellowled.de. This would probably look awkward below the header. I don't think we need anything for the navbar within the sidebar, but I have added classes to the sitenav divs now:

Code: Select all

<div id="sitenav" class="snabove">
...
<div id="sitenav" class="snbelow">

That should suffice, right?

And I still think that somehow giving a user the ability to change the header image (or insert one if theres none set) would be a great addition to the config

Yeah, well, come up with a solution for that Actually, I got an email request for something like that the other day, too. This is obviously something users want very badly.

Here's an idea: Let's finish bulletproof first. Then, we give this particular feature another shot, using a new forum thread. Maybe that way, we can get more people to chime in on this, 'cause frankly, this thread has become unreadable for anybody but the three of us

YL