Move product selection to right more

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #66282

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

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #66359

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)

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #66441

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.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
11 years 6 months ago #66467

In the hikashop options of your listing, you can reduce the "margin" option so that there is less space between each product box.

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #66469

Where exactly do I find this area to edit?

Thank you,

Charles

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #66561

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"

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #66682

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.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #66721

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

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #66731

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.

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
11 years 6 months ago #67013

Hi,

That link is not working.

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #67057

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

rhinobmx.com/index.php/catalog

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #67084

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;
}

In HikaShop > Configuration > Display, edit the frontend css file.

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #67186

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

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #67244

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;
}

Be careful, this property is for 3 columns, if you set 2 columns, the images will be to small.

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #67258

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;
}

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 6 months ago #67362

You can add these css properties to your css file.

Please Log in or Create an account to join the conversation.

  • Posts: 261
  • Thank you received: 4
  • Hikashop Business
11 years 6 months ago #67418

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?

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
11 years 6 months ago #67658

Hi,

I just checked your website but the images to go out of the box and the left links are displaying fine as far as I can see.

Please give more information. Screenshots of what you want would help.

Please Log in or Create an account to join the conversation.

Time to create page: 0.100 seconds
Powered by Kunena Forum