categorygridpage3 does not display correctly

[Chris Hadden]

Prior to the recent upgrade to gold I have been using the categorygridpage3 (add to cart with the quantity box) Unfortunately this is not displaying well in the gold version as the quantity box is not even visible. Each product now has a scroll bar showing and you have to scroll a bit to see the quantity box. I am assume this is something to do with to much text or the image being to large? How do I resolve this.

Thanks
Chris

[Katie]

Do you use Firefox? They have plug-ins that can be used to show you the CSS code of any element on a page. Try using 'Inspector' or 'Firebug'. Inspect the element and make any change within the stylesheet panel to see how it changes the page design. Once you are happy with the change, just apply the css to your custom over-riding stylesheet. If you need more information, please see this link - http://help.ablecommerce.com/mergedProj ... _theme.htm

This scrolling box on categorygrid3 appears to be a bug though. I'll open a report for it and ask that the developers respond here with a solution.

[nadeem]

If you are using some less editor like crunch etc. you need to directly make the following change inside your theme's style.less file:

Locate

Code: Select all

/* category grid (deep item display) with add to basket styles */
    #categoryGridPage3 {
        div.catalogWrapper {
            div.categoryGridListing3 {
                padding:5px 0 5px 0;
            }
        }
    }

and replace with

Code: Select all

/* category grid (deep item display) with add to basket styles */
    #categoryGridPage3 {
        div.catalogWrapper {
            div.categoryGridListing3 {
                padding:5px 0 5px 0;
                 .productItemDisplay {
                    height:auto;
                }
            }
        }
    }

If you don't have any less editor, you can add a new custom.css file, put the above style into custom file. Make sure to add an entry for custom.css into your theme's style.skin something like this:

<cb:StylePlaceHolder runat="server">
<cb:Style runat="server" CssUrl="style.min.css" TargetMedia="All" DeviceConstraint="Standard"></cb:Style>
<cb:Style runat="server" CssUrl="custom.css" TargetMedia="All" DeviceConstraint="Standard"></cb:Style>
<cb:Style runat="server" CssUrl="footable.core.css" TargetMedia="All" DeviceConstraint="Standard"></cb:Style>
<cb:Style runat="server" CssUrl="print.css" TargetMedia="Print" DeviceConstraint="Standard"></cb:Style>
<cb:Style runat="server" CssUrl="jquery/jqueryui.css" TargetMedia="All" DeviceConstraint="Standard"></cb:Style>
<cb:Style runat="server" CssUrl="mobile.css" TargetMedia="All" DeviceConstraint="Mobile"></cb:Style>
</cb:StylePlaceHolder>

Hope this helps.

[Chris Hadden]

Once again i am completely lost on this stuff, why must this all be so difficult. I am not a code guy, I don't know anything about css or . less...

I went and downloaded that "crunch" .less editor. I then opened my web site in MICROSOFT web expression 4. I saw that the bootstrap file style.less now had the "crunch icon associated with it so I double clicked that. It opened up in what looked like an editor to me. I made the changes from you suggested post and the other post you suggested. I pressed the save button, the file indicated "changed" and then I uploaded that to the web site overwriting the style.less with the changed file......the results, nothing actually seems to have changed. It is exactly as it was prior to the changes I made to the style.less. What am I missing? is there a step here I did not do?

Thanks
Chris

[nadeem]

Let me make it simple and easy for you. Revert any changes you previously made and follow the steps:

- Download and extract the attached 'Custom.zip' folder to some temporary location
- Copy the custom.css and style.skin files to your theme's folder replacing existing style.skin (if you don't made any customization already)

Now visit your website and it should have both issues fixed. I have put both styles (from this and other post) to the custom.css.

You can use this custom.css for any future style updates overriding the styles in .less file.

Let me know if you still have any issue.

[Shopping Cart Admin]

You can use this custom.css for any future style updates overriding the styles in .less file.

Which is covered in more detail in the document Katie linked earlier.

http://help.ablecommerce.com/mergedProj ... _theme.htm

The custom.css was added during the setup of your store, I'm not sure how you started down the path of working the .less file but that's pretty advanced if your unfamiliar with .css

[Chris Hadden]

Thanks a lot for your assistance, I will revisit the "bootstrap" theme later once the web site is up. The separate mobile site looks pretty good so I am going to just go with one of the canned themes at the moment. Thanks again