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

Post by **yellowled** » Fri Aug 03, 2007 8:40 pm

Don Chambers wrote:Looks like you decided NOT to go with font-size: 80% in style.css?

Oops. Forgot about that one. I haven't really looked at the blank one in a while. Added it just now.

Don Chambers wrote:As far as the purple sbsitenav, that is a designer judgement call.

True.

Don Chambers wrote:For blockquotes, I like to use graphical quotes, and I can certainly provide both the CSS and images to do it. However, problem with this is that it requires new quote graphics for different colors depending on the background, so I am not sure it is the best way to go about it for BP.

Actually, I started to try some things with those. Right now, I have something with a thick left margin and a pastel background for the purple colorset and something with a (non-graphical) sort of spatial border in the blue colorset. I want to do something with curly quotes for the green one, but I'm still mulling over it.

Problem is, there are different techniques for curly quotes. I really don't want to use something which needs extra markup (like an additional div or spans). The blockquote markup should be something like this:

Code: Select all

<blockquote>
<p> ... </p>
</blockquote>

Plus, it should still look decent if the inner p is left out. There are some techniques using the :before and :after pseudo classes, but those don't work in any IE or Opera as fas as I know. Images would be an option (assign open quote background image to blockquote, close quote to p), but that will possibly look crappy in IE if we use transparent PNGs. Then there's another, well, it's not really an issue, but: open and close quotes are different in different languages ...

Don Chambers wrote:I also like to use italics, but I read somewhere that italics is not recommended due to the fact that it can be difficult to read for visually impaired people.

... and can create more IE issues.

Don Chambers wrote:Unless we make this change, comments.tpl is not part of BP.

Well, it is now since I agree

I just now updated the zipfile under the same URL as the last one since it's still 08/03. This one already includes my first version of the blockquotes for blue and purple.

YL

Post by **Don Chambers** » Fri Aug 03, 2007 10:34 pm

I would not worry too much about language differences for the blockquotes, but if you WERE overly concerned about it, you can stick with non graphical.

As far as using 2 different images, one at the beginning, and one at the end - that is exactly what is in my grey version. Using absolutely no additional markup, here it is (obviously, you need the images):

Code: Select all

blockquote {
    margin: 2% 10% 0 10%;
    display:list-item;
    padding:0 5px;
    list-style-image: url('img/open_quotes_dk.gif');
    background: url('img/close_quotes_dk.gif') 100% 100% no-repeat;}

As mentioned earlier, I think the downside to this is that the color is very dependent upon the background of the colorset, although a shade of grey may work for all 3. Downside is from the use of BP as a framework. Not everyone has the ability to open up a graphic design tool and draw themselves 2 new blockquote characters in whatever color they want. I suppose I could crank off a couple dozen different color variations and either include them with BP, possibly as a zipfile, or even as a download link from the doc site. The other reality is that I have so much on my plate right now that churning out a bunch of different blockquotes is not exactly something I am eager to do.

Either method you have used for blue or purple is probably the better way to go about it for BP as it is easily modified WITHOUT graphics by other users. Those with greater capabilities will know how to do something like I showed above anyway.

Something I forgot to mention in my last post. We need to modify preview_index.tpl. It needs the #wrapper container to properly format our previews. I think this should work OK, so just replace everything at the end with what is there to this:

Code: Select all

    <body style="padding: 0px; margin: 0px;">
        <div id="wrapper" style="width: 100%; border: 0;">
            <div id="content" style="padding: 5px; margin: 0px;">
                {$preview}
            </div>
        </div>
    </body>

Bughunting never ends!!!! LOL!!

Did you get my email about the admin stuff???? And how did that other matter work out with your older template?

Post by **yellowled** » Fri Aug 03, 2007 11:07 pm

Don Chambers wrote:As far as using 2 different images, one at the beginning, and one at the end - that is exactly what is in my grey version. Using absolutely no additional markup, here it is (obviously, you need the images):
Code: Select all
blockquote {
    margin: 2% 10% 0 10%;
    display:list-item;
    padding:0 5px;
    list-style-image: url('img/open_quotes_dk.gif');
    background: url('img/close_quotes_dk.gif') 100% 100% no-repeat;}

Erm, "list-style-image"? In a blockquote??

