Remove colorbox outlines , pop up pop-up enlarged image no b

Remove colorbox outlines , pop up pop-up enlarged image no borders (1.5.5.1)

This tutotial shows how to remove the colorbox lay-out and leave only the picture.
(click on the picture for more or beside it to go back tot he product page.)

Also the background color overflow when going from vertical images to horizontal images is removed

See my site http://www.toonkamer-webshop.nl

Go to catalog/view/javascript/jquery/color/images.

The images in here are the outlines of the colorbox. It is the best way to rename the file images so you can always restore it.
Name it for example: images-out. Open cart can not find it anymore.

Now go to catalog/view/javascript/jquery/colorbox/colorbox.css.

Change the lines

#cboxContent{background:#fff; overflow:visible;}
and
#cboxLoadedContent{margin-bottom:5px;}

to

/*#cboxContent{background:#fff; overflow:visible;} (no overflow horizontal to vertical images)*/
#cboxLoadedContent{margin-bottom:0px;} /*remove space -image-text*/


At last you can adjust the transparancy of the background which pops out the enlarged image more or less:
Go to catalog/view/theme/default/template/product/product.tpl
Open it and find

opacity: 0.5,

change the value to your whishes ( in my case 0,85)

Text and number of pictures symetrical left and right underneath of the picture:

Colorbox.css:
#cboxTitle{position:absolute; bottom:-25px; left:0px; font-weight:bold; color:#888888;}
#cboxCurrent{position:absolute; bottom:-25px; right:0px; font-weight:bold; color:#888888;}


http://www.toonkamer-webshop.nl

See also

http://chandreshrana.blogspot.nl/2014/0 ... ge-in.html

1 Change text color , tekst size of description and price
http://forum.opencart.com/viewtopic.php ... 67#p610201
2 This tutorial shows how to change the menu layout , color ,background font size etc.
So you can adjust the menu to for example a tablet and make it better visible (larger text).
http://forum.opencart.com/viewtopic.php ... 12#p609626
3 This tutorial shows how to symmetrical line up the array of products on the category page.
For a better balanced block array line up.
http://forum.opencart.com/viewtopic.php ... 96#p603834
4 This tutorial shows how to put the product description price and so on next to the product image on the product page instead of under it.
http://forum.opencart.com/viewtopic.php ... 03#p603505
5 This tutorial shows how you can upload your images much faster than by ADMIN.
http://forum.opencart.com/viewtopic.php ... 38#p603647
6 This tutorial shows how to make a back up of your uploaded images. If by accident a map of images is lost you can easely restore them and do not have to one by one upload the images again.
http://forum.opencart.com/viewtopic.php?f=21&t=162242
7 This tutorial shows how to add text to your home page in different ways
http://forum.opencart.com/viewtopic.php ... 10#p603531
8 This tutotial shows how to remove the colorbox lay-out and leave only the picture.
(click on the picture for more or beside it to go back tot he product page.)
http://forum.opencart.com/viewtopic.php ... 35#p603227
9 Remove white space from Image white borders around images pop-up colorbox
http://forum.opencart.com/viewtopic.php?f=21&t=162244
10 This tutorial shows how to remove certain features you don't use in your shop
remove breadcrumb , remove title , remove image and category description , remove refine search , remove sort by name, date, price , remove compare , remove
http://forum.opencart.com/viewtopic.php ... 05#p603517
11 This tutorial shows how to make different background images on the different pages.
http://forum.opencart.com/viewtopic.php ... 26#p602451
12 Change layout of additional images breadcrumbs small picture
http://forum.opencart.com/viewtopic.php?f=21&t=162874
13 Simple structure of opencart how layout lay-out build up
http://forum.opencart.com/viewtopic.php?f=21&t=162872

If you like to adjust the text underneath the picture to the left and right side of the picture
( see http://www.toonkamer-webshop.nl)

change the lines:

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

to:
#cboxTitle{position:absolute; bottom:-25px; left:0px; font-weight:bold; color:#888888;}
#cboxCurrent{position:absolute; bottom:-25px; right:0px; font-weight:bold; color:#888888;}

(the color 888888 is personal , you can change to any other)