Gallery Module with Lightbox Template - Change Colors

[jsp196]

I am using the Gallery module with the Lightbox template. I'm able to set it all up and see the gallery list as thumbnails and then click through into each of the galleries. The issue is that in the display of gallery thumbnails (where each thumbnail represents a subgallery) the text below each subgallery with the name of each gallery is in black on a black background. The entire website has a black background so I'm looking for a way to change the color of the subgallery names displayed below each subgallery thumbnail. Thoughts? When I looked in my browser at what was setting the color, it said that a span was setting it and I couldn't find a CSS item that did it - I changed every single instance in both the template CSS and the Lightbox CSS to white. Thank you for your help.

[Dr.CSS]

A link to the page with gallery would help...

[jsp196]

Here's a link:

http://jgsconstruction.net/index.php?page=projects-2

You'll notice that if you highlight under those three thumbnails, there's text there. But I'm not able to change the color.

[staartmees]

see in your stylesheet for the class img and set text-color to e.g. white.

[jsp196]

I don't see it. I only see classes for .gallery . img. I also didn't see it in the general CSS for my Template. See below the CSS for the Lightbox module:

Code: Select all

.gallery .img {
	height: 120px;
	/*width: 120px;*/
	float: left;
	margin: 10px;
	text-align: center;
}

.gallery .img a {
	display: inline-block;
	border: 2px solid #ddd;
	padding: 1px;
}

.gallery .img a:hover {
	border-color: #999;
}

.gallery img {
	border: none;
}

.gallery .pagenavigation {
	height: 50px;
}

.gallery .prevpage a, .gallery .prevpage em {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	margin: 0;
	text-indent: -1000px;
	background: url(../../images/previous.png) transparent no-repeat 0 0;
	overflow: hidden;
}

.gallery .nextpage a, .gallery .nextpage em {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	margin: 0 6px 0 0;
	text-indent: -1000px;
	background: url(../../images/next.png) transparent no-repeat 0 0;
	overflow: hidden;
}

.gallery .parentlink a {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	text-indent: -1000px;
	background: url(../../images/uppage.png) transparent no-repeat 0 0;
	overflow: hidden;
}

.gallery .pagenavigation a:hover {
	background-position: 0 -40px;
}

.gallery .prevpage em, .gallery .nextpage em {
	background-position: 0 -80px;
}

.gallery .pagelinks {
color:c0c0c0;
	float: right;
	border-right: 2px solid #666;
}

.gallery .pagelinks a, .gallery .pagelinks em {
	margin-top: 6px;
	padding: 0 6px;
	border-left: 2px solid #666;
	text-align: center;
	font: bold 11px verdana; color: #666;
}

.gallery .pagelinks em {
	color: #000;
}

.galleryclear {
	clear: both;
}




/* LIGHTBOX */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

[staartmees]

well it's the .gallery .img class; just add color:#FFFFFF;

.gallery .img {
height: 120px;
/*width: 120px;*/
float: left;
margin: 10px;
text-align: center;
}

[Dr.CSS]

The link is a 404 but I found it, and staartmees is correct...

BTW: http://validator.w3.org/check?verbose=1 ... 3Dprojects

[jsp196]

It works. Thank you! I had to make a new Lightbox template so that the particular gallery looked different. And I think I fixed most of the HTML errors as well - they were included in the template that I was using.