Edit thumb style

Hi,

I would like to edit teh style of the thumbs in the grid lightbox (light).

What I am looking for is a thin even border (no thick bottom border with an arrow) around each thumb, preferably with a slight shadow offset.

I cant seem to find the code where teh border and bottom arrow is applied.

Any help?

Cheers,
Kevin.

the background image is set in the grid_lightbox/css/common.css file:

.pg-gl .thumbs a {
	float: left;
	background-color: #373737;
	margin: 3px 3px 0 0;
	background-image: url(../images/thumb_arrow.png);
	background-repeat: no-repeat;
	background-position: 50% 95%;
}

the thick bottom border is set by this code:

.pg-gl .thumbs img {
	border: none;
	border: solid 4px #2a2a2a;
	margin-bottom: 17px;
}

comment the margin-bottom setting.

Any idea how I would get a 45 degree drop shadow in there? :-)

create an image that creates the desired shadow, then add a css rule to attach the image to the background attribute.

I cant seem to attach the image.

The page is online products.php

the common.css is:

/* body background
--------------------------------------------------*/

body.pg {
/* background-color: #DBDBDB; */
}

/* wrapper
--------------------------------------------------*/

.pg-gl {
width: 839px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
padding-top: 8px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 20px;
}

/* gallery title
--------------------------------------------------*/

.pg-gl .title {
color: #7b7b7b;
background-color: #323232;
padding: 4px 12px;
font-size: 15px;
line-height: 26px;
}

/* ribbon
--------------------------------------------------*/

.pg-gl .thumbs {
overflow: hidden;
text-align:center;
}
.pg-gl .thumbs a {
float: left;
margin: 13px;
background-image: url(../images/thumb-bg.png);
background-color: #373737;
background-repeat: no-repeat;
background-position: 50% 95%;
}
.pg-gl .thumbs img {
border: none;
border: solid 4px #2a2a2a;
/* margin-bottom: 2px;*/
}

.pg-gl .thumbs a:hover {
background-color: #494949;
}
.pg-gl .thumbs a:hover img {
border-color: #3e3e3e;
}

.pg-gl .thumbs .no-images {
color: #7b7b7b;
padding: 10px 0 6px 12px;
font-size: 15px;
}

/* tooltip
--------------------------------------------------

.pg-gl-tip {
width: 250px;
background-image: url(../images/dark_tip_top.png);
background-repeat: no-repeat;
background-position: 50% 0;
z-index: 9999;
}
.pg-gl-tip .tip-top {
height: 7px;
font-size: 1px;
}
.pg-gl-tip .tip {
background-color: #fff;
padding: 7px;
background-image: url(../images/camera.png);
background-repeat: no-repeat;
background-position: 10px 10px;
}
.pg-gl-tip .tip .tip-title {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 7px 5px 7px 40px;
overflow: hidden;
width: 191px;
}
.pg-gl-tip .tip .tip-text {
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 11px;
padding: 8px 0 0 4px;
overflow: hidden;
width: 236px;
}
.pg-gl-tip .tip-bottom {

}*/

As you can see I have played around with the spacing and size.

Any thoughts?

Cheers,
Kevin.

the link goes to a 404 error.

if the image is not displaying, you most likely have the path incorrect.

Sorry I was playing around after I posted and removed that page.

try: bags.php

As far as I can see I have the right path. I placed the image in the same folder as the original thumb background and edited the CSS.

Cheers,
Kevin.

maybe try using border bottom and border right instead of a background image::

border-bottom: 1px solid #000000;
border-right: 1px solid #000000;

This would give me a solid black border on 2 sides wouldn't it. Not the shadow effect I was looking for.

honestly this sort of customization is not supported in the solution packs.

yes, this would give a solid border.

I cant say why the image is not working.

one thing i see is that your image is bigger than the actual space available.