Boarder around ProdUCT Image?

Hi,

Could you tell me where in the .css I need to edit in order to add a boarder around both the product listing image and the image within the products main page (i.e where it is described in detail,you can 'add to cart' etc..)?

I am assuming I should do this within the .css file but I can't seem to spot it.

Thanks in advance,

Streetwood

Hi,

You can add such CSS in the front end CSS via the interface in the config under the tab display :

.hikashop_products_listing img{ border:1px solid #000000; }
.hikashop_product_main_image_thumb img{ border:1px solid #000000; }

Hi, Thanks for the reply....I can't seem to find those names within the frontend .CSS file....Here is the whole file as I have it, maybe you can tell me from this what to edit....

/* footer display */
div.hikashop_footer{
padding-top : 20px;
clear:both;
padding-bottom : 20px;
}

/* 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_category_list{
margin:0px;
}
.hikashop_category_left_part{
text-align:center;
}
.hikashop_category_right_part{
padding-left:1px;
}


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

/* product listing */
.hikashop_product_item_left_part{
text-align:center;
}
.hikashop_product_item_right_part {
margin-right: 20px;
margin-left: 20px;
}
.hikashop_product_image{
padding-bottom: 2px;

}


/* different parts of the show of a product */
.hikashop_product_top_part{
width:100%;
}
.hikashop_product_left_part{
text-align:center;
float:left;
width:50%;
}

.hikashop_product_right_part{
float:left;
padding-left:1px;
}
.hikashop_product_bottom_part{
clear:both;
width:100%;
}
.hikashop_product_characteristic_chooser{
text-align:center;
}
.hikashop_product_quantity_field{
width:25px;
}
a.hikashop_product_quantity_field_change:hover{
text-decoration: none;
}
.hikashop_no_border tr, .hikashop_no_border td,
#hikashop_address_listing tr, #hikashop_address_listing td, #hikashop_address_form_span_iframe tr,
#hikashop_address_form_span_iframe td, #hikashop_product_quantity_main tr,#hikashop_product_quantity_main td,
#hikashop_checkout_page tr,#hikashop_checkout_page td, #hikashop_affiliate_main tr, #hikashop_affiliate_main td{
border:0px solid #DDDDDD;
}
#hikashop_order_listing fieldset,#hikashop_address_listing fieldset, #hikashop_affiliate_main fieldset{
border:1px solid #CCCCCC;
background-color:#FFFFFF;
}

div#hikashop_product_left_part div{
text-align:center;
}
div#hikashop_product_left_part img.hikashop_child_image{
margin : 2px;
height:25px;
}
.hikashop_product_code_main{
display:none;
}
.hikashop_product_weight_main{
display:none;
}
span.hikashop_product_name{
display:block;
margin-bottom:5px;
}

/* prices display */
span.hikashop_product_price_before_discount{
text-decoration:line-through;
white-space:nowrap;
}
span.hikashop_product_price{
color:#990000;
white-space:nowrap;
}
span.hikashop_product_discount{
white-space:nowrap;
}
span.hikashop_product_price_full{
font-weight:bold;
display:block;
margin-bottom:5px;
}
span.hikashop_checkout_cart_coupon{
font-weight:bold;
}
span.hikashop_checkout_cart_shipping{
font-weight:bold;
}
span.hikashop_checkout_cart_taxes{
font-weight:bold;
}
span.hikashop_checkout_cart_final_total{
font-weight:bold;
color:#990000;
}

/* pagination */
.pagenav{
cursor:pointer;
}
.list-footer li{
list-style-type:none;
display: inline;
}

/* product name in the cart layout of the checkout process */
#hikashop_cart .hikashop_cart_product_name a{
font-weight:bold;
}
.hikashop_cart_product_name_value{
width:40%;
}

/* titles for cart display */
.hikashop_cart_title{
font-weight: bold;
}

.hikashop_small_cart_checkout_link,.hikashop_small_cart_clean_link,.hikashop_small_cart_total_title span,.hikashop_small_cart_total_title span span,.hikashop_small_cart_total_title span span span {
display:inline-block;
zoom:1;
*display:inline;
margin-bottom:0px;
}

/* next button of the checkout process */
#hikashop_checkout_next_button{
float:right;
}
#hikashop_checkout_shopping_button{
float:left;
}
.hikashop_submodules{
padding-top:30px;
}


