Allow captions on two lines

Posted: Mon Jan 25, 2010 10:44 pm

Hi,

Just a quick question, I've had a quick look but struggling to find the right bit to edit.

What I want to do is increase the length of the caption text by allowing it to wrap onto two lines, or more. At the moment the text does wrap, but it overwrites the text showing the number of images.

Thanks in advance

jakec

Posted: Mon Jan 25, 2010 10:53 pm

I will look at the colorbox css and see what can be done. I noticed the same thing about a week ago and was needing a longer description too...

Posted: Mon Jan 25, 2010 10:55 pm

Cool glad I am not just being awkward.

Thanks for your help

Posted: Tue Jan 26, 2010 12:23 am

Try replacing the includes/jquery/css/colorbox.css with this.

Code:

/*
ColorBox Core Style
The following rules are the styles that are consistant between all ColorBox themes
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:1px;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/*
ColorBox example user style
The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML,
in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
*/
#cboxOverlay{background:#000;}

#colorbox{}
#cboxTopLeft{width:14px; height:43px; background:url(images/controls.png) 0 0 no-repeat;}
#cboxTopCenter{height:43px; background:url(images/border.png) top left repeat-x;}
#cboxTopRight{width:14px; height:43px; background:url(images/controls.png) -36px 0 no-repeat;}
#cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;}
#cboxBottomCenter{height:43px; background:url(images/border.png) bottom left repeat-x;}
#cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;}
#cboxMiddleLeft{width:14px; background:url(images/controls.png) -175px 0 repeat-y;}
#cboxMiddleRight{width:14px; background:url(images/controls.png) -211px 0 repeat-y;}
#cboxContent{background:#fff;}
   #cboxLoadedContent{margin-bottom:5px;}
   #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
#cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
#cboxTitle{position:absolute; bottom:-29px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; top:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; top:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
   #cboxClose{right:0; background-position:-100px -25px;}
   #cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

Posted: Tue Jan 26, 2010 12:39 am

That's great, thanks Bobby.

Is it possible to remove the grey line at the top it's merging with the icons, although it may look better I guess to increase the width of the line to match the bottom.

Thanks again

Posted: Tue Jan 26, 2010 12:44 am

I will look at it in a little while after I get a break at work..

Posted: Tue Jan 26, 2010 12:48 am

No probs.

Posted: Tue Jan 26, 2010 2:56 am

This works much better unless the colorbox image is really small. The image needs to be around 550px wide.

Code:

/*
ColorBox Core Style
The following rules are the styles that are consistant between all ColorBox themes
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0px;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/*
ColorBox example user style
The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML,
in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
*/
#cboxOverlay{background:#000;}

#colorbox{}
#cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) 0 0 no-repeat;}
#cboxTopCenter{height:14px; background:url(images/border.png) top left repeat-x;}
#cboxTopRight{width:14px; height:14px; background:url(images/controls.png) -36px 0 no-repeat;}
#cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;}
#cboxBottomCenter{height:43px; background:url(images/border.png) bottom left repeat-x;}
#cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;}
#cboxMiddleLeft{width:14px; background:url(images/controls.png) -175px 0 repeat-y;}
#cboxMiddleRight{width:14px; background:url(images/controls.png) -211px 0 repeat-y;}
#cboxContent{background:#fff;}
   #cboxLoadedContent{margin-bottom:5px;}
   #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
#cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
#cboxTitle{position:absolute; bottom:-28px; left:33px; text-align:center; font-weight:bold; padding-left:59px; padding-right:59px; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
   #cboxClose{right:0; background-position:-100px -25px;}
   #cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

Posted: Wed Jan 27, 2010 7:33 am

Thanks for all the help Bobby.

Just in case someone else has the same, or similar question with help from Bobby we altered the following line:

Code:

#cboxTitle{position:absolute; bottom:-28px; left:120px; right:59px; text-align:center; font-weight:bold; padding-left:20px; padding-right:20px; color:#7C7C7C;}