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

Skinning and designing Serendipity (CSS, HTML, Smarty)
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

d_cee wrote:Image
Very nice. I'll convert this to .png and use it for the next snapshot.

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

Post by yellowled »

yellowled wrote:I'll convert this to .png and use it for the next snapshot.
... which is available already. This one has the button link in the footer, plus I have integrated a nice additonal feature Don has managed to come up with: Users can now choose to display the quicksearch field within the navbar if the navbar is above or below the header.

One thing on the converted button: I seem to see some kind of 'noise' on the left side of the button when using the green colorset ... can somebody confirm this or do I need new glasses? If so, am I too stupid to convert a GIF to PNG correctly or why does this happen?

So, is that finally it? Feature freeze? No bugs left to squeeze? What about those equal heights for the sidebars, Don?

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

Post by Don Chambers »

Like that quicksearch? I thought the sidebar.tpl code was pretty slick. Also liked adding the magnifying glass to both the navbar, and sidebar, versions.

Anyway - I see you also converted the magnifying glass from gif to png. I created both on my end, but deliberately only sent you the gif file. Bottom line: IE6 has issues with the png file that do not exist with the gif file. the gif was also about 1/3 the file size of png, although, that didn't have much to do with it since we are only talking a few hundred bytes.

From a transparency perspective, at least in photoshop 7 (I cannot afford the latest), gif formats allow the image to be saved with a "matte", while png-24 images do not. A matte is used to blend the outside edges to that color within a few pixels of the actual image outline. Gif images can also be saved without a matte, but typically result in rough edges. png-8 format likewise can allow matting.

Chances are, Dave matted his to white, or not at all. So the image looks great on very light backgrounds. The green colorset is dark, so you see the surrounding, matted pixels. I know I matted the magnifying glass to white. You converted the images from gif to png, which is bad for 2 reasons: First, you knock the image clarity down a notch (think photocopy of a photocopy). Second, you inherit the matted pixels.

If we really want these images in png format, they should be saved that way from the originating graphics program. I have the magnifying glass, and can output it to png format (already have). Dave can do the same with the footer image. When I used the png format in my test, IE6 shows it as having a light grey background. FF does not show that, so I assume this is just the IE transparency bug. If I create a png-8, matted to white, with transparency, I do not see this grey background. Bottom line: I have never fully understood all this png stuff and transparency. I have seen plenty of icon packs, in png format, without any matting display just fine in IE6. Maybe it has something to do with photoshop, or maybe graphic designer Dave can chime in here with some pointers.

Onto other matters... I have not looked at the sidebar equal height issue as I have been struggling with the admin stylesheet. The HTML being styled is in pretty bad shape, and I might have to consider a)trying to re-write the entire thing or b)abandoning the effort until such time someone else actually produces MUCH cleaner html or c)continuing to hammer away at what currently exists.

Current fixes needed: style.css has a '+' character as the very first character. Purple is missing a slash as the first character.

Suggestion: the bp image could be contained within a div. Might even want to add a class to the<p> for specific styling, which would let someone add another <p>, but not be affected by any styling we would do to the "powered/template by". We might also want the title text to be a language variable. YL - did you ever find out if there is a global variable for "template by"? If that was abandoned, we could create our own in our language files, unless the words are not likely to change enough to warrant it.

EDIT: Another to-do: create preview_fullsize.jpg and add it to the zipfile.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:Like that quicksearch?
Yup, well done :)

I uploaded another update with all the corrections you mentioned in your last email. EDIT: I have decided not to updated s9y-bp until we have a release zipfile - I don't want to screw up Dave's s9y-bp colorset again :oops:
Don Chambers wrote:Bottom line: IE6 has issues with the png file that do not exist with the gif file.
Bottom line: I don't care. Seriously, this is almost a political matter to me :lol:

As long as web designers continue to "support" IEs bugs, neither users nor developers of IE will really care. Developers won't care to fix those, users won't care to at least upgrade to the rather decent version 7, which as far as I know does not have issues with transparent gifs. I know you're one of those users yourself :wink:, but there are good reasons not to use gif images.
Don Chambers wrote:If we really want these images in png format, they should be saved that way from the originating graphics program. I have the magnifying glass, and can output it to png format (already have). Dave can do the same with the footer image.
Bottom line on my side: I don't have Photoshop and I'm not very good with Gimp. So, both of you please send me those images as png files :)
Don Chambers wrote:Onto other matters... I have not looked at the sidebar equal height issue as I have been struggling with the admin stylesheet.
Okay, I will have a look at it over the weekend. However, it's not too bad if this margin-solution we had doesn't work anymore for whatever reason - there are plenty other techniques to get equal heights columns (sliding faux columns comes to mind).
Don Chambers wrote:Current fixes needed: style.css has a '+' character as the very first character. Purple is missing a slash as the first character.
Both fixed. I also added a different color for hovered links in the footer in the green colorset. Those had the same color like the background color for the footer itself, which means hovered links in the footer 'disappeared'.
Don Chambers wrote:Suggestion: the bp image could be contained within a div. Might even want to add a class to the<p> for specific styling, which would let someone add another <p>, but not be affected by any styling we would do to the "powered/template by".
I changed it this way:

