Move product selection to right more

Hi,

My product selections on product info page are running into my product image when I have module menus on right side of page.

How do I move the product selection features such as price, select buttons, add to cart, etc. to the right more for better spacing?


Also,

My category images are more squished when I have menu modules to the right side. However, there is a ton of space to work with. Where and how do
I remove waisted space so that I can have larger category images?

Thanks,

Charles

Hi fan4chevy,

You can find some documentation on how to style the display here:
www.hikashop.com/en/support/documentation/faq.html#css

Can you give a link to your website ? (it will be easiest to see what's wrong)

I uploaded an image if you can take a look at it.

I am trying to make the category boxes larger, centered and be able to take up more space on the page rather than having as much waisted space.

Where exactly do I find this area to edit?

Thank you,

Charles

Hi fan4chevy,

You can find it in the general configuration: HikaShop > Configuration > Display, "Default parameters for DIVs" > "Item box margin".
Or in the module/menu configuration: "Parameters for DIV"

I tried this but it did not have an effect of moving the categories section boxes centered.

Also I am trying to figure out how to make the boxes larger so that I can increase the size of
category images in this section. If I make images larger than they go outside of the box.

Hi,

Can you give us a link to your website to see which property can be changed ?

You can use Firebug to see what need to be edited, you can find some documentations here:
www.hikashop.com/en/support/documentation/faq.html#css

Hi,

On this page you will notice that the images can be sized no problem but the box border does not fit the category image.

The categories are not centering on the page.

There is also too much waisted space around the image.

rhinobmx.com/index.php/catalog

Thank you.

Sorry it is working now. My entire server of domains went down for hours today.

rhinobmx.com/index.php/catalog

Hi,
You cna change these properties:

.hikashop_subcategories, .hikashop_products{
    clear: both;
    margin-left: 20px;
}
#hikashop_category_information_menu_105 div.hikashop_container{
    margin: 2px;
}

I will mess with that more. However, what part will make the box larger or expand with the thumb image so that the image does not expand out of the box?

rhinobmx.com/index.php/catalog

Hi fan4chevy,

You can't edit the box width, but you can edit the image width to reduce it a little with this property:

.hikashop_category_image img{
    width: 120px !important;
}

Hi,

I don't actually have the files in my css like the ones you are showing. I tried messing with margins under category display that I do have but it did not change.

Here is what I show:

/* category display */
div.hikashop_category_image{
clear:both;
}
img.hikashop_category_image {
margin: 4px;
}
table.hikashop_subcategories_table tr td{
text-align:center;
}
#hikashop_subcategories div {
text-align:center;
}
.hikashop_subcategories, .hikashop_products{clear:both;}
.hikashop_category_list{
margin:0px;
}
.hikashop_category_left_part{
text-align:center;
}
.hikashop_product_stock table tr, .hikashop_product_stock table td{
border: 0px !important;
}
.hikashop_category_right_part{
padding-left:1px;
}

.hikashop_category_list_item, .hikashop_product_list_item{
float:center;
}
.hikashop_product_list, .hikashop_category_list{
display: inline-block;
list-style-type: none;
text-align: left;
}


.hikashop_subcontainer{
padding-top:2px;
padding-bottom:2px;
}

You can add these css properties to your css file.

Hi,

I really appreciate your help. When I did the additions it also moved the category list box as well ( the links located to the left). Also the borders around the image do not change. The most important thing I am trying to do is increase the border to fit larger images lets say 150 or 175. Where do you change the border?