XHTML and CSS Patch submitted

4 views
Skip to first unread message

Graham Scott

unread,
Apr 21, 2009, 4:06:58 PM4/21/09
to sutekishop
Hi all

I've submitted a patch to improve the xhtml and css on the site. It's
up at http://groups.google.com/group/sutekishop/web/XHTMLCSS.patch

Highlights:

* All pages are now valid xhtml!
* The style is much simpler and less opinionated, so although it's a
starting point, it's quite a blank canvas
* Admin css and menu is now encapsulated in admin.css and admin.master
* I've added a admin view that just contains the admin menu for easy
access.

I've made some effort for Ie6 compliance, and will make it tight in
IE6 if you think it's worth it.

I've spent a considerable amount of time on this patch, and
unfortunately it's pretty big, but I can;t see how it could be broken
down any more.

Please let me know if you'd like more revisions to it.

Cheers

Graham

Mike Hadlow

unread,
Apr 21, 2009, 4:51:51 PM4/21/09
to sutek...@googlegroups.com
Thanks Graham,

Can't wait to check it out. Hopefully this weekend... yes I know...

Mike

Jeremy Skinner

unread,
Apr 25, 2009, 7:14:09 AM4/25/09
to sutek...@googlegroups.com
Please let me know when you plan to apply this as it'll have a significant impact on the branch I'm working on.

Thanks

Jeremy

2009/4/21 Mike Hadlow <mikeh...@googlemail.com>

Mike Hadlow

unread,
Apr 25, 2009, 8:26:53 AM4/25/09
to sutek...@googlegroups.com
would it be easier for you to apply to your branch and then merge it in with the JtG enhancements?

Jeremy Skinner

unread,
Apr 25, 2009, 8:32:33 AM4/25/09
to sutek...@googlegroups.com
It may well be actually - I'll give it a go and see what crops up.

2009/4/25 Mike Hadlow <mikeh...@googlemail.com>

Mike Hadlow

unread,
Apr 25, 2009, 2:51:52 PM4/25/09
to sutek...@googlegroups.com
OK, I'll leave it with you to look at.

Jeremy Skinner

unread,
Apr 26, 2009, 8:26:06 AM4/26/09
to sutek...@googlegroups.com
I was just going to start taking a look at this, but when I try and download the file Google Groups gives me an error: ' The page you navigated to does not exist.' Does this happen for anyone else?

2009/4/25 Mike Hadlow <mikeh...@googlemail.com>

Graham Scott

unread,
Apr 26, 2009, 2:36:58 PM4/26/09
to sutekishop
Hmm it's not working for me either. I'll reupload later on tonight.

On Apr 26, 1:26 pm, Jeremy Skinner <jer...@jeremyskinner.co.uk> wrote:
> I was just going to start taking a look at this, but when I try and download
> the file Google Groups gives me an error: ' The page you navigated to does
> not exist.' Does this happen for anyone else?
> 2009/4/25 Mike Hadlow <mikehad...@googlemail.com>
>
> > OK, I'll leave it with you to look at.
>
> > On Sat, Apr 25, 2009 at 1:32 PM, Jeremy Skinner <
> > jer...@jeremyskinner.co.uk> wrote:
>
> >> It may well be actually - I'll give it a go and see what crops up.
>
> >> 2009/4/25 Mike Hadlow <mikehad...@googlemail.com>
>
> >> would it be easier for you to apply to your branch and then merge it in
> >>> with the JtG enhancements?
>
> >>> On Sat, Apr 25, 2009 at 12:14 PM, Jeremy Skinner <
> >>> jer...@jeremyskinner.co.uk> wrote:
>
> >>>> Please let me know when you plan to apply this as it'll have a
> >>>> significant impact on the branch I'm working on.
> >>>> Thanks
>
> >>>> Jeremy
>
> >>>> 2009/4/21 Mike Hadlow <mikehad...@googlemail.com>
>
> >>>> Thanks Graham,
>
> >>>>> Can't wait to check it out. Hopefully this weekend... yes I know...
>
> >>>>> Mike
>
> >>>>> On Tue, Apr 21, 2009 at 9:06 PM, Graham Scott <gho...@gmail.com>wrote:
>
> >>>>>> Hi all
>
> >>>>>> I've submitted a patch to improve the xhtml and css on the site. It's
> >>>>>> up athttp://groups.google.com/group/sutekishop/web/XHTMLCSS.patch

