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

Skinning and designing Serendipity (CSS, HTML, Smarty)
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

YellowLed wrote:You do of course know that you've now earned the honor of being called 'official bulletproof bughunter'? T-shirt's in the mail. :wink:

YL
Does that come with a pay increase? :lol: You realize, I'll find them in BP, but leave dozens in my own code!!!

Still looking for input on my question of
I do have a question. The intro code to the commentform.tpl is this:

<div id="serendipityCommentFormC" class="serendipityCommentForm">
<div id="serendipity_replyform_0"></div>
<a id="serendipity_CommentForm"></a>

Is that legit for the first div to have a class of serendipityCommentForm and the anchor to use it for an ID? I spotted this because something looks funky about your margins in .serendipity_section_commentform.
d_cee wrote: here's a slight problem...

If you change template to 'bulletproof but don't save the style options and just go straight back to your blog then the paths for the feed-icons and calendar arrows isn't set.
If the colorset isn't selected, neither is anything else, such as nav links, is it? I'd have to check that one.
d_cee wrote:Oh and the right sidebar margin in safari seems to be because the right sidebar is floated left.
Betcha that is due to the total width equaling <100% thanks to IE. Can you change the CSS so that sidebars plus center content equal 100% and see what happens? I don't have access to a mac.
=Don=
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

Owen Stubbs wrote:One that occurs in nearly every template I have seen:

Code: Select all

.serendipity_comment { padding: 3px}
This should be #serendipity_comment as it is called from commentform.tpl as <form id="serendipity_comment"..... You have it correct further down in .frm, #serendipity_comment select {
Hang on a minute - regarding .serendipity_comment vs. #serendipity_comment: You have everything "comment" related grouped into a single block of CSS, vs some of Carl's prior context of separating "comments" from "comment form", so it depends on what you had intended for that tag.

Comments.tpl uses the CLASS .serendipity_comment as follows:

Code: Select all

<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self {/if}{cycle values="comment_oddbox, comment_evenbox"}" style="margin-left: {$comment.depth*20}px">
However, commentform.tpl uses the ID #serendipity_comment as follows:

Code: Select all

<form id="serendipity_comment" action="{$commentform_action}#feedback" method="post">
Since I was reviewing only the commentform in my post, I interpreted your class to be the form ID, therefore recommended a modification to #.

So once again, we have an instance of a class and an ID with the same name. My personal opinion, since these TPLS are contained in the template directory, and you are already introducing new classes and such, is to change the form ID to something other than serendipity_comment.

EDIT: Reviewing the code again, I see that we could just use the DIV ID for the entire form: #serendipityCommentFormC and skip the form ID completely.

EDIT: One other thing, you might want to add #serendipity_comment select:focus, to .serendipity_commentsValue .frm:focus {.... I love the color change on focus, and think it looks good on the select field too.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:Still looking for input on my question of
I do have a question. The intro code to the commentform.tpl is this:

<div id="serendipityCommentFormC" class="serendipityCommentForm">
<div id="serendipity_replyform_0"></div>
<a id="serendipity_CommentForm"></a>

Is that legit for the first div to have a class of serendipityCommentForm and the anchor to use it for an ID? I spotted this because something looks funky about your margins in .serendipity_section_commentform.
I think it's not legit, but I'm not 100% sure. Gah, that probably means we have to check the whole code for stuff like that ... I'd better start a todo-list, you're way too fast for me :wink:
Owen Stubbs wrote:
d_cee wrote: here's a slight problem...

If you change template to 'bulletproof but don't save the style options and just go straight back to your blog then the paths for the feed-icons and calendar arrows isn't set.
If the colorset isn't selected, neither is anything else, such as nav links, is it? I'd have to check that one.
Me, too. However ... well, we'll get to that later.
Owen Stubbs wrote:
d_cee wrote:Oh and the right sidebar margin in safari seems to be because the right sidebar is floated left.
Betcha that is due to the total width equaling <100% thanks to IE. Can you change the CSS so that sidebars plus center content equal 100% and see what happens? I don't have access to a mac.
That will probably break the layout - although I have to admit I have never tested it in FF or Opera. But it's almost a safe bet that a total of 100% will result in rounding errors which break the layout. Dave, can I have a screenshot of this in Safari, please?

