Ubercart Default Theme

Posts: 64
Joined: 02/13/2008

Hey all

i need some feeback on the default theme i'm going to create for ubercart.

here's what i've come up with so far.

http://drupalify.com/ubercart/ubercart-design.png

i'm going to write some tutorials as i go on frontend development for ubercart.

Should be fun.

Posts: 22
Joined: 01/17/2008

That's a nice, nice step-up from the current theme! Love the menu bar! And the search box at the top ... Bang on!

Posts: 64
Joined: 02/13/2008
Posts: 1
Joined: 12/03/2007

I prefer to begin the creative process when we are in conversation about these topics:

1. why are we doing this?
a. to create an out of the box powerful and usable solution
b. educate new drupal users on best theming practices
c. brand awareness and positioning

2. how will it be used?
a. users will download it and hack it apart Smiling
b. probably need photos to work well, get our imagecache worked out
c. it should also be developed with back-end / admin reporting in mind.

3. how can we best give back / support ubercart usage.
a. more documentation
b. use cases (quick starts, how to's)
c. start a killer ui / widget set for selling
d. evolve the uc positioning, 'powered by ubercart' integrate this in the ui / interface.
e. the footer is really important

4. more questions? thoughts?

Lets get clear about these points so we can best focus our efforts.

Posts: 64
Joined: 02/13/2008

Some good points there magicspark

I think the design is the best place to start as we can just edit a fireworks file rather than editing the css all the time.

Posts: 64
Joined: 02/13/2008

Just another quick update of how the shopping cart mouse over will work

http://drupalify.com/ubercart/ubercart-design-cart.png

On mouse over the menu will dropdown with the products as shown below.

AttachmentSize
ubercart-design-dropdown.png16.05 KB
Posts: 31
Joined: 11/21/2007
Bug Finder

I must say that is one sexy theme, good work! I love the dropdown design, but if I were to make one little suggestion it would be to perhaps make the logo a bit smaller, it's just a tad to large.

besides that everything looks great Laughing out loud

Posts: 64
Joined: 02/13/2008

Thanks tom-d

I'll be working on the design more over the next couple of days.

Posts: 105
Joined: 12/28/2007
Uber DonorBug Finder

Looks cool mykz- ...as my 2 cents, I'd love to see some cool buttons as well! Eye-wink (original discussion here)

Posts: 3199
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

I can weigh in with a few thoughts, but I think you guys have some good energy and a much better understanding of theming than I do. I'm excited to have you guys around!

1. Agreed. Brand awareness is huge... we've gotta move the brand away from "Ryan's hair" to the Ubershield and a recognizable look/feel. (I was amazed at how many strangers I met in Boston who knew me by my hair. Sticking out tongue ) Education here is icing on the cake to me, and I'd love for Ubercart to be known as a good resource for folks looking to theme their stores!

2. Making it easier for administrators would be awesome. This has been a problem where we have so much info on the screen... fixed width and/or extra-spacious themes just don't work so well. I'm open to anything here... I've been suggesting Bluemarine as an admin theme, but building some of this into a default store theme would be awesome.

Also, I'd love to have a package available here at Ubercart.org that folks could download that would include the default theme. I'm more than happy to share some credit and link referral love with anyone who contributes to the effort. Smiling

3. Use cases would be key. A lot of questions in the forums are "How do I...?" I think it would support Ubercart and make your job easier to combine the answers w/ instructions on theming Views. In the long run, I think we'll need to get more robust documentation of using Views w/ your store to handle some of the promotional type needs.

Also, just noticed in one of the new screenies how you worked the Ubercart reference into the footer. Very slick, and I appreciate your inclusion of it. Smiling

4. I'm not sure if any of the themers have Drupal 6 experience, but it might be worth it to consider how to best create a theme that will migrate easily into Drupal 6. I won't be of much help here, but you can always refer to this page and other parts of the Drupal ecosystem to get some clues. Maybe it's not that big of a deal, but I've heard D6 is a huge improvement over D5. Puzzled

Also, Lyle had brought up the idea of color module integration. I'd make this a minor goal, but brainstorming for the future it would be rocking to integrate the color picker in the future. I don't know the complexity of getting this into a theme, so I'd probably say w/ 99% certainty that this shouldn't be worried about in the initial theme.

Thanks again for all your efforts!

I'd love to hear what others think about the expanding cart block over content. I'm not sure that it's necessary, but I certainly wouldn't be opposed to its inclusion. I'm just curious if anyone would have an adamant "no" or if they would just place it somewhere else.

Cheers.

Posts: 64
Joined: 02/13/2008

Hey Thanks for the great feedback as always, it’s great to hear what the developers thoughts are regarding themeing.

1. Ryan i suggest cutting your hair lol and changing your picture icon to maybe a the ubercart shield which I have done just to push the branded logo more.

2. I think it’s a great idea to make the look different for the admin to the customers as when you login as admin you want more info displaying on the first page you visit unlike the customers where they need to be brought back to the main page. I’m really looking into how I want to setup the theme system as I might need to create two monsters like garlands.

3. The support side I will really help with as I found it really hard at first to find where to start and what was the right way to theme Ubercart over the last couple of days I’ve help people on the forums as much as I can with themeing but I thought I needed to do more so is released Nifty Products Tutorial Part 1.

You can find the first part of the tutorial here.
http://www.ubercart.org/forum/development/3868/nifty_products_tutorial_p...

4. Drupal 6 will be the challenge as I did a install not long ago and I did notice a lot had changed with the $variables they use now for themeing but I don’t think it would take to long to convert over ready for when Ubercart moves to Drupal 6.

I also think it would be a great idea to have the colour picker to but I’m not sure how the module works would need to look into that some more.

5. The expanding cart on mouse over idea was added because when I tried adding the default Ubercart block to the header it doesn’t style right in the garlands theme what I want the Ubercart default theme to do is to style so you can place Ubercart blocks anywhere on the page and it will always look right the expanding block over content will only happen when you have the block in the header.

I think it just gives people more of a choice on where they want their blocks.

Abilnet the cool buttons idea sounds great I’ll be working on a buttons.css file so you can just jump in and un-comment the buttons for your Ubercart installation also I’ll be submitting a tutorial on how to mod the cart buttons using CSS.

Thanks for the feedback guys

Posts: 3199
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

Forgot to mention this above, but zmove has done some cool work theming his cart and checkout pages to include a walk-through of the checkout steps at the top of the page. You can view this by adding this product to your cart and checking out his pages. He's done some great work there, and he might be a good resource for any other Ubercart themers.

This sort of feature might be a good candidate for consideration in a default store theme.

Posts: 4
Joined: 03/05/2008
AdministratorNot Kulvik

Regarding the previous mentioning of the header I wonder if the logo could be scaled down by maybe 25% and the cart integrated into the navigation bar as a tab or just a floating bit, replacing the "My Basket" button which seems a little redundant.

--

"Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree."
-Martin Luther

Posts: 64
Joined: 02/13/2008

Thanks for the comments james

I've scaled down the logo some more.

http://drupalify.com/ubercart/ubercart-design-c.png

The My Basket button I'm going to look into how I want that side of the site to function.

Posts: 3199
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

I'm also under the impression that the Ubercart logo is simply there as a placeholder, correct? Will we maybe use Image Cache to resize the end user's logo so it fits into the spot or something?

Posts: 4
Joined: 03/05/2008
AdministratorNot Kulvik

I would think if the CSS can be as fluid and accommodating that would be ideal, forcing a resize of the logo would be a bit intrusive I think.

--

"Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree."
-Martin Luther

Posts: 31
Joined: 11/21/2007
Bug Finder

The scaled down logo looks much better, btw whats the My Basket button for?

Posts: 64
Joined: 02/13/2008

Hey Tom

The my basket button will appear when you have items in your basket this will only show when you don't have the shopping cart block turned on.

If you guys have anymore ideas for that space don't be shy post about it.

Posts: 3199
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

@James - Ahh, agreed. Perhaps we can simply put a recommendation in the install instructions for logo sizing.

@mykz - Also, I'd recommend using cart instead of basket. There are some e-commerce usability studies that mention this as one of their top 10 things. Granted, I believe in the UK basket is used more... so maybe it could be optional. (This does get into tricky issues w/ multilingual sites, though.)

You might also just examine this module as a way to easily add settings to the theme settings form: http://drupal.org/project/themesettingsapi

Posts: 64
Joined: 02/13/2008

Hey Ryan

All the Text will be changed when the theme goes from an image file to CSS/HTML.

I’m going to be working on the design this weekend as I have some free time so I’ll uploading my process.

I’m hoping to show some shots of the catalogue pages and maybe more if I have the time.

Posts: 320
Joined: 08/07/2007
Administrator

Looks good. Ryan, if you decide to make this the default Ubercart theme, let me know so I can update the UberInstaller/Ubercart package on install.ubercart.org. (UberInstaller 2 is on its way!)

--

-Shawn Conn: If the Name Don't Rhyme It Ain't Mine

Posts: 3199
Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

Awesome, Shawn. Would definitely let ya know. Laughing out loud

Posts: 64
Joined: 02/13/2008

Hey All

Sorry there hasn't been any updates today.

I’ve been mad crazy completing projects and finding a new job hope to work on Ubercart theme tomorrow and get something out for you guys this weekend.

Posts: 4
Joined: 03/05/2008
AdministratorNot Kulvik

I think I can speak for Ryan and Lyle on this count, don't worry yourself about working on things tomorrow. We'll all be enjoying Resurrection Day/Easter Sunday at our respective churches and would encourage you to do likewise.

--

"Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree."
-Martin Luther

Posts: 64
Joined: 02/13/2008
Posts: 64
Joined: 02/13/2008

Hey all

Sorry much hasn't been worked on recently I’ve started a new job and I’ve had to move so my pc has gone into storage and my new laptop should be on its way this week YAY!!

I haven't forgot about the theme I’ve been writing down idea's and have a big list of notes I’m going to go through when the new laptop is up and going Smiling

Also if anyone would like to help with css/html and have used the Zen theme engine or have done any themeing before could they drop me and e-mail