Graham Scott

unread,
Apr 26, 2009, 3:52:55 PM4/26/09
to sutekishop
Still no luck uploading to this group - I've emailed the patch to you
at your blog addresses.

Drop me a line via if you don't receieve the patch

Jeremy Skinner

unread,
Apr 26, 2009, 4:01:59 PM4/26/09
to sutek...@googlegroups.com
Excellent, thanks. 

2009/4/26 Graham Scott <gho...@gmail.com>

Graham Scott

unread,
Apr 27, 2009, 1:32:33 PM4/27/09
to sutekishop
Hi Jeremy

I thought I'd check in and see how it's going with the css changes -
if you need any modifications please let me know!

Cheers

Graham

Jeremy Skinner

unread,
Apr 27, 2009, 2:02:55 PM4/27/09
to sutek...@googlegroups.com
I haven't done anything yet - I was planning on making a start tonight or tomorrow. I'll let you know if I run into any problems.

Jeremy

2009/4/27 Graham Scott <gho...@gmail.com>

Jeremy Skinner

unread,
Apr 27, 2009, 4:14:48 PM4/27/09
to sutek...@googlegroups.com
I've started working on this and it looks like it's going to be quite a big job as the codebase has changed a fair bit in some places since the patch was created. However, I have made good progress. So far I've noticed a few things...

The patch references several images which don't exist (Nopic-large.jpg, logo.png, bg-header.png and possibly others?). Feel free to email these to me directly.

Is there any particular reason that the images have changed in size from 300x100 to 500x175? This will have an impact on the production site as it already has images generated. 

Maybe I'm missing something, but SubCategories don't appear to display correctly (in the left-hand menu). There seems to be a huge gap between the category and its subcategories (tried in both FF and IE8). 

As the look of the site is fairly different from the existing version, I'm not sure what implications this will have for the JtG site. Mike, could you comment on this?

I notice that you converted part of the Checkout page to use FluentHtml. I had avoided doing this because it also requires rewriting the OrderBinder. I think it might be best to revert this change and focus just on the html/css for now - this task is already big enough as it is ;) I can take a look at refactoring this properly another time. 

Thanks for the hard work!

Jeremy

2009/4/27 Jeremy Skinner <jer...@jeremyskinner.co.uk>

Mike Hadlow

unread,
Apr 27, 2009, 4:45:08 PM4/27/09
to sutek...@googlegroups.com
Are you talking about the product images? The size should be 'native' and driven by the Windsor ImageService configuration not by the css IMHO.

I thought the idea of the patch was to separate out the structural and design elements of the css. I was assuming that it wouldn't make any difference to the way that the trunk renders. Will I have to extensively revisit the JtG css after this is merged into the trunk?

I'm concious that the design story for Suteki Shop is particularly poor. We need to make it as easy for designers to skin as possible, but what the best way of doing that is, I'm not at all sure. Any ideas?

Sorry if I seem like I'm pouring cold water on it. I think it's a very nice idea to factor the css better.

Mike

Jeremy Skinner

unread,
Apr 27, 2009, 4:58:21 PM4/27/09
to sutek...@googlegroups.com
> Are you talking about the product images? The size should be 'native' and driven by the Windsor ImageService configuration not by the css IMHO.

Sorry - I wasn't clear. Yes, I do mean the product images - the patch included a change to the image size in windsor.config. Not sure if this would be a problem.

> I thought the idea of the patch was to separate out the structural and design elements of the css. 
> I was assuming that it wouldn't make any difference to the way that the trunk renders. 
> Will I have to extensively revisit the JtG css after this is merged into the trunk?

