PDA

View Full Version : Style for captions?


Khaos
Oct-07-2005, 06:12 PM
See Here: http://galleries.creativekhaos.com/gallery/453508

Notice how I changed the "available in" line for the top photo to orange.
I did it the old way. I haven't done such a good job learning the new stuff yet.

So can we, and how if we can, eliminate using the depracated font command and use style to acheive this?

I tried:

<p style="color:orange">Avaialble in 8x12, 10x15, 12x18</p>

and it doesn't work.

Andy
Oct-07-2005, 06:15 PM
use html in captions, according to jt's blog (http://blogs.smugmug.com/web-tricks/)

Khaos
Oct-07-2005, 06:40 PM
Thanks. Subscribing to that blog now.

Mike Lane
Oct-07-2005, 11:10 PM
Yup, surround the caption with <html> caption text and xhtml tags </html>. All the preformatting will go away so you will have to format the whole tag yourself. So make your caption something like this:
<html>
<h1>The Little Church of Forest Lawn
Boardman, Ohio</h1>
<a href="http://galleries.creativekhaos.com/gallery/570868/6/38557476/Large">See it Framed</a> </br>
<span> Available in 8x12, 10x15, 12x18</span>
<p>This a small church located in a cemetary in Boardman, Ohio. I had driven by it many times and was always intriqued by its look. This was taken with the 10-22 wide angle and processed using the channel mixer to emphasize the shadows and texture of the stone bricks.</p>
</html>

The caption is automatically contained within a div like this:

<div id="caption12345678" class="caption"> ... </div>

So to format all the captions to be one way all you need to do is to use something like this in your css:

.caption h1 {font-size:14px; text-decoration:underline; color:#ffff00; font-weight:bold;}
.caption a {text-decoration underline; color:#ff0000; diplay:block;}
.caption a:hover {color:#ff8800;}
.capttion span {color:#00ffff; font-style:oblique;}
.caption p {color:#ffffff;}

These are just examples of course, style them how you see fit. If you want to change up the syle for a specific gallery just use something like this:
#caption12345678 h1 {font-size:20px; color:#0000ff;}
etc...

If you want the captions to be one way in the journal style and another way in the smugmug style do something like this:
#smugmug .caption h1 {font-size:10px;}
#journal .caption h1 {font-size:20px;}

Hope this helps!

Khaos
Oct-08-2005, 07:23 AM
Awesome.

Thanks Mike.:bow