From another post:
Owen Stubbs wrote:So once again, we have an instance of a class and an ID with the same name. My personal opinion, since these TPLS are contained in the template directory, and you are already introducing new classes and such, is to change the form ID to something other than serendipity_comment.
Okay, a) you're makin' me dizzy :) and b) let's postpone this stuff (double ids, ids and classes of the same name etc.). I have a TODO.bulletproof now, so none of this will be overlooked (hopefully :))

Soooo - we're not gonna get a solution for the feed icon via .tpl files: http://board.s9y.org/viewtopic.php?t=9165

Yes, that's bad news. But let's not lament. Don's code is still great for integrating colorset stylesheets and other images, but it's not the solution for the feed icon.

Basically we have two possibilities left: We could give CSS one last shot, maybe using the before/after technique Dave mentioned (I haven't really looked at it, and I'm too tired already to do that before tomorrow) - or we leave it 'as is', which means we ship it with the standard orange feed icon (or the grey one). People will still have the option to use an individual feed icon by overwriting xml.gif with a new icon, plus we could ship icons matching the colorsets with any bulletproof-based template.

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:Soooo - we're not gonna get a solution for the feed icon via .tpl files: http://board.s9y.org/viewtopic.php?t=9165

Yes, that's bad news. But let's not lament. Don's code is still great for integrating colorset stylesheets and other images, but it's not the solution for the feed icon.

Basically we have two possibilities left: We could give CSS one last shot, maybe using the before/after technique Dave mentioned
So here's what happened: Jude chimed in on that thread in the plugins forum, suggesting to maybe add some extra classes to the plugins in question, i.e. freetag, to make it easier to style. So I took a look at Abdussammad's code for the ShinyPlastic template, got myself a cup of coffee, and played around with it a little. It needed a good whack and some twitching, but ...

I THINK I GOT IT TO WORK!!1 :)

Zipfile/sandbox (usual URLs) have been updated, I've already checked this in Firefox 2/Linux and Opera 9/Linux, and it looks great in both. So you guys please check this out on Win and Mac in any browser you can get hold of :lol:

Phew. It's a shame it's only 14:30 in Germany, 'cause boy, could I use a beer now :wink:

YL
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

YellowLed wrote:Phew. It's a shame it's only 14:30 in Germany, 'cause boy, could I use a beer now :wink:
YL
Go for it anyway! :)

Your method does not work in IE6, but I knew that before you tried it because I already tried something nearly identical to what you did.

On the plugin thread, I posted what I think is a seriuosly easy solution. No TPLS, no IE bugs, no padding tricks. http://board.s9y.org/viewtopic.php?p=51721#51721
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:
YellowLed wrote:Phew. It's a shame it's only 14:30 in Germany, 'cause boy, could I use a beer now :wink:
YL
Go for it anyway! :)
Postponed to now. Just some posts here and I'm off to the couch for beer & pizza with my girl :)
Owen Stubbs wrote:Your method does not work in IE6, but I knew that before you tried it because I already tried something nearly identical to what you did.
Doesn't work in anything below IE 6, either. I don't even have an idea how it is displayed there, but I guess those IE users will get the default feed icon, which is what the deserve anyway :twisted:

BTW I covered two more plugins in the meantime: My Calendar and Authors. Gotta check if there's any more left, but that'll have to wait 'til tomorrow.

YL
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

