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

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

Post by yellowled »

Yet another update :)

I finally found the time to take a look at the new contact form plugin, so we have a new zipfile which includes the plugin_dynamicform.tpl ported to my tableless contact form code from the yl15 template. I don't want to install a contact form in the sandbox, but since you guys have your own dev blogs the sandbox is pretty pointless anyway :wink:

I still haven't found the time to have a closer look at the URL Dave posted some days ago (the other contact form code), so if someone else would like to volunteer for porting that one, go right ahead :)

Dave, I've also had a closer look at the calendar and ran into some problems - there was a small typo in the table element ("class="), and the colgroup elements must not be used in a tr. I'm not sure what the colgroup elements were meant to do, so I removed them for the time being. I also edited it to make #today the footer of the table, which is probably nicer in terms of accessibility and looks pretty much the same :) Oh, and I switched the calendar to use the png images from the default template, simply because I like them better :)

So now I'll probably take a look at the style.css and clean it out a little. Do we need to/want to include any more theme options or template files?

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

Post by d_cee »

Hi YL

I'll take a look a the contact form code over the next couple of days and see what i come up with.
I'm not sure what the colgroup elements were meant to do, so I removed them for the time being
These were a later addition to the calendar code. Having re-read the accessability guidlines this evening I realise I shouldn't have messed with the code at all as they didn't belong there as you pointed out :oops: . I had thought to run the code by a guy I know who sits on one of the web accessability committees when it's complete before releasing the template, just to make sure we'd complied with all the accessability guidelines. I planned to do a bit more to it myself to make it look the same (or similar at least) in all browsers - and make sure it validates. You seem to have done the validation so I'll download your code again later. Have you updated the zip again?

Abdussamad's suggestion of a unified approach to template options is a good one and, to some extent, it's what the template config does now for v1.1 but I think it's impossible to make identical options for all themes. But if we ensured that themes used the same classes and ids for header, content, footer etc. etc. it would make it easier for users to edit templates whether they used a plugin (developed by abdussamad :-)) or edited the code directly. This could make ports more difficult though. I do however like the idea of a 'config.inc.php' that only has to be set once and would apply no matter which template you have selected.

We do now really need Garvin's input but I'm sure this thread is too long for Garvin to start reading now so it would probably be useful to send him a list of the points that we need his input on.

cheers

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

Post by yellowled »

d_cee wrote:You seem to have done the validation so I'll download your code again later. Have you updated the zip again?
Well, I used tidy, a little command line tool which cleans up HTML code - it's not a validator, but still very helpful :) Actually, those error messages were just warnings, no "real" errors - but I figured in a minefield like accessibility ... so, yes, the zipfile has been updated, it already includes my "cleaned" version of the plugin_calendar.tpl.

So, let's run the W3 validator for the sandbox - "This Page Is Valid XHTML 1.0 Transitional!" (Index page) :) The CSS also validates.

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

Post by d_cee »

Hi YL

I was doing a little work on a css only contact form last night and downloaded your latest zip to try some code out. Unfortunately the zip is corrupt :-( Could you mail me a new zip or post a new one. Ta.

cheers

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

Post by yellowled »

d_cee wrote:Unfortunately the zip is corrupt :-( Could you mail me a new zip or post a new one.
Hrmpf. Weird. I can't seem to produce a non-corrupt zipfile at the moment, no idea why. I've uploaded a gzipped tarball (.tar.gz) which should be okay. Hope you guys can unpack that one as well, at least I remember Garvin mentioning some Windows freeware able to do that (7zip?). MacOSX should be able to handle those as well, I guess ..?

Sorry about that, I have no idea why this happens :?

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

Post by d_cee »

Thanks YL

that one was fine :-)

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

Post by yellowled »

I might need to take some time off on this particular project, I've just updated my workstation to a newer Debian version, so it might take some time to have my usual dev environment. Don't worry, though - this was planned :)

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

Post by yellowled »

YellowLed wrote:I might need to take some time off on this particular project
Okay, all set to continue :) I haven't heard from Carl for some time, which he sort of announced, so we're on our own for the time being. If anybody else is willing to chime in on this, you're of course welcome to join us.