The patch does indeed separate out the structure and design a lot more but also changes the look of the site. It is a very clean and lightweight look that should be a lot easier to skin. There are changes to the markup too so the JtG css would need revisiting. I haven't even begun to look at what changes would be involved yet. 

> We need to make it as easy for designers to skin as possible, but what the best way of doing that is, I'm not at all sure. Any ideas?

The new theme should make this a lot easier, but as you say, the downside is that the existing JtG css will probably need some work. 

Jeremy

2009/4/27 Mike Hadlow <mikeh...@googlemail.com>

Mike Hadlow

unread,
Apr 27, 2009, 5:15:37 PM4/27/09
to sutek...@googlegroups.com
OK, so the image size is just the existing configuration. It doesn't really matter what the numbers are in the trunk. I guess whatever gives the best 'out of the box' experience.

I don't have any problem with having to visit the JtG css if it's for the greater good :)

Looking forward to seeing it.

Mike

Graham Scott

unread,
Apr 27, 2009, 5:36:36 PM4/27/09
to sutekishop
Hi guys

I should have checked this thread earlier! Anyway, hope this helps:

- Image Size: I left the size in at 500px in Windsor so that, if you
wished, you could see the site as I had been building it for a
separate project. I'm not 100% sure how my css will cope with smaller
images - it'll probably just mean that there's a big gutter between
text and the main site image.

- Missing Images: I've not included these as the css and markup
supplied in the patch is from a project I am working on and these are
all branded assets - I could make some placeholder images? Let me
know, it's no problem at all.

- Subcategories. DOH! I hadn't considered this functionality. If this
is a showstopper let me know. I think we'll be able to make a good
solution using jQuery to open up submenus on parent click and in a way
that degrades well. Perhaps I can have access to download the branch
where this is being applied? Then I can take a look and work
concurrently with you.

- JtG: Sadly the JtG site will need some work. This was unavoidable as
far as I can see, as I wanted to change the markup for xhtml
validation and for a more minimal design that would be easier to
manipulate.

- FluentHtml: Sorry, this wasn't meant to be left in - one of the
dangers of making a massive patch and submitting it late at night...

I know this is a big job so let me know wherever I can help out. I
think it'll be a valuable asset to the project overall though, as I
suspect that the trunk version is pretty intimidating to people
starting out.

Cheers

Graham
> > 2009/4/27 Mike Hadlow <mikehad...@googlemail.com>

Jeremy Skinner

unread,
Apr 28, 2009, 3:24:36 AM4/28/09
to sutek...@googlegroups.com
> I could make some placeholder images?

Some placeholder images would be great. This is what it looks like at the moment: http://www.jeremyskinner.co.uk/files/sutekishop.png

> Subcategories [...] If this is a showstopper let me know

It really doesn't look good at the moment. The existing solution uses flyout menus which works well you can have infinitely nested subcategories, so the menu will keep expanding across the screen. It would be great if you could look at implementing something similar with the new stylesheet.


> Perhaps I can have access to download the branch where this is being applied?

The branch is at http://sutekishop.googlecode.com/svn/branches/JtG_Enhancements although I haven't committed any of the CSS changes yet - I'll try and commit them tonight. Also be aware that there are database changes required for this branch (the change scripts are under the Database folder and prefixed with the order in which they need to be run).

Graham Scott

unread,
Apr 28, 2009, 1:48:13 PM4/28/09
to sutekishop
Hi Jeremy

I'll get some image assets over to you at some point this evening.

I'm not sure of the best way to approach infinite-level menus in a way
that gracefully degrades.

One option would be to degrade down to a flat menu, and on an item
click post back with the direct children of the selected item showing.
This would not work for grandchildren though - the menu would be too
complex.

It's my opinion that this isn't a huge issue - if we progressively
enhance the page so that by default all children of a given category
are displayed, but we change the form action with Javascript to only
show the current category (and use the dynamic menus) then we have an
accessible solution.

What are your thoughts? This isn't exactly trivial, but I don't mind
coding it up if we're all in agreement.

Graham