Don Chambers wrote:As mentioned earlier, I think the downside to this is that the color is very dependent upon the background of the colorset, although a shade of grey may work for all 3.

I'm not doing graphical blockquotes for all 3 colorsets. I have now included a graphical, curly style for the green colorset. Hope the images work in IE, haven't checked it yet. Please check it out.

My method works with "just blockquote", "blockquote with one p inside" and "blockquote with one p, but paragraphs simulated using br". Unfortunately, it looks a little bit ugly if there are multiple p used within a blockquote. (I hope this makes any sense. I'm too tired to type a code block for his

)

Don Chambers wrote:Downside is from the use of BP as a framework. Not everyone has the ability to open up a graphic design tool and draw themselves 2 new blockquote characters in whatever color they want.

Hold on - we're not responsible for supplying endless graphics ressources. If people can't do these images on their own, they should use something different. Period. I mean, even I can do that. And I'm hopeless with graphic programs.

Don Chambers wrote:Something I forgot to mention in my last post. We need to modify preview_index.tpl.

Well, well. What a surprise. Done. Yay, finally the preview works! Way to go, Don. Updated zipfile at the latest URL available.

Don Chambers wrote:Bughunting never ends!!!! LOL!!

You name it

Don Chambers wrote:Did you get my email about the admin stuff????

Yes, got it. Haven't got the time to check it out before Sunday, though.

YL

Post by **Don Chambers** » Sat Aug 04, 2007 12:26 am

YUP!!! List style in a blockquote!!! And the code I posted above is exactly what is generating the blockquote in this image (though, it is no longer italics): http://www.chicagoloopcruise.com/librar ... full-1.png

I've never seen any stylesheets that get too deeply nested into potential paragraphs and <br>'s inside of blockquotes.... I would probably never think of it until I encountered it on my own site, and that has never happened. This is yet another one of those times where I wish I had some great s9y database with theme busting entries, like Janis or Carl had. I tried to get that once, and Carl couldn't for some reason, and Janis never responded to my PMs about it.

Anyway, while you have been busy with the blockquotes, I put together a few comment styles, subject of course to anything Dave would prefer instead of these:

Purple:

Code: Select all

.serendipity_comment_author_self comment_evenbox,
.comment_evenbox {
    line-height: 1.2em;    
    border: 1px dotted #823995;
    background: #EDE6EE;
}

.serendipity_comment_author_self comment_oddbox,
.comment_oddbox {
    line-height: 1.2em;
    border: 1px dotted #823995;
    background: #F5F4F8;
}

Blue:

Code: Select all

.serendipity_comment_author_self comment_evenbox,
.comment_evenbox {
    line-height: 1.2em;    
    border: 1px dotted #3D98C5;
    background: #efefef;
}

.serendipity_comment_author_self comment_oddbox,
.comment_oddbox {
    line-height: 1.2em;
    border: 1px dotted #3D98C5 ;
    background: #dfdfdf;
}

Green:

Code: Select all

.serendipity_comment_author_self comment_evenbox,
.comment_evenbox {
    line-height: 1.2em;    
    border: 1px dotted #6B8F50;
    background: #DFD7C3;
}

.serendipity_comment_author_self comment_oddbox,
.comment_oddbox {
    line-height: 1.2em;
    border: 1px dotted #6B8F50;
    background: #AFA283;
}

I am not overriding the margin settings from style.css.

Post by **yellowled** » Sat Aug 04, 2007 6:31 pm

Don Chambers wrote:YUP!!! List style in a blockquote!!!

I'll have to play with that. Where did you find that? Any web sources?

Don Chambers wrote:Anyway, while you have been busy with the blockquotes, I put together a few comment styles, subject of course to anything Dave would prefer instead of these:

I'll check them out along with the blockquote code after the weekend.

YL

Post by **Don Chambers** » Sun Aug 05, 2007 4:15 pm

I do not remember where I came up with the blockquote thing. It was originally part of a template I never completed. Cool idea though - use the list-style-image for the beginning quote, and a background image for the ending quote. But, as I mentioned, I think we should stick with what you have already done for BP as it does not require graphics.

Garvin has returned from vacation so hopefully these admin modifications will soon be committed and the admin template can be incorporated into BP.