/* cart buttons */
a.hikashop_cart_button, a.hikashop_cart_button:hover{
background-image:url(../images/button.jpg);
border:1px solid #356AA0;
color:#000000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
padding:5px 8px;
text-decoration:none;
cursor:pointer;
float:left;
white-space:nowrap;
}
a.hikashop_cart_button:hover{
outline: 2px solid #92C1FF;
}
#hikashop_order_listing a.hikashop_cart_button, #hikashop_order_listing a.hikashop_cart_button:hover,
#hikashop_checkout_login a.hikashop_cart_button, #hikashop_checkout_login a.hikashop_cart_button:hover{
float:none;
}

.hikashop_products a.hikashop_cart_button,.hikashop_products a.hikashop_cart_button:hover, #hikashop_checkout_coupon a.hikashop_cart_button,#hikashop_checkout_coupon a.hikashop_cart_button:hover{
float:none;
width:100px;
}

#hikashop_button_1 div.hikashop_container,#hikashop_button_2 div.hikashop_container,#hikashop_button_3 div.hikashop_container {
cursor:pointer;
}
#hikashop_button_1 div.hikashop_subcontainer, #hikashop_button_2 div.hikashop_subcontainer, #hikashop_button_3 div.hikashop_subcontainer,#hikashop_order_listing div.hikashop_subcontainer {
text-align:center;
}



/* checkout progress bar styles */
.hikashop_cart_bar{
background: url(../images/line.png) repeat-x scroll 100% 50% transparent;
padding-bottom:0;
padding-top:33px;
}
#hikashop_checkout_page div.hikashop_cart_bar{
text-align:center;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_current {
-moz-background-inline-policy:continuous;
background: url("../images/current_step.png") no-repeat scroll 50% 3px transparent;
color:#363636;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_finished {
-moz-background-inline-policy:continuous;
background: url("../images/finished_step.png") no-repeat scroll 50% 3px transparent;
color:#363636;
}
#hikashop_checkout_page div.hikashop_cart_step span {
position:relative;
left:4%;
width:auto;
}
#hikashop_checkout_page div.hikashop_cart_step span a {
color:#B2B2B2;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_finished span a {
color:#363636;
}
.hikashop_cart_step {
-moz-background-inline-policy:continuous;
background: url("../images/step.png") no-repeat scroll 50% 3px transparent;
display:inline;
padding-top:20px;
padding-right:8%;
white-space:nowrap;
}


/* checkout login layout */
.hikashop_checkout_login{
clear:both;
width:750px;
margin:auto;
}
.hikashop_checkout_login_left_part{
width:250px;
float:left;
}
.hikashop_checkout_login_right_part{
width:500px;
float:left;
}

/* checkout address layout */
.hikashop_checkout_address{
clear:both;
width:700px;
margin:auto;
}
.hikashop_checkout_address_billing_only{
clear:both;
width:100%;
margin:auto;
}
.hikashop_checkout_billing_address{

}
.hikashop_checkout_address_left_part{
width:350px;
float:left;
}
.hikashop_checkout_address_right_part{
width:350px;
float:left;
}
div#hikashop_address_form_span_iframe input.hikashop_cart_input_button, div#hikashop_address_form_span_iframe a.hikashop_cart_button, div#hikashop_address_form_span_iframe a.hikashop_cart_rounded_button{
float:right;
}

/* checkout payment names */
.hikashop_checkout_payment_name{
font-weight: bold;
}

/* checkout shipping names */
.hikashop_checkout_shipping_name{
font-weight: bold;
}

.hikashop_custom_file_upload_link{
display:block;
}

.hikashop_red_border { border: 1px solid red; }

/* orders */
.hikashop_orders{
width:100%;
}
.hikashop_order_listing_status{
margin-bottom:5px;
display:block;
}

.hikashop_order_title{
text-align:center;
}
.hikashop_order_right_part{
float:right;
padding-top:20px;
}

div.hikashop_paypal_end_image input{
background: url(' www.paypal.com/en_US/i/btn/x-click-but6.gif ') top left no-repeat;
width:150px;
height:52px;
border:none;
cursor:pointer;
}

.hikashop_authorize_thankyou{
text-align:center;
}


.hikashop_rbottom{clear:both;}
.clear_both{clear:both;}