So Dave, I suppose you're still working on that contact form code - take your time. What I'd like to discuss is: What else do we need? At the time of writing, the template includes:

- commentform.tpl
- content.tpl
- entries.tpl
- plugin_calendar.tpl
- preview_iframe.tpl
- commentpopup.tpl
- entries_archives.tpl
- plugin_contactform.tpl (to be revised by Dave)
- config.inc.php
- entries_summary.tpl
- index.tpl
- plugin_dynamicform.tpl

plus some images (calendar images, xml icon, and graph bar) and the necessary language files in German and English.

I don't think we need anything else - there are a lot more plugins which do have .tpl files, but I don't think it's necessary to have them in this vanilla template since the customizations which could be done by using those are not very generic, i.e. someone who wants to customize those will have to do it themselves. Of course, I'm a very lazy person and can't wait to finish this, so feel free to voice a different opinion (i.e. kick my lazy ass :wink:).

Something I'm still mulling about is whether to roll out the basic styles needed to keep the layout intact, i.e. put them into a file called basecode.css which will be @imported into style.css. I think it's less likely people customizing this will overwrite those basic style, but I might be wrong :) What do you think?

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

Post by d_cee »

Hi YL

you're back up and running again I guess:-)
I've been a bit busy with my day job myself these past few days.
So Dave, I suppose you're still working on that contact form code
Actually I've undone all your very tidy definition list work in the comment form as well as trying to make the contact form work beautifully without tables. Close but no cigar at the moment. The more I've done the more I've appreciated the excellent code that Jeff Howden wrote for his forms. I'll try to have a 'finished' version for you to take a look at after the weekend

In addition to the list of .tpl files you mention, I think it would probably be a good idea to include plugin_staticpage.tpl.

Your idea of separating the base styles for the template into a separate files is a good one I think. It could contain all the styling elements that we don't really want users to change and the style.css file could be all the editable styles.

Whilst I've been working on the form I've changed the body font size to 62.5% just to make em sizing simple (ie. 1em =10pt). It may be worth setting this (or 75% where 1em =12pt) for the template.

You could take a look at these images for nice calendar graphics (and other icons) and maybe the xml.gif could be the default orange 'feed icon'.

catch you later - I'd better get on with some work :-)

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

Post by yellowled »

Hi Dave,
d_cee wrote:Close but no cigar at the moment. The more I've done the more I've appreciated the excellent code that Jeff Howden wrote for his forms. I'll try to have a 'finished' version for you to take a look at after the weekend
Great, don't hurry yourself too much.
d_cee wrote:In addition to the list of .tpl files you mention, I think it would probably be a good idea to include plugin_staticpage.tpl.
I'll take a look at that tonight.

Edit: Dave, I don't see why we would want to include that one. Plus, if we do so, shouldn't we include the other .tpl files for the staticpages plugin as well?
d_cee wrote:It could contain all the styling elements that we don't really want users to change and the style.css file could be all the editable styles.
Of course this doesn't really keep users from editing the basecode.css, neither does it keep users from overwriting styles from basecode.css in style.css - but in those cases we're not "responsible" for errors :wink:
d_cee wrote:Whilst I've been working on the form I've changed the body font size to 62.5% just to make em sizing simple (ie. 1em =10pt). It may be worth setting this (or 75% where 1em =12pt) for the template.
Hm, I usually keep the body font size at 100.01% to prevent errors in, uhm, was it Opera? But, hey, we have a wrapper div, so we can set it for that one :)
d_cee wrote:You could take a look at these images for nice calendar graphics (and other icons) and maybe the xml.gif could be the default orange 'feed icon'.

catch you later - I'd better get on with some work :-)
Yeah, me too, so I'll have a look at those later, too :)

Edit: Very nice icons, I actually have difficulties to choose an arrow icon 'cause they're all great :) However, the xml.gif already is the 12x12 orange feed icon ..? Did you mean another one?