YellowLed wrote:Doesn't work in anything below IE 6, either. I don't even have an idea how it is displayed there, but I guess those IE users will get the default feed icon, which is what the deserve anyway :twisted:
In my IE 6, no icon is displayed at all for syndication and freetag. Definitely will not work with the a:first-child pseudo class.
YellowLed wrote:BTW I covered two more plugins in the meantime: My Calendar and Authors. Gotta check if there's any more left, but that'll have to wait 'til tomorrow.
YL
Excellent. Didn't realize there were others that used the feed icon. Perhaps we should keep this conversation exclusively on the plugin thread?? 8)
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:In my IE 6, no icon is displayed at all for syndication and freetag. Definitely will not work with the a:first-child pseudo class.
Hmpf. That probably means I'll have to incorporate some extra styles in ie.css to cover that.
Owen Stubbs wrote:Excellent. Didn't realize there were others that used the feed icon. Perhaps we should keep this conversation exclusively on the plugin thread?? 8)
I thought we were going for the longest thread in this forum ever? :wink:

Okay, my observations (i.e. some tricks with grep and find) say there are no other plugins using the feed icon. However, there's the decision left what to do: Garvin has obviously included a new class for this in the 1.2 branch of s9y, which as far as I understand will not only make this easier to handle, but also possible in IE <= 6, right? If that's the case, we should go for that, even if it means that bulletproof will not work (correctly) with any s9y below 1.2. I really don't want to maintain different versions of it.

YL
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

YellowLed wrote:Okay, my observations (i.e. some tricks with grep and find) say there are no other plugins using the feed icon. However, there's the decision left what to do: Garvin has obviously included a new class for this in the 1.2 branch of s9y, which as far as I understand will not only make this easier to handle, but also possible in IE <= 6, right? If that's the case, we should go for that, even if it means that bulletproof will not work (correctly) with any s9y below 1.2. I really don't want to maintain different versions of it.

YL
If Garvin has added the requested anchor class of serendipity_xml_icon to the other plugins, then those plugins should behave exactly as the category icons do now - meaning they are easily replaced using the css I posted on the plugin thread. Problem is, you would not want to include that css NOW as it would work only for categories, and nothing else. Until 1.2 is available, you could embed the styles into the <head> of index.tpl using something like {if $head_version >1.1} (or whatever). Not sure that is totally clean, but it would certainly make the styles active in BP if the template was loaded in 1.2. It would also be a "heads-up" to any template designers that the method is available, and those individuals would likely switch it from embedded to style.css.

That being said, 1.2 may contain other things that are worth addressing in a 1.2 update of BP, so - perhaps it is best to stick this concept in a drawer for right now and revisit the issue when 1.2 is released.

Then again, maybe Garvin would be willing to include this functionality if there is ever a 1.1.3???? :wink:
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:If Garvin has added the requested anchor class of serendipity_xml_icon to the other plugins, then those plugins should behave exactly as the category icons do now - meaning they are easily replaced using the css I posted on the plugin thread.
Right. I just now downloaded a recent s9y nightly. I'll probably set up a dev blog using that nightly tonight and see if it works.
Owen Stubbs wrote:Problem is, you would not want to include that css NOW as it would work only for categories, and nothing else. Until 1.2 is available, you could embed the styles into the <head> of index.tpl using something like {if $head_version >1.1} (or whatever).
Gee, I'm not sure I want to do that, because if we did, we should probably make the whole thing backwards compatible, which presents an enormous workload in my opinion. As you guys know, I'm lazy as hell, so I'd prefer to to ...
Owen Stubbs wrote:That being said, 1.2 may contain other things that are worth addressing in a 1.2 update of BP, so - perhaps it is best to stick this concept in a drawer for right now and revisit the issue when 1.2 is released.
... use the time we have until 1.2 is ready (probably between 3 and 5 months according to Garvin) for bughunting and checking out other features we might want to cover.

