Need help with CSS issues with our template

We are trying to clean up a few last issues with setting up Hikashop Business within a purchased template and using Hikashop Styles. Most of our pages are coming out fine, but there are a couple last ones that we cannot seem to fix. Hopefully someone can guide us on how to add some simple CSS to fix these last few items.

When we display the products from a category on a page, we can add to the Module settings a module class suffix from the main template and get good results. Eg. ccappliance.com/cca/index.php/products/coffee-equipment

However, when we click on the individual product and go to the product page, we do not get a container with a white background, and I cannot seem to find where to change that or how (not experienced in CSS at all). We would like that page to have the same type of container as used for the other modules on the main pages, but cannot seem to understand where to change that or how.

We also have a problem with the Don't Have An Account? registration page. The login page itself has the correct container, but when you click through to the registration page, there is no background, etc. Again, cannot discover where and how to change that.
ccappliance.com/cca/index.php/component/...user/form?Itemid=183

The template uses K2 and Gantry if that makes a difference. I looked in the Components, but cannot find a component that controls the looks of those pages. Tried adding the module class suffix as a Page Class in that field in the Page Display Options of the Menu for those items, but that did not change anything.

Kind of at a loss on how to get the site ready to go with these last couple pages. It may be very simple, but not being a CSS person, kind of struggling with this. Hopefully someone can help with some easy to understand guidance on where and how to change these pages. Thanks.

I came across your post while trying to find out how Hikashop templates work so I don't have an answer for you but, if you haven't already done so, try using Firefox with the Firebug extension. That lets you poke around your web page and explore the styles applied and will tell you where a page element is getting it's styling from.

Ian

Hi there,

As said Ian, the best to do is to use firebug or the "inspect element" feature of Chrome/Opera to look at the different element of the page (div, span...). Then, you have to found the class or id related and add some css rules in the frontend css file (System>Configuration>Dispay).
I didn't found the product issue but for your registration page, here is what I did:
-I inspected the code to found the div containing the elements
-I looked at the class and found: hikashop_user_registration_page

then you just have to add something like that in your css file:

.hikashop_user_registration_page{
  background-color:white;
}

Thank you. I had tried Firebug, identified that it was that class. But I could not find that class in any of the CSS files, so did not know where to change or adjust the settings. Did not think of simply adding it to the Custom Front-end CSS file.

Seems to work, but still needs a little tweaking to look good.

Adding the CSS to the Custom Front-end CSS from within the Display Config did give me a white background for that element (the product_page). However, when I added some padding to the left and/or right to show the borders of some of the elements, it bumped the hikashop_product_right_part down a row, which then messes up the Add to Cart element, left border dotted line, etc.

Any ideas for a non-CSS person to fix that? Would like to add about 10-15 px of padding on the left and right, but how do I keep the right_part from getting pushed down?
Eg. ccappliance.com/cca/index.php/component/...ran-riserva?Itemid=0

Thanks. Little by little, I am picking up bits and pieces of CSS.

Thanks. Much improved. The CSS actually had the left part at 50%. I had tried to change it to 40%, etc., without any good results. Instead I have now set it at about 400px in the Style CSS, which seems to work.