Edit #2: I updated the template zip, hope it isn't broken this time ... I removed that contact form stuff, splitted the css files, added a nasty IE <= 6 fix Robert Lender reported, and added new calendar icons.

YL
Last edited by yellowled on Fri Feb 16, 2007 1:41 pm, edited 2 times in total.
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

You guys are just too happy in this little corner of yours, so I thought I would complicate the discussion.

There is another thread about adaptive design. That subject has been on my mind for along time. I have had concerns about graphics, page load speeds, flexibility, etc.

So, I went searching for code examples and came up with some rough ideas for s9y. These are very preliminary, and need a lot of work, but I have some things working fairly well. There is much to do css-wise as I started with Carl's s9y 3.0 theme, however, these should give you some ideas.

The code is DIVs - No table! The layout is percentage based - everything shrinks or stretches to the user's display width. The graphics COMBINED are under 6k as they are being repeated x or y as needed (not full width!). Banner features a left, center, and right component. Sidebars have 9 parts (divide a square into 3 rows and 3 columns - you get the idea). Much to do before this becomes an s9y theme, but I wanted to get this stuff into this particular discussion.

The first concern of mine is whether or not you real designers and programers want this sort of design for s9y??? If so, I need to overcome some naming conventions. I don't just have a #serendipity_banner - I have 3 components already, and this will increase when I get to a logo, and possibly ad banner component.

I do not have a #mainpane, my mainpane is considerably more complicated due the the DIVs.

Same goes for sidebars - not just a title, or item, etc.... each "item" has a top left, top center, top right, middle left, middle-center, middle right, bottom left, bottom center, and bottom right.

All this needs styling, which I have done in my "alpha test"... but if you guys think it deserves it, then this stuff needs a naming convention.

Anyway, here are some screen shots. http://chicagoloopcruise.com/library/s9 ... t-1280.jpg 1280 and http://chicagoloopcruise.com/library/s9 ... t-1024.jpg 1024. Works below these too, but I thought these were the 2 most popular screen resolutions for now. Notice how graphics are not broken, sidebars and content re-size, and things like the s9y logo are centered - and stay centered - regardless of screen size. Those doing graphics will love the separation of content, from top - bottom - left -right borders (Dave - think how much more efficient your "canvas" theme would be with this).

Anyway, you guys are considerably more talented than I, and I certainly do not want to intrude on your discussion. Let me know if I should dismiss these ideas or how best to proceed.

Where the hell is Carl? His RV break down? :P
=Don=
Rodnox
Regular
Posts: 75
Joined: Thu Jan 18, 2007 2:09 am
Location: Ennis Co. Clare, Ireland
Contact:

Post by Rodnox »

I just tryed to read the whole Thread but honestly, i didnt. So there is a Chance that everything what i write has already come to your guys attention.

Im Using Serendipity as a kind a websiteCMS. Sure,, the blogspecific functions are still there, but with the "Category Startpage" Plugin, the Forum, the website and the Userlogin i managed to let the whole Blog look like a Website.

Appart from the fact that this discussion is only about the Themes, somebody might consider to turn s9y more into the AdminCMS direction insteed keeping the Blogbase. Get inspired by Drupal and typo3.

But thats not the Topic.
In the second Posting somebody mentiond about "babythemes" and "Weddingthemes". Thats the direction that i would like to see things going in.
Thinking about private persons, running a small buissnes and they need a Them which fits to theyre workingplace. For a guy with a Record Shop there is the Earphone Theme, fine. But he would certainly also go for a "CD Theme" and the CD displayd, can be changed to a customized one.

Just think about buisneses and youll have some ideas.
Flowers .... someone might have a flower delivery service and would like to have a friedndly looking, colorfull theme with flowers and greens.

Pizzaservice .... get a pizza theme ready. One with Tomatoes, peppers and salami. Get a Orderform done. Let the Admin choose how many input fields and what are they for! Lets send it to an emailaccount and make sure, they could actualy use it.

Sportsbar .... get a Theme with bowlingpins, snookerballs an other stuff like this. Get a Plugin done wich provides a customized table for any kind of sport. Even just for Funstuff like Sportsbettings. Need an Adminside input like "Poits to be added" , "goals/scores" and "Extra/bonus". At the End there is a Table shown wich calculates the points added to the points already placed, calculates the current place in the table and what ever.