Code: Select all

   <p id="serendipity_credit_line">{$CONST.POWERED_BY} <a href="http://www.s9y.org">s9y</a> – Template by <a href="http://www.chicagoloopcruise.com">Don Chambers</a>, <a href="http://themes.daves.me.uk">David Cummins</a> and <a href="http://www.yellowled.de">Matthias Mees</a>.</p>
   <p id="serendipity_bulletproof_button"><a href="http://s9y-bulletproof.com" title="Based on the s9y bulletproof template framework"><img src="{$serendipityHTTPPath}templates/{$template}/img/bulletproof-button.png" alt="Based on the s9y bulletproof template framework" width="100" height="27" /></a></p>
How about that? Also has the nice side effect that the button is aligned like the line above.
Don Chambers wrote:We might also want the title text to be a language variable. YL - did you ever find out if there is a global variable for "template by"? If that was abandoned, we could create our own in our language files, unless the words are not likely to change enough to warrant it.
a) I think it's a little over the top to have the title text localized.
b) I have no idea whether there's a global variable for "template by", and frankly, I don't think it's necessary. "Template" is pretty universal, and I don't think it's worth the effort just to change the "by"
c) No, we can't to that as I already pointed out in http://board.s9y.org/viewtopic.php?p=58127#58127 (see the EDIT part).
Don Chambers wrote:EDIT: Another to-do: create preview_fullsize.jpg and add it to the zipfile.
I never liked that. As far as I know, there is no way to display this fullsized image within s9y or spartacus (correct me if I'm wrong), plus it will only blow up the template's zipfile.

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

Post by Don Chambers »

Like I said, if I use transparent png-8, it will have the same matting result as a transparent gif. png-24 is perfect - no matting, but looks a bit wierd in ie6. I know you are on a mission to eradicate gif format from the planet, but what exactly are some of these "....good reasons not to use gif images"? :P While I see the point of not really caring about ie6 compatibility from a site OWNER perspective, I'm not entirely sure every potential user of a template would be thrilled with the fact that their ie6 users see less than perfect graphics.

I'm not 100% sure about that <p id="...> solution. Try floating either one of them around. For instance, one of my instincts was to use the image left, and the text right (or vice versa). Getting strange results when I try that, as if they are not included in the overall height of #footer. Maybe just the wrong css... my attempt was only a quickie in Edit-css. Might be #footer too.

Also - the stylesheets still have a class of .bulletproof_button even though you are now using an id of #serendipity_bulletproof_button.

OK on the title text - no language specific variable. However, the preview image is used. In the template select list, clicking on the thumbnail shows the larger preview image. If it does not exist, text appears above reading "No Large Preview". The size of the image most are creating is 785 x 486, and most seem to be only 50-60k in size, so I hardly think that is an issue.

EDIT/ADDITION: the sidebar thing only appears to be an issue with my development version of bp. Several files in there have not been updated to the latest/greatest, so that is probably the problem. The real BP is still showing equal height sidebars.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:I know you are on a mission to eradicate gif format from the planet, but what exactly are some of these "....good reasons not to use gif images"? :P
I've posted URLs before, and I'm pretty positive you know how to google yourself :wink:
Don Chambers wrote:Also - the stylesheets still have a class of .bulletproof_button even though you are now using an id of #serendipity_bulletproof_button.
I'll fix that tomorrow when I'm back at home.
Don Chambers wrote:In the template select list, clicking on the thumbnail shows the larger preview image. If it does not exist, text appears above reading "No Large Preview". The size of the image most are creating is 785 x 486, and most seem to be only 50-60k in size, so I hardly think that is an issue.
I never heard of that before. Interesting. I'll do a larger screenshot tomorrow.
Don Chambers wrote:The real BP is still showing equal height sidebars.
I thought so :)

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

Post by yellowled »

New update: I have fixed the button elements in the colorset stylesheets, changed those p elements in the footer to divs, and added the large preview image. Updated zipfile at the usual URL.

Anything else that needs to be fixed? How's that admin backend styling coming? Don't feel pushed, I'm just curious :)

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

Post by Don Chambers »

Float the button right, and the credit line left. The footer does not expand to the full height of the button in FF. I recall some issue with the footer, which was fixed with an explicit height (1% - which shoud probably have been 100%), but that does not make any difference either. For FF, float: left on the footer works, but makes the footer only as wide as the left sidebar in IE6. So, a solution would be #footer{float: left} in the colorset stylesheet (if one wanted it that way) and float:none !important in the ie6.css (or earlier ie stylesheets if applicable). I just don't like this solution. Maybe it is an issue of the float needing to be cleared. Maybe you can find a better solution?????

Speaking of #footer, in style.css you have #footer {position: relative} near the top of the file, then a few declarations down, you have #footer with some margin, padding and borders. Should combine them, and move them still farther down into the section titled /*** Footer styles ***/ where there is already a #footer p.

I also think the button should come first, then the credit line. Another thing that looks decent is to center them both (button on top), but we need to find out why the footer does not expand to the height of the button as things currently stand, and as mentioned above, I really do not like the bandage approach of floating.

