ColorBox : Change position of Close Button Link

Posted by Ankur Gandhi in jQuery



jquery-logo

Hi Friends, Some day ago I was working on jquery colorbox . I was integrating jquery colorbox into one project of client and really it is very easy to use for anywhere. I used it easily in client project but at end of this client come to me with one request that he want close button or close link which comes at bottom right in colorbox move to top right corner.

So i know this is not big thing, it is just CSS trick to move colorbox close button to top right corner. Some of you were thinking to change in js file or trying to find HTML of close button and then change HTML, but you can’t make it in this way. It is very simple and easy CSS trick to make it work.

open colorbox stylesheet (css file) and then add below code at bottom :

#colorbox #cboxClose
{
top: 0;
right: 0;
}
#cboxLoadedContent{
margin-top:28px;
margin-bottom:0;
}

Save it and then check colorbox, you will see close button shifted to top right. You can change above CSS code according to requirement for close button.

I hope this post helpful for someone. If you have any question then you can ask me anytime or post it in comment.

Also I am WordPress Developer, Freelance PHP Developer having more than 3 years of experience, So if you want to do any projects then you can contact me.

Hostgator Hosting in 1 Cent Coupon Code – “1CENTHECOUPON” (Without Quotes).

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

  • Hank

    Thanks Ankur!

  • Michael Brinson

    Thanks a ton Ankur! Very useful. It would be nice if there were some built-in options for this or at least some examples on the colorbox site.
    Not complaining of course, it’s awesome of Jack L. Moore to have worked so hard on his awesome plugin and then shared it with the world! :)

  • choctaw_chris

    That’s fantastic. Thanks so much. I had a client who kept closing the browser window because he never looked for a button at the bottom. The only problem I have now is that the title (at the bottom) is being obscured but I’ve just fixed that by adding a bottom margin.

  • Ivan LOpes

    SImple and effective. Thank you for your time