Post by **yellowled** » Sun Aug 05, 2007 10:50 pm

Don Chambers wrote:I do not remember where I came up with the blockquote thing. It was originally part of a template I never completed.

It's a very smarty idea, actually. Way to go. I checked it out yesterday, and I have already used it for the green template. I have also included your styles for the comments, but not yet updated the zipfile. As usual, I'm nowhere near my workstation on the weekend

Don Chambers wrote:But, as I mentioned, I think we should stick with what you have already done for BP as it does not require graphics.

Well, as I said, I have used it (with graphics) for the green colorsets. I figure if I can do those images, almost anyone will be able to modify them to their needs.

Don Chambers wrote:Garvin has returned from vacation so hopefully these admin modifications will soon be committed and the admin template can be incorporated into BP.

Haven't checked that out yet. Maybe tomorrow.

YL

Post by **Don Chambers** » Mon Aug 06, 2007 2:11 am

I'll check out your blockquotes on the next zip file. I know I stole the idea from somewhere, I just cannot remember where!!

Before your next zipfile, perhaps update both the thumbnail and larger screenshot to include the latest purple scheme with the body gradient. Also suggest you temporarily switch your devblog to english for the screenshots.

EDIT: Add this to base.css:

Code: Select all

.serendipity_commentBody {
    overflow: auto;
}
.serendipity_entry_body {
    overflow: auto;
}

These work on FF, I am too tired to test them in IE.

Post by **yellowled** » Mon Aug 06, 2007 9:20 am

Don Chambers wrote:Before your next zipfile, perhaps update both the thumbnail and larger screenshot to include the latest purple scheme with the body gradient. Also suggest you temporarily switch your devblog to english for the screenshots.

I have that in my ToDo list, but I'm saving it for right before the release so we'll get the latest version.

Don Chambers wrote:These work on FF, I am too tired to test them in IE.

Well, I'd have to reboot to do that, so let's hope they work

Included in the latest update.

