You are here

Colorbox - styling the box

The Drupal Colorbox module is a simple jQuery based lightbox. How do you style the lightbox? Use CSS. Here is a simple technique, a demonstration, plus tips and tricks.

The first step is to locate the lightbox in the HTML. The box is built by Colorbox using jQuery and appears in the HTML after the page loads. The following HTML is the empty box built in a previous page. See the HTML in a colorbox.

<body class="html not-front logged-in one-sidebar sidebar-second page-node page-node- page-node-1149 node-type-story section-colorbox">
<div id="cboxOverlay" style="display: none;"></div>
<div id="colorbox" class="" style="padding-bottom: 25px; padding-right: 30px; display: none;">
    <div id="cboxWrapper">
        <div>
            <div id="cboxTopLeft" style="float: left;"></div>
            <div id="cboxTopCenter" style="float: left;"></div>
            <div id="cboxTopRight" style="float: left;"></div>
        </div>
        <div style="clear: left;">
            <div id="cboxMiddleLeft" style="float: left;"></div>
            <div id="cboxContent" style="float: left;">
                <div id="cboxLoadedContent" style="width: 0pt; height: 0pt; overflow: hidden; float: left;"></div>
                <div id="cboxLoadingOverlay" style="float: left;"></div>
                <div id="cboxLoadingGraphic" style="float: left;"></div>
                <div id="cboxTitle" style="float: left;"></div>
                <div id="cboxCurrent" style="float: left;"></div>
                <div id="cboxNext" style="float: left;"></div>
                <div id="cboxPrevious" style="float: left;"></div>
                <div id="cboxSlideshow" style="float: left;"></div>
                <div id="cboxClose" style="float: left;"></div>
            </div>
            <div id="cboxMiddleRight" style="float: left;"></div>
        </div>
        <div style="clear: left;">
            <div id="cboxBottomLeft" style="float: left;"></div>
            <div id="cboxBottomCenter" style="float: left;"></div>
            <div id="cboxBottomRight" style="float: left;"></div>
        </div>
    </div>
    <div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>

The following HTML is the box with an image loaded. The changes are highlighted. See the HTML in a colorbox.

<body class="html not-front logged-in one-sidebar sidebar-second page-node page-node- page-node-1149 node-type-story section-colorbox">
<div id="cboxOverlay" style="display: block; opacity: 0.85; cursor: pointer;"></div>
<div id="colorbox" class="" style="padding-bottom: 25px; padding-right: 30px; display: block; top: 2622px; left: 689px; position: absolute; width: 500px; height: 528px;">
    <div id="cboxWrapper" style="height: 553px; width: 530px;">
        <div>
            <div id="cboxTopLeft" style="float: left;"></div>
            <div id="cboxTopCenter" style="float: left; width: 500px;"></div>
            <div id="cboxTopRight" style="float: left;"></div>
        </div>
        <div style="clear: left;">
            <div id="cboxMiddleLeft" style="float: left; height: 528px;"></div>
            <div id="cboxContent" style="float: left; width: 500px; height: 528px;">
                <div id="cboxLoadedContent" style="display: block; width: 500px; overflow: auto; height: 500px;">
                    <a id="ddo">
                        <img width="630" height="533" src="/images/drupal/modules/colorbox_download_from_drupal.org.png">
                    </a>
                </div>
                <div id="cboxLoadingOverlay" style="float: left; height: 528px; display: none;"></div>
                <div id="cboxLoadingGraphic" style="float: left; height: 528px; display: none;"></div>
                <div id="cboxTitle" style="float: left; display: none;"></div>
                <div id="cboxCurrent" style="float: left; display: none;"></div>
                <div id="cboxNext" style="float: left; display: none;"></div>
                <div id="cboxPrevious" style="float: left; display: none;"></div>
                <div id="cboxSlideshow" style="float: left; display: none;"></div>
                <div id="cboxClose" style="float: left;">Close</div>
            </div>
            <div id="cboxMiddleRight" style="float: left; height: 528px;"></div>
        </div>
        <div style="clear: left;">
                                                     
                                                     
                                                     
        </div>
    </div>
    <div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>

Demonstration image

Demonstration CSS

#colorbox { background-color: yellow; }
#cboxWrapper { background-color: lime; }
#cboxContent { background-color: green; }
#cboxClose { background-color: aqua; }
#cboxOverlay { background-color: maroon; }

Demonstration box

This is a demonstration of a colorbox with the #cboxContent background colour set to green.
 

Transitions

Transitions into a box are demonstrated in the Colorbox page.

Tips

  1. The cboxWrapper has rounded corners, leaving white corners. You can replace the Colorbox styling completely or use more complicated CSS to make the background trasparent.
  2. The cboxClose image does not have a transparent background. You will have to replace the image to use a colour other than white.

Tricks

  1. Colorbox can attach to any containing HTML with an id. The first demonstration on this page uses the id in a <pre> element.
  2. Use Firebug in Firefox to experiment with CSS changes. You see instant results.