On Apr 28, 8:24 am, Jeremy Skinner <jer...@jeremyskinner.co.uk> wrote:
> > I could make some placeholder images?
>
> Some placeholder images would be great. This is what it looks like at the
> moment:http://www.jeremyskinner.co.uk/files/sutekishop.png
>
> > Subcategories [...] If this is a showstopper let me know
>
> It really doesn't look good at the moment. The existing solution uses flyout
> menus which works well you can have infinitely nested subcategories, so the
> menu will keep expanding across the screen. It would be great if you could
> look at implementing something similar with the new stylesheet.
>
> > Perhaps I can have access to download the branch where this is being
>
> applied?
>
> The branch is athttp://sutekishop.googlecode.com/svn/branches/JtG_Enhancementsalthough I
> ...
>
> read more »

Jeremy Skinner

unread,
Apr 29, 2009, 3:05:25 AM4/29/09
to sutek...@googlegroups.com
I'm having trouble visualising this - I think I'd need to see a sample before deciding whether I liked this or not.

Jeremy

2009/4/28 Graham Scott <gho...@gmail.com>

Jeremy Skinner

unread,
Apr 29, 2009, 2:44:36 PM4/29/09
to sutek...@googlegroups.com
Right, I've committed the changes into the JtG_Enhancements branch. As there are a lot of changes, it'd be great if someone could just double check all the pages incase I've missed something.

Some more issues I've noticed:

