Moving colorbox's captions to top of box?

Question

I'm using colorbox to open modal windows on my project. There is 5 style to use colorbox. I'm using Example 5 on this url: http://www.jacklmoore.com/colorbox/example5/ I am trying to move colorbox.js's caption row (title attribute text, background and close icon) to the top of the box - it defaults to the bottom. How can I do it? This is normal view of Colorbox window on Example 5: This is what I REALLY WANT:

Accepted Answer

You have to do two things: The first is easy; you'll have to edit the CSS file (colorbox.css) and change the position rule for the following elements:

```
#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow
```

so that their absolute positioning is based on the 'top' property not the 'bottom' property. Here is an example, before and after an edit (the before version is commented out):

```
/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */
  #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;}
```

You'll have to experiment to get the proper values for the 'top' property.

The second thing to do may be more difficult. The plugin uses an image 'sprite' (a composite of many images) called controls.png. Looking at it, it does not have the images necessary to do what you want.

If you are competent with an image editor, you could modify this image and add the necessary images, then determine the X-Y co-ordinates necessary to use the new image content according to typical sprite use in CSS. Don't know if you are up for this.

Ah, but you thought it was a simple change, eh? Best of luck!

Moving colorbox's captions to top of box?

Solution

Problem