Lightbox question

Ken · 5 Dec 2006 at 01:18

Hi,

I'm using Lightbox JS v2.0 for displaying my photos...

http://www.huddletogether.com/projects/lightbox2/

...but as you can see from the code, the text is white on a black background. How do I make the caption text on the photos black? Right now they're white also and therefore invisible as the photo borders are white.

Code:

<html>
<head>
<title>Bla bla</title>

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>

</head>
<body bgcolor="black" text="white">
<div align="justify">
<div align="center">
<img src="CECF.JPG">
</div>
<h2><b>THURSDAY 12TH</b></h2> 
<style>
a {color: yellow}
</style>
<p><a href="2.htm">Next page</a> <img src="emot-cow.gif></p>
</body>
</html>

Cheers!

P.S. Please check the code for any errors or longwindedness.

Do I need a </div> after the justify line?

joeyjojo · 5 Dec 2006 at 07:40

<body bgcolor="black" text="white"> is telling all the text on the page to be white. You need to have only the <p></p> white (if that's the white text). Change

Code:

<style>
a {color: yellow}
</style>

to

Code:

<style type="text/css">
<!--
a {color: yellow;
}
p {color:#FFFFFF;
}
-->
</style>

And take out the bit in body.

Ken · 5 Dec 2006 at 10:41

Thank Joe

I got rid of the text="white" and also added...

h2 {color:#FFFFFF;

...in the style section as I will have a few headings.

Is this correct? It works but just want to get it right.

Also, do I need a </div> after the justify line?

joeyjojo · 5 Dec 2006 at 18:31

Things like justify are best put in the css file, for neatness. It doesn't need it's own div just for that.

Code:

<html>
<head>
<title>Bla bla</title>

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
	
<style type="text/css">
<!--
body{
background-color:#000000;
}
#someid{
text-align:justify
}
h2{
color:#FFFFFF;
}
a {color: yellow;
}
p {color:#FFFFFF;
}
-->
</style>

</head>
<body>
<div id="someid">

<div align="center">
<img src="CECF.JPG">
</div>

<h2><b>THURSDAY 12TH</b></h2> 

<p><a href="2.htm">Next page</a><img src="emot-cow.gif"></p>

</div>
</body>
</html>

You can give the container div an id, so it can have properties in the style section. I've called it someid here, and justified the contents. You then have another div which makes everythin inside it centered. That div is closed and you have your content (you were missing a " on the cow.gif). Then the whole lot is closed with </div> at the end.

Ken · 5 Dec 2006 at 18:34

Thank you very much.

joeyjojo · 5 Dec 2006 at 18:44

Ken said:
Thank you very much.

No worries. Just develop your own style. The basics are, use a hash # before a div, so for widths and height and things you give the div an id, id="someid", and it checks for #someid in the css. p, body, a, a:hover exist on their own, and for select bits of text, highlighting or whatever, use classes, denoted by a period "." eg <span class="someclass"> and .someclass{}