On the other hand I know you guys (including Carl) are probably anxious to get started on doing new, shiny templates using this code. Hohum. I'll get a new work schedule for my day job tonight. If this gives me enough time, I might as well sit down and have a go at making this thing backwards compatible, but I feel we need to make this work with the 1.2 snapshots first. I'll check the turnout with the nightly and report back some time tomorrow :)

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:
Owen Stubbs wrote:
d_cee wrote:Oh and the right sidebar margin in safari seems to be because the right sidebar is floated left.
Betcha that is due to the total width equaling <100% thanks to IE. Can you change the CSS so that sidebars plus center content equal 100% and see what happens? I don't have access to a mac.
That will probably break the layout - although I have to admit I have never tested it in FF or Opera. But it's almost a safe bet that a total of 100% will result in rounding errors which break the layout.
No, it doesn't, at least not in FF2/Linux or Opera 9/Linux. So I've set those to a total of 100% since we already have an ie.css which sets different values for that in IE.

I've uploaded an updated zipfile so Dave can check this out when he returns. This also has Don's corrections for the contact form .tpl files.

YL
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

YellowLed wrote:On the other hand I know you guys (including Carl) are probably anxious to get started on doing new, shiny templates using this code. Hohum.
What makes you think anyone is waiting??? :lol: :lol:
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:What makes you think anyone is waiting??? :lol:
Yeah, right. I should have known, I'm using Debian testing myself :wink:

So, yet another updated zipfile and sandbox.

I remembered Carl using different layout types for 3-column layouts (content-sidebar-sidebar and sidebar-sidebar-content), which I've always liked, so I added those. No news on the xml icon front yet, I haven't managed to get a v1.2 snapshot installed on my local machine. Edit: I forgot: I've also added a third colorset (green) since I figured default plus 3 colorsets would be more likely than default plus 2.

I have also included my TODO.bulletproof text file, so you guys can see what I'm thinking now :)

YL
Don Chambers
Regular
Posts: 3657
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

Reviewed the lastest zip, including your to-do list. In response to this: -
If you change template to 'bulletproof but don't save the style
options and just go straight back to your blog then the paths for the
feed-icons and calendar arrows isn't set.

MM: can't reproduce that in my dev blog, probably because those things
are already stored in the db; need a fresh install to check that
My response is that, if the style options are not saved, then nothing in the template options is saved either (verified). No reason to worry about just the various icons (feed, calendar arrows, graph bar, etc). A user is not going to keep using that template for long without returning to the template options to change SOMETHING... colorset, navlinks, other options, etc. I would consider this matter a non-issue IMHO.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:No news on the xml icon front yet, I haven't managed to get a v1.2 snapshot installed on my local machine.
Boy, I'm being as busy as a bee today :wink:

I finally got that v1.2 snapshot to work (thanks to - guess who? - Garvin) and switched bulletproof to the new code using .serendipity_xml_icon, which works like a treat - if, and only if, the plugins in question are up to date (freetag and my calendar from spartacus, the rest is bundled with s9y).

BTW: I think it's pretty funny how much work and thoughts we spent on this considering how easy the solution finally was :lol:

There's one thing I haven't done yet: Updated the sandbox to v1.2. The template has already been updated, but I need some time to relax now, so I'm gonna updated the sandbox later. However, you can already get the latest zipfile (yes, I do have the old files backed up) and check this out yourselves - remember: latest nightly (see http://board.s9y.org/viewtopic.php?t=9218 if you experience similar login problems with it) and get the latest freetag and my calendar from spartacus!

Phew.

Now, on using this with s9y < 1.2 - I can use it on my local machine, but of course it doesn't switch the feed icons. Other than that, it works. So if anybody can't wait to use this 'til v1.2 is released ...

My todo list has the following issues:
- If you change template to 'bulletproof but don't save the style
options and just go straight back to your blog then the paths for the
feed-icons and calendar arrows isn't set

That one I can't reproduce right now, but I'll check it out with a fresh installation soon. However, I think this is basically PEBKAC (problem exists between keyboard and chair) to be honest ... :twisted:

- the right sidebar margin in safari seems to be because the right
sidebar is floated left

I think we need a word on Dave for that - I have changed the total widths of the columns to 100%, so maybe this is working already?

Other than that, I don't see anything left to do despite check the whole thing for double or unnecessary classes and ids (sounds like a job for Don :wink:), clean up the code a little (I'm trying to do this along the way) and write documentation ...

YL
Post Reply