/* sliders CSS for module categories display */
#pane h3 {margin:0;font-size:110%;letter-spacing:0px;}
.pane-sliders .title {margin:0;padding:5px;color:#666;cursor:pointer;}
.pane-sliders .panel {border:1px solid #ccc;margin-bottom:3px;}
.pane-sliders .panel h3 {background:#f6f6f6;color:#666;}
.pane-sliders .content {background:#ffffff;}
.pane-sliders div.content {padding:0px 10px 10px 10px;}
.jpane-toggler span {v5px 50% no-repeat;padding-left:20px;font-weight:700;}
.jpane-toggler-down span {background:transparent url(../images/j_arrow_down.png) 5px 50% no-repeat;padding-left:20px;font-weight:800;}
.jpane-toggler-down { border-bottom:1px solid #ccc;}

/* customer control panel */
#hikashopcpanel div.icon a {
border:1px solid #F0F0F0;
color:#666666;
display:block;
float:left;
text-decoration:none;
vertical-align:middle;
width:100%;
}
#hikashopcpanel div.icon:hover a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F9F9F9 none repeat scroll 0 0;
border-color:#EEEEEE #CCCCCC #CCCCCC #EEEEEE;
border-style:solid;
border-width:1px;
color:#0B55C4;
}
#hikashopcpanel div.icon {
float:left;
margin-bottom:5px;
margin-right:5px;
text-align:center;
width: 100%;
}
#hikashopcpanel span {
display:block;
text-align:center;
}
#hikashopcpanel img {
margin:0 auto;
padding:10px 0;
}
.hikashopcpanel{
width:500px;
margin:auto;
margin-top:20px;
}

/* affiliate program */
.hikashop_banner_row:hover{
}

/* icons */
.icon-32-cancel {background-image:url(../images/icons/icon-32-cancel.png);}
.icon-32-back {background-image:url(../images/icons/icon-32-back.png);}
.icon-32-new {background-image:url(../images/icons/icon-32-new.png);}
.icon-32-apply {background-image:url(../images/icons/icon-32-apply.png);}
.icon-32-save {background-image:url(../images/icons/icon-32-save.png);}
.icon-32-print {background-image:url(../images/icons/icon-32-print.png);}
.icon-48-order {background-image:url(../images/icons/icon-48-order.png);}
.icon-48-category {background-image:url(../images/icons/icon-48-category.png);}
.icon-48-user {background-image:url(../images/icons/icon-48-user.png);}
div.toolbar span {
display:block;
float:none;
height:32px;
margin:0 auto;
width:32px;
}
div.toolbar a {
border:1px solid #FBFBFB;
cursor:pointer;
display:block;
float:left;
padding:1px 5px;
text-align:center;
white-space:nowrap;
}

/* tool-tip */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/***************************************************************************/
/* Some Messages to display on a popup because the CSS is not fully loaded */
/***************************************************************************/

div.hikashop_messages{
border-bottom-style:solid;
border-bottom-width:2px;
border-top-style:solid;
border-top-width:2px;
font-weight:bold;
margin:5px 10px;
}

.hikashop_messages li{
list-style-type : none;
}

div.hikashop_warning{
background-color:#EFE7B8;
border-bottom-color:#F0DC7E;
border-top-color:#F0DC7E;
color:#CC0000;
}

div.hikashop_success{
background-color:#CCFFBB;
border-bottom-color:#00AA00;
border-top-color:#00AA00;
color:#00AA00;
}

div.hikashop_info{
background-color:#C3D2E5;
border-bottom-color:#84A7DB;
border-top-color:#84A7DB;
color:#0055BB;
}

div.hikashop_error{
background-color:#E6C0C0;
border-bottom-color:#DE7A7B;
border-top-color:#DE7A7B;
color:#CC0000;
}
#hikashop_add_to_cart_continue_div{
float:left;
}

#hikashop_add_to_cart_checkout_div{
float:right;
}

.hikashop_delete_entry_button{
float:right;
}

You need to ADD in there the CSS I wrote earlier and not edit anything.

Great thanks....

Hi...

I made the changes you suggested....

.hikashop_products_listing img{ border:1px solid #000000; }..............This worked fine,it added the boarder.
.hikashop_product_main_image_thumb img{ border:1px solid #000000; }.................This did not add the boarder around the thumbnail. Is it correct?

Is there anywhere it is possible to see the all the .css elements?

Thanks in advance....

That should add the border on the product page.

You can just display your page with firefox and use firebug to look at the html and you will see all the CSS class names available:
www.tutorial9.net/tutorials/web-tutorial...opment-with-firebug/

On our end, when canno write all the possible CSS classes in HikaShop. There is just too much classes.