And even more important .... i`m still looking for a "thing" which shows a Map of Europe/other Continents (Maybe the whole Wold) and it shows a lot of dots. and every dot is for a users home.
In the individual profile setup there would be an Input to be done: Location : "town" , "Country" and maybe "Zip-code".
So if a User logs in, he has the map in front of him, on the side a little statistik info bar, which tells him, wich user lives near to him, how many users are from the same country and bla bla bla.

Now. I Know, all those Ideas are more like a general Plugin wich list. But for alle those plugi you`ll need a customized outfit.
Hope it gives a couple of ideas.
Greez
Rod
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Owen Stubbs wrote:The code is DIVs - No table!
So is ours.
Owen Stubbs wrote:The layout is percentage based - everything shrinks or stretches to the user's display width.
Same here, as far as it makes sense.
Owen Stubbs wrote:The graphics COMBINED are under 6k as they are being repeated x or y as needed (not full width!). Banner features a left, center, and right component. Sidebars have 9 parts (divide a square into 3 rows and 3 columns - you get the idea).
Well, first of all, you're of course welcome to chime in. However, I can't really tell much from those screenshots, I need to see code :) So it would be great if you could zip what you have and provide a download or point us to an URL where we can see it "in action".

Anyway - it does look great, but not exactly what we're trying to do here. You're virtually "one step further". We're trying to provide a bulletproof base code for us and other template designers to use for new templates.

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

Post by d_cee »

Hi

I think YL and myself must have read this at the same time so I won't go over the same things.

Your theme looks really good Don (oops) - and the extra divs etc that you're putting in will certainly make it easier to make graphical templates like 'Canvas' or 'Splat!' etc. so you should certainly continue with your development work.

I also agree with a lot of what you say Rod about the kind of templates that users would find useful. I feel sure that when we've finished our work on this template - and Owen Stubbs' template is complete - almost anybody should be able to produce good solid themes and templates for Serendipity.

As for plugins - some of us have tried before to get coders and designers to work together. Sometimes it happens sometimes not, but I'm sure it will over time. I'm keen to have a go at writing a plugin myself but I also have to make a living and I just don't have enough time to wade through everything I need to know, wish I did :-( But if some kind Serendipity user with the necessary skills would like to walk me through the process... :-)

cheers

Dave
Last edited by d_cee on Fri Feb 16, 2007 4:43 pm, edited 1 time in total.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Sorry to tear this thread apart a little, but my schedule for today has changed unexpectedly, so I have some time to get some s9y-related work done :)
d_cee wrote:Close but no cigar at the moment. The more I've done the more I've appreciated the excellent code that Jeff Howden wrote for his forms. I'll try to have a 'finished' version for you to take a look at after the weekend
BTW, what do we do about the comment form? Use Jeff's code too? I could do that for the comment form once you're done with the contact form, but I guess I'm gonna need those contact form .tpl files as a blueprint.
YellowLed wrote: Edit: Dave, I don't see why we would want to include that one. Plus, if we do so, shouldn't we include the other .tpl files for the staticpages plugin as well?
Okay, after taking a second look at it, I do. I've included them in yet another updated zipfile, free of tables and with a nice little fix for that meta info box at the very bottom.
d_cee wrote:Whilst I've been working on the form I've changed the body font size to 62.5% just to make em sizing simple (ie. 1em =10pt). It may be worth setting this (or 75% where 1em =12pt) for the template.
That one's set to 75% for #wrapper now, basically because 62.5% looks very tiny in my browser :)
YellowLed wrote:Edit: Very nice icons, I actually have difficulties to choose an arrow icon 'cause they're all great :) However, the xml.gif already is the 12x12 orange feed icon ..? Did you mean another one?
Still not sure about that feed icon, but I have chosen new arrow icons and used all of my little graphics ability to convert them into usable icons for the template :) See the updated zipfile and/or sandbox for details.

YL
Post Reply