Page 1 of 1
Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 3:00 am
by 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.
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 3:32 am
by Dr.CSS
A link to the page with gallery would help...
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 4:09 am
by 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.
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 9:10 am
by staartmees
see in your stylesheet for the class img and set text-color to e.g. white.
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 9:31 am
by 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; }
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 9:40 am
by 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;
}
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Thu Jul 05, 2012 5:50 pm
by Dr.CSS
The link is a 404 but I found it, and staartmees is correct...
BTW:
http://validator.w3.org/check?verbose=1 ... 3Dprojects
Re: Gallery Module with Lightbox Template - Change Colors
Posted: Fri Jul 06, 2012 8:06 am
by 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.