Increase the size (height) of the header area in the ColorBox

Question

I use ColorBox to create slide shows with fairly long headers.

<a class="slideshow" href="image.gif" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis velit eget augue tincidunt a tempor risus volutpat. Integer tempor sapien justo. Ut facilisis odio nec risus aliquet nec rhoncus nunc ultrices. Nulla facilisi. Ut ac ligula a metus rhoncus feugiat. Praesent lacinia diam neque, sed tempor felis. Morbi sed sapien sem, vitae pulvinar nunc. Fusce metus dolor, iaculis eget venenatis a, gravida sed tellus." rel="slides">Slideshow</a> 

and the lightbox works, but in all the examples there is not much space for the title. How to make the title bar larger so that the ColorBox correctly aligns the “elastic” lightbox window?

---

A worthy solution has been identified. I was able to move the "title" into the image with a shaded background, overriding some styles from colorbox.css .

 #cboxTitle { text-align:justify !important; width:98.5% !important; margin-bottom:24px !important; padding:5px !important; background-color:#333 !important; opacity:0.75 !important; filter:alpha(opacity=75) !important; color:#fff !important; } 

I based these overrides on the style presented in Example 1.

Answer 1

Hit the same problem. The solution is to force some "externalHight" on the #cboxContent, which will be subtracted from the available image height.

So:

 #cboxContent { padding-bottom:50px; } 

Given that #cboxTitle should be absolute, you can also set its height:

 #cboxTitle { height:50px; }