Customize the colorbox title (long title and its position)

Question

Please take a look.

How to add a long signature under the popup? For example, adding 3 lines:

we can add one line to the tag title, and I tried to change this style

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0px;
text-align: center;
width: 100%;
font-weight: bold;
color: #7C7C7C;

} adding height or top: 800px, signature deisapear

Answer 1

Have you tried using this?

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0;
text-align: right; /* MODIFIED */
width: 600px; /* MODIFIED */
font-weight: bold;
color: #7C7C7C;
word-break: break-word; /* ADDED */
margin-right: 100px; /* ADDED */
margin-left: 100px;  /* ADDED */
}

This will allow you to use 2 lines of text!

Then, to remove more space for another line, remove the following CSS fragment from this snippet. (Use "/ * CSS HERE * /" to comment so you can save the code!) Example below

/* bottom: -25px; */

, " 3 3":)

,

Answer 2

:

$(document).bind('cbox_complete', function(){
    var cboxTitleHeight = $('#cboxTitle').height();
    var cboxContentHeight = $('#cboxContent').height();
    var cboxWrapperHeight = $('#cboxWrapper').height();
    var colorboxHeight = $('#colorbox').height();

    $('#cboxMiddleLeft, #cboxMiddleRight, #cboxContent').css('height', (cboxContentHeight + cboxTitleHeight) + 'px');
    $('#cboxWrapper').css('height', (cboxWrapperHeight + cboxTitleHeight) + 'px');
    $('#colorbox').css('height', (colorboxHeight + cboxTitleHeight) + 'px');
});

https://gist.github.com/eddyyanto/1620742, , , v.1.5.x colorbox.