I notice that the CMS pages seem to be misaligned (eg http://www.jeremyskinner.co.uk/files/sutekishop.png). There's a gap on the left for products, but products aren't displayed on the CMS pages.

On the Order/Item page if an Order does not have part of the address filled in (eg Address 2 or Address 3) then the address properly and various lines of the address get merged together. Also, the card details appear to be formatted incorrectly.

The label for the 'Would you like to be emailed with our newsletter' checkbox on the Checkout page is squashed.

It would be great if you could take a look at some of these.

Thanks

Jeremy

2009/4/29 Jeremy Skinner <jer...@jeremyskinner.co.uk>

Graham Scott

unread,
Apr 29, 2009, 4:18:43 PM4/29/09
to sutekishop
Hi Jeremy

I'll have a look at the above issues - I've not got a massive amount
of time over the next day or two, with a big site launch coming up so
I apologize in advance if it's a bit quiet.

Cheers

Graham

On Apr 29, 7:44 pm, Jeremy Skinner <jer...@jeremyskinner.co.uk> wrote:
> Right, I've committed the changes into the JtG_Enhancements branch. As there
> are a lot of changes, it'd be great if someone could just double check all
> the pages incase I've missed something.
>
> Some more issues I've noticed:
>
> I notice that the CMS pages seem to be misaligned (eghttp://www.jeremyskinner.co.uk/files/sutekishop.png). There's a gap on the
> ...
>
> read more »

Jeremy Skinner

unread,
Apr 29, 2009, 4:24:03 PM4/29/09
to sutek...@googlegroups.com
Not a problem - I've got other things I can be working on in the mean
time.

Sent from my iPhone

Graham Scott

unread,
Apr 29, 2009, 5:55:20 PM4/29/09
to sutekishop
Hi

I've emailed you both a patch with the following fixes:

- CMS pages are now 100% width
- Admin menu now looks a lot better (more minimal)
- Cleaned up the order page
- Lots of little css tweaks to help pretty things up

Cheers

Graham
> ...
>
> read more »

Jeremy Skinner

unread,
May 1, 2009, 1:36:10 PM5/1/09
to sutek...@googlegroups.com
Just applied it. This is really starting to look good!

2009/4/29 Graham Scott <gho...@gmail.com>

Mike Hadlow

unread,
May 1, 2009, 4:49:33 PM5/1/09
to sutek...@googlegroups.com
Excellent, really looking forward to seeing it.

Brent Hoover

unread,
May 8, 2009, 11:04:36 AM5/8/09
to sutekishop
I have both trunk and Jeremy's branch, but I just took Jeremy's branch
en mass because I was having difficult merging the branch back in
myself. You can see this pull/build/launch version at http://shop.keystoachievement.org.
You can still login with the stock admin login if you wanted to poke
around what little is inside and see the product input issues.

Very nice work Jeremy, I think this is already an impressive project.
I think the compromise between Based on just looking at the code it
looks like it's very "skinnable". Since I will "skinning" it this
weekend from a .psd hopefully I can come up with concrete suggestions
in terms of the easiest way to do this and to make this user
configurable with a common format.

Since I have not been able to input any productss without crashing the
app I have not see the shopping cart functionality, but I am working
on Payment/Shipment gateways, just have to climb the learning curve on
Windsor, which I have been meaning to do for a year. I want to add UPS
(main US carrier), Paypal, Amazon Payments (the "merchantless"
gatways) and PayFlowPro. Those may already be there, when I can get to
the shopping then I will have a better idea). The whole Postal Bands
and Postal Zones means nothing to us in the US so I don't know if we
want to make the UK Postal Carrier one option and I can add UPS and
others as other options.

Looking again at MEF (not as a theory but as code) it seems very not
ready for prime time, and if I added the items I have on my personal
TODO that would satisfy 90% of US users. And the architecture lends
itself to extension as it is, just not as simple, but still pretty
darn simple.

Since I am going to turning some content duties over to the "Marketing
Guy" on this project I will be writing a Users Guide. I know this we
be outdated before I finish it, but hey, just gotta be Agile right?

Again, this thing rocks. And you guys can know you are contributing to
helping poor kids in the US receive Music Education since our
government no longer deems the "Arts" as an important part of
education. 100% of the profits on this store go right back into the
streets. And as a non-profit we will be receive almost $10k a month (I
think that's about 1200 UK pounds) in grant Google Ad Words, so it
should be well trafficked.

Cheers - Brent



On May 1, 10:36 am, Jeremy Skinner <jer...@jeremyskinner.co.uk> wrote:
> Just applied it. This is really starting to look good!...
>
> read more »
> > > >>>> any- Hide quoted text -
>
> - Show quoted text -

Mike Hadlow

unread,
May 9, 2009, 8:27:40 AM5/9/09
to sutek...@googlegroups.com
Hi Brent,

Thanks for the kind words. It's very pleasing to hear that you're finding Suteki Shop useful. I tried to browse to http://shop.keystoachievement.org, but I guess the DNS hasn't propogated yet, because I can't resolve it.

"I have not been able to input any productss without crashing the app", Is this an obvious problem for you, or do you need help getting it to work? It's probably something to do with the insert_static_data.sql script not being up to date, or not correctly applying Jeremy's database change scripts.

I'm going to me meeting Hammett from the MEF team at a series of workshops we're doing next week, so I'll try and pick his brains about the suitability of MEF for plugin payment providers :)

I'm very much looking forward to seeing the site.

Thanks
Mike

Brent Hoover

unread,
May 9, 2009, 5:14:00 PM5/9/09
to sutek...@googlegroups.com
Sorry, should have been store.keystoachievement.org. I haven't done anything to the look yet.

Jeremy Skinner

unread,
May 10, 2009, 12:54:46 PM5/10/09
to sutek...@googlegroups.com
I've spent the last couple of days trying to re-create the JumpTheGun layout using the changes introduced in Graham's XHTML/CSS patch. Unfortunately, this was not a simple task and there were several areas that just don't work with the new layout. As we have to maintain backwards compatibility for existing sites, I've had to revert some of these changes.

Here's a brief summary of the changes:

- Moved the login section back to the bottom of the page, as it was before the patch was applied.
- Re-introduced the 'contact details' section into the header which was missing.
- Undid the changes made to the header - the shop logo needs to be above, rather than to the left of, the main menu
- Reverted the introduction of Admin.master as the admin menu needs to be displayed on all shop pages (also merged admin.css back in to the main css)

Now, my CSS skills aren't stellar, so it could be there are better ways to do some of this. Graham, if you feel like having a play with this then please be aware that both CSS files - scaffold.css and site.css need to be kept in sync.

Also, I'm planning on merging the JtG_Enhancements branch back into the trunk today. 

Jeremy
Reply all
Reply to author
Forward
0 new messages