I have a more, or less, operational admin stylesheet. At the moment, it looks like the purple colorset. Need to tweak some font settings, then the idea was to scrap purple, and make it more neutral. However, the admin HTML, if you are following the "styling the backend" thread, is a nightmare. I might shift gears again and see if I can help Garvin in some way to clean up as much of that as possible so styling the admin area is easier, and cleaner.

A note for Dave - the button's "s9y template framework" is nearly unreadable, and I have a 19" LCD monitor! Perhaps "serendipity framework"? "serendipity template"? I don't think it has to be identical to the large logo at s9y-bp, but expanding the "s9y" to "serendipity" and dropping either "template" or "framework" ONLY from this button, might make it a bit more legible.

Also what do you think about going with "template by team bulletproof" (or something like that) in the credit line and info.txt, and deal with individual names on s9y-bp, inclusive of contributors? If we leave as is, and others leave it in tact, it certainly helps with google page rank! On the other hand, there are other contributors, and having it all on s9y-bp means there is only one location to update any info (such as one of our homepages) should it change. That is - for as long as s9y-bp exists. Anyway, I'm just throwing the idea out there.
=Don=
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking »

Hi!

Just dropping by because of some keyword (my name, essentially ;) )
A note for Dave - the button's "s9y template framework" is nearly unreadable, and I have a 19" LCD monitor! Perhaps "serendipity framework"? "serendipity template"? I don't think it has to be identical to the large logo at s9y-bp, but expanding the "s9y" to "serendipity" and dropping either "template" or "framework" ONLY from this button, might make it a bit more legible.
It should better read "s9y template" in that case. "s9y framework" would lead to the impression that "bulletproof serendipity" is an own serendipity version that focusses at security details, and not related to any template or design matters!

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:I just don't like this solution. Maybe it is an issue of the float needing to be cleared. Maybe you can find a better solution?????
Not right now. I had to set up my workstation from scratch (yes, I do have backups, don't panic :wink:), so I currently don't have a development system. Or time to set one up, for that matter :) I guess I'll be back up and running on Thursday at the latest. I'll see what I can do then.
Don Chambers wrote:I also think the button should come first, then the credit line.
You're probably right on that.
Don Chambers wrote:However, the admin HTML, if you are following the "styling the backend" thread, is a nightmare.
I'm not. Sounds awful, however.
Don Chambers wrote:Also what do you think about going with "template by team bulletproof" (or something like that) in the credit line and info.txt, and deal with individual names on s9y-bp, inclusive of contributors?
I suppose I'd be okay with that. Saves a lot of space in various places :)

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

Post by Don Chambers »

Bummer on the dev station. Actually, I have had so many unexplained XAMPP issues, I would love to fully uninstall it, and start over. Now is not a good time to do that though!!! 8)

Hope you get it resolved asap.

I agree with Garvin's suggestion above.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Don Chambers wrote:Now is not a good time to do that though!!! 8)

Hope you get it resolved asap.
It's really no big deal, just needs some time. Basically, I'm just one emacs install away from being able to add the latest fixes and one apache/mysql/php install away from having a dev blog again :)

YL
d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee »

Hi guys

I see you've been keeping busy - working too hard in the case of YL's dev station!

I've not had much time as you might imagine but I've been keeping up at least :-(

I've a couple of revised buttons you can choose from

Image
Image

they're png 24 files.

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

Post by yellowled »

d_cee wrote:I see you've been keeping busy - working too hard in the case of YL's dev station!
Enough with the pity, I'm almost up and running again :)
d_cee wrote:I've a couple of revised buttons you can choose from
I've picked the second one since I figured it would suit Garvin's call better.

So although I still don't have my LAMP system on my local machine, I've managed to add that and the last fex fixes Don mentioned into an updated zipfile. Don, I still need an updated png from you (can't remember which one, but I think it was something related to the quicksearch).

I suppose we're not going to change or add anything to the language files, so this might be a good time to post a call for translations to this forum, right? I'll do that tomorrow morning. (Too tired now.)

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

Post by Don Chambers »

I'm moving slow today. Yesterday was July 4th/Independence Day here in the states. Following ungodly amounts of food, drinks and fireworks, my head is pounding and my gut is in knots!!! I'm getting too old for this! hehehe

Anyway, suggestion for the button Dave - can you give "serendipity template" a try? I think a lot of people use this app for a long time before they ever understand "s9y", if at all. We can still go back to it if it turns out to be the preferred version, just thought I would recommend it. Also - can you email me a PSD? Just like to file it away with the full size logo you sent me.

@YL - I will email you a png of the quicksearch image. Despite the issues with IE6, I guess we will just switch to PNG.

I cannot think of any further changes to the language files, so now would be just fine for translations. Maybe I should do a "hung over" version of the english file.... instead of simple yes and no answers, I would add a third choice that says "I don't give a shit... give me another asprin"!!!! :lol: :lol: :lol:

I'm still banging away at the admin thing. It is not going well from a table-less perspective, but I have come up with some new id's & classes and will be suggesting those to Garvin as soon as I can.
=Don=
Post Reply