Responsive Sheffield Blue v1.0

[picaflor-azul]

Thanks Anne for all the work you did on this template it was very easy to work with... I just uploaded my auction site this weekend and now running it through some more testing... still finding forms I missed making responsive. One thing I found I like to share...

From one of my user point of view, the description, info, review tabs didn't have a hint to click for expanding them.... so I tagged in a pointer... I know, should of just added it to the 'heading' class, was in a rush...

<p class="heading" style="cursor:pointer;"><?php echo PRODUCT_DETAILS; ?></p>

Think I modified another 7-10 mods when I did the template change.... with all that.. the template remained fast and user responsive... very nice!
testing with a BlackBerry... so far it's all finger ready... even colorbox works..

I am happy that you are using the template and have managed to integrate so many modules.

Thanks for posting. I'll make a note and include this in the stylesheet for a future update ;)

Thanks,

Anne

[palafirst]

Once again thanks for the Sheffield Blue Responsive theme. I've been learning quite a lot working with it. Will definitely be recommending Picaflor Azul to people.

I would like to know two things:

#1. On the product page...how to move the product name, description, price and quantity to the right of the product image. Here is a product page showing what I'm talking about: http://www.cocoroots.com/cart/rings/...ll-silver-ring

I'm guessing I need to change: \includes\templates\responsive_sheffield_blue\templates\tpl_product_info_display .php but that doesn't seem to be enough. If I have the image size small enough then the info above moves to the right of the image, but we would like to have a nice 300x250px image and then it all moves down below the image.

#2. Is there a way to force Zen Cart (or the template) so that the boxes on the main page (showing new, featured, special) to be the same height? If the product name is long (becoming two lines) or I believe when something is showing "sold out" then the boxes are different heights and look quite messy. I've come up with one solution which is to force all the product names to be two lines by adding a <br>, but that will be quite confusing for the people who are entering in the products.

Thanks!
Greg

[chowardart]

#2. Is there a way to force Zen Cart (or the template) so that the boxes on the main page (showing new, featured, special) to be the same height? If the product name is long (becoming two lines) or I believe when something is showing "sold out" then the boxes are different heights and look quite messy. I've come up with one solution which is to force all the product names to be two lines by adding a <br>, but that will be quite confusing for the people who are entering in the products.

Greg
Go to the stylesheet.css file and look for ".centerBoxContentsProducts"... You can add a height value (I made mine at 335px)...

Recommend, I use Firefox (I actually use several browsers for different purposes), and add the Web Developer and Firebug plugins. Then all you have to do is select items in your store and in most cases it will show you the settings for various things, and in the case of WD will show you things like image sizes, or paths, or many other helpful info...

[picaflor-azul]

Once again thanks for the Sheffield Blue Responsive theme. I've been learning quite a lot working with it. Will definitely be recommending Picaflor Azul to people.

I would like to know two things:

#1. On the product page...how to move the product name, description, price and quantity to the right of the product image. Here is a product page showing what I'm talking about: http://www.cocoroots.com/cart/rings/...ll-silver-ring

I'm guessing I need to change: \includes\templates\responsive_sheffield_blue\templates\tpl_product_info_display .php but that doesn't seem to be enough. If I have the image size small enough then the info above moves to the right of the image, but we would like to have a nice 300x250px image and then it all moves down below the image.

#2. Is there a way to force Zen Cart (or the template) so that the boxes on the main page (showing new, featured, special) to be the same height? If the product name is long (becoming two lines) or I believe when something is showing "sold out" then the boxes are different heights and look quite messy. I've come up with one solution which is to force all the product names to be two lines by adding a <br>, but that will be quite confusing for the people who are entering in the products.

Thanks!
Greg

1. the example site is not loading. You will need to edit the tpl_product_info_display.php file and the stylesheet.css

2. You can add min-height:your height here; to the various elements in the stylesheet so that they line up. If you post a link to your site I can take a look



Thanks,

Anne

[picaflor-azul]

Greg
Go to the stylesheet.css file and look for ".centerBoxContentsProducts"... You can add a height value (I made mine at 335px)...

Recommend, I use Firefox (I actually use several browsers for different purposes), and add the Web Developer and Firebug plugins. Then all you have to do is select items in your store and in most cases it will show you the settings for various things, and in the case of WD will show you things like image sizes, or paths, or many other helpful info...

If you do this, then all of the boxes will be the same height, but the elements within the boxes may not line up perfectly ;) If you want the individual elements to line up, then it is better to use min-height on the elements.

Thanks,

Anne

[chowardart]

If you do this, then all of the boxes will be the same height, but the elements within the boxes may not line up perfectly ;) If you want the individual elements to line up, then it is better to use min-height on the elements.

Is there a way to limit how much info gets displayed?

[palafirst]

1. the example site is not loading. You will need to edit the tpl_product_info_display.php file and the stylesheet.css

2. You can add min-height:your height here; to the various elements in the stylesheet so that they line up. If you post a link to your site I can take a look



Thanks,

Anne

The example site direct to the product page the first problem should be: http://www.cocoroots.com/cart/rings/...ll-silver-ring Otherwise the main page is www.cocoroots.com/cart. If you go to any of the products you should see that the product name, description, etc. is below the product image. It's late here in India so I'll check all the other suggestions first thing in the morning. Thanks!

[palafirst]

If you do this, then all of the boxes will be the same height, but the elements within the boxes may not line up perfectly ;) If you want the individual elements to line up, then it is better to use min-height on the elements.

Thanks,

Anne

Yes Anne...I tried this and then one box has the "Details" button lower then the other boxes. Is there a better solution OR are there other changes to make so that the other elements inside the boxes can be made to line up? Much thanks!

[picaflor-azul]

Is there a way to limit how much info gets displayed?

The easiest way to remove elements would be to use css and add a display:none; on the div class.

Thanks,

Anne

[scottj]

Hi Anne, very pretty template - just spent the better part of 2 weeks upgrading to 1.5.1 and RSB so... thank you!

I'm having a couple problems:

1. When I add a product to cart and login (or vice versa) it screws up the mega menu header. I can add to cart *or* login and no problem so it only shows up when I do both. See pics:


2. The "Sold Out" image in Product Listing displays "Sold Out Sm" - this is not the case in the Product Info page. See pic:


3. Since I removed 3 of the mega-menu items, "Service" opened left (hover) which ran off the screen. I'm a CSS dummy but I figured out if I removed the following code from stylesheet_mega_menu.css that it would open right. Will this mess anything up? Here's the code I removed:

/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {-moz-border-radius: 5px 0px 5px 5px;-webkit-border-radius: 5px 0px 5px 5px;border-radius: 5px 0px 5px 5px;}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

Much thanks!
Scott

My site so far:
zc1.5.1
Responsive Sheffield Blue
Image Handler 4
Zen Lightbox
EP4.0 and EP-CSV
MAP Pricing
Multi-Product Copy