EDIT: Updated again (same url). Since you lately styled the comment display, I chose to update it even further. So now the trackback/comments list plus comment form should align a bit more symmetrical (they do in FF; I'm still too lazy to reboot).

YL

Post by **Don Chambers** » Mon Aug 06, 2007 7:16 pm

Overflow: auto on entry_body has a couple of undesireable effects I did not notice last night: http://chicagoloopcruise.com/library/bp ... -float.png

First, the floated category icon seems to be floating for the entire entry_body - text is no longer simply wrapping the icon. This also happens for overflow: hidden.

Second, for an entry that includes extended_body, when I first click on "continue reading blah blah" I first get vertical scroll bars... I then have to click on it again to actually see the extended body.

I have not noticed any negative side effects for the overflow:auto on commentBody, but I have not really pushed it too hard yet.

Post by **Don Chambers** » Wed Aug 08, 2007 2:17 am

Found the problem with overflow: auto. Switch it to .serendipity_Entry_Date. That style exists in style.css, but not yet in base, which is where I think it should be. Makes me wonder if anything else in style.css should be in base, or vice versa. Anyway, that's another one off the list.

EDIT: Should we increase requirements in info.txt to 1.2?? Also, I created a new entry on the doc site. If I did everything correctly, it should only appear to D/D/M when logged in. Please let me know if that is true, or change whatever is necessary to make it that way.

To-do: re-evaulate additional stylesheets: oldies, ie, ie6, ie7. Are these really necessary, and if so, are they complete? More to-do: new thumbnail, new full size preview. New previews s/b included in doc site.

Post by **yellowled** » Wed Aug 08, 2007 11:26 am

Don Chambers wrote:Found the problem with overflow: auto. Switch it to .serendipity_Entry_Date. That style exists in style.css, but not yet in base, which is where I think it should be. Makes me wonder if anything else in style.css should be in base, or vice versa.

Well, base.css is supposed to contain anything crucial to the layout, i.e. anything bp needs to keep the layout intact under any circumstances. There may very well be elements in style.css which should rather be in base.css, I'll take a look at it later.

Don Chambers wrote:EDIT: Should we increase requirements in info.txt to 1.2??

As far as I remember, it doesn't really need 1.2. It does work in 1.1, but it needs 1.2 for all features (I remember the individual feed icons for the colorsets being one of them) to work. That's not really a requirement.

Don Chambers wrote:Also, I created a new entry on the doc site. If I did everything correctly, it should only appear to D/D/M when logged in. Please let me know if that is true, or change whatever is necessary to make it that way.

I can see it in the entries list, but it's not displayed in the frontend. So, yes, it's true

Don Chambers wrote:To-do: re-evaulate additional stylesheets: oldies, ie, ie6, ie7. Are these really necessary, and if so, are they complete? More to-do: new thumbnail, new full size preview. New previews s/b included in doc site.

Thumbnail and full size preview are done. Check out the latest snapshot. Previews for the doc site are not that crucial, but, yes, they need to be updated (we're having "double content" with our email conversation here

).

As for the IE stylesheets ... I'm about to set up my IE test environment again. I'll check them out. One thing we can probably drop is oldies.css which is supposed to work in IE < 6 - and I don't think bp will work in that, anyway

EDIT: Hrmpf. I can't get the multiple IEs package installed on my machine currently, which means I'm stuck with testing bp in IE6 for the time being. I'm pretty sure this won't work in IE < 6, so I have already removed support for that from the current snapshot on my machine.

However, it appears to only need one thing from ie6.css - the float: none!important; on #footer. Could you please double-check that? I'm not sure about the overflow: hidden; for the banner, why do we need that in IE again? If we don't need it, we could drop the additional IE stylesheets altogether and just add the footer fix for IE6 with some sort of hack or an inline style combined with a conditional comment ... IE7 should work fine without it.

YL

Post by **yellowled** » Wed Aug 08, 2007 2:31 pm

JFTR: latest snapshot updated again.

I have moved some styles to base.css I thought belonged there (from style.css). Also commented out the styles in question in ie6.css/ie7.css so you can check it out easier. Plus, I removed a double clear (we had it in base.css and style.css).

That's it for the day, I'm off to yet another night shift.

YL

Post by **Don Chambers** » Wed Aug 08, 2007 11:37 pm

Spent half the day restoring my internet connection! Cable modem bit the dust!

Anyway, things look fine in IE6 with all that stuff commented out. I wonder if some of those problems were caused by our previous equal column height method. Who knows.

Still need the footer floated left unless a different method can be determined. I suppose we could set the height of the footer to be slightly taller than the bp button. If we did that, we could set the line-height of #footer to the same dimension which should approximately center the text vertically.

However, if that does not work, and perhaps even if it does, I am not opposed to the ie6.css file unless having one is bad for other reasons (accessibility issues???). BP has not really been pushed very hard yet, and we might find future ie6 issues. It can always be removed in the future once we know for sure it is not necessary.

The admin template definitely requires 1.2, and while things like the feed icons, arrows, etc are not completely disabled, I think the fact that we rely on that functionality to accurately present our colorsets is enough. Besides, 1.2 release is right around the corner (beta5 released this morning).

We can casually look for other things to style, but I think stylesheets are likely substantially complete, unless we trip across any other problems. I will look through a few stylesheets I know to be exhaustive, and will mention anything I see worth considering.

Still need to "push all the buttons", etc, but it is probably time to hit the docsite a bit so when this thing is available, people can learn as much about it as possible. Otherwise, we are going to spend all our time answering forum questions!!

My availablility over the next 2 days will be minimal, then I will be on vacation for a week. I'm sure you can whip the docsite into shape by the time I return!!!

Post by **yellowled** » Thu Aug 09, 2007 2:11 am

Don Chambers wrote:However, if that does not work, and perhaps even if it does, I am not opposed to the ie6.css file unless having one is bad for other reasons (accessibility issues???). BP has not really been pushed very hard yet, and we might find future ie6 issues. It can always be removed in the future once we know for sure it is not necessary.

You're right. I meant to ask an accessibility "expert" I know (he would refuse to be called an expert, but he knows much more about it than I do) to check out bp anyway. So I'll leave ie6.css in and drop ie7.css. I'm also increasing the required version to 1.2.

Don Chambers wrote:I'm sure you can whip the docsite into shape by the time I return!!!

Yeah, right. Especially since I loooove writing documentation so much ...

YL