[Skip to main content](#vessel-content)

#   Boarder around ProdUCT Image?

##

- **[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")**
- [![streetwood's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1598-streetwood "View streetwood's Profile") Topic Author
- [ Offline](/forum/user/1598-streetwood)

Less More

- Posts: 17
- Thank you received: 0
-
-

15 years 7 months ago [\#12543](#12543) by [streetwood](/forum/user/1598-streetwood "View streetwood's Profile")  *[Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12543 "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")* was created by *[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")*

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

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86323
- Thank you received: 14283
-
-

15 years 7 months ago [\#12549](#12549) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12549 "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; }

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")**
- [![streetwood's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1598-streetwood "View streetwood's Profile") Topic Author
- [ Offline](/forum/user/1598-streetwood)

Less More

- Posts: 17
- Thank you received: 0
-
-

15 years 7 months ago [\#12550](#12550) by [streetwood](/forum/user/1598-streetwood "View streetwood's Profile")  Replied by *[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12550 "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, 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](https://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;
}

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86323
- Thank you received: 14283
-
-

15 years 7 months ago [\#12552](#12552) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12552 "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")*

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

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")**
- [![streetwood's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1598-streetwood "View streetwood's Profile") Topic Author
- [ Offline](/forum/user/1598-streetwood)

Less More

- Posts: 17
- Thank you received: 0
-
-

15 years 7 months ago [\#12555](#12555) by [streetwood](/forum/user/1598-streetwood "View streetwood's Profile")  Replied by *[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12555 "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")*

Great thanks....

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")**
- [![streetwood's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1598-streetwood "View streetwood's Profile") Topic Author
- [ Offline](/forum/user/1598-streetwood)

Less More

- Posts: 17
- Thank you received: 0
-
-

15 years 7 months ago [\#12560](#12560) by [streetwood](/forum/user/1598-streetwood "View streetwood's Profile")  Replied by *[streetwood](/forum/user/1598-streetwood "View streetwood's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12560 "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...

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....

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86323
- Thank you received: 14283
-
-

15 years 7 months ago [\#12561](#12561) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Boarder around ProdUCT Image?](/forum/4-how-to/12543-boarder-around-product-image#12561 "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")*

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/](http://www.tutorial9.net/tutorials/web-tutorials/quick-easy-css-development-with-firebug/)

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

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzEyNTQzLWJvYXJkZXItYXJvdW5kLXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation.

Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.069 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)