Edit this page

HTML Output

Styles for Telerik controls are defined using Cascading Style Sheet (CSS) syntax. Each style consists of a selector that identifies an HTML element to be styled, and property/value pairs that describe each of the style specifics, e.g. color, padding, margins, etc. For example, the .RadLightBox_Default style defines the default color and font styles for the entire control:

    color: #333;
    font: 12px "Segoe UI",Arial,Helvetica,sans-serif;

HTML Output of RadLightBox

The typical HTML output of a RadLightBox control is the following (some HTML attributes have been removed for simplicity):

<div id="RadLightBox1" class="RadLightBox RadLightBox_Default" style="position: fixed; left: 50%; top: 50%; z-index: 3501; width: 486px; height: 348px; margin-left: -261px; margin-top: -176px; visibility: visible;">
    <div class="rltbGlowEffect"> </div>
    <div class="rltbClose" style="">
        <button class="rltbActionButton rltbCloseButton" type="button">
            <span class="rltbIcon rltbCloseIcon"></span>
            <span class="rltbButtonText">Close</span>
    <div class="rltbWrapper">
        <div class="rltbItemBox">
            <input id="RadLightBox1_PrevButton" class="rltbActionButton rltbPrevButton" type="submit" style="display:none;" value="Prev" name="RadLightBox1$PrevButton" />
            <img class="rltbActiveImage" alt="LightBox Active Image" src="/RadControls-CSharp45/RadLightBox/images/1.png" style="display: inline; visibility: visible; width: 189px; height: 285px; padding-left: 139px; padding-top: 0px; padding-bottom: 0px;" />
            <input id="RadLightBox1_NextButton" class="rltbActionButton rltbNextButton" type="submit" style="display: none;" value="Next" name="RadLightBox1$NextButton" />
        <div class="rltbDescriptionBox rltbDescBottom" style="">
            <h4 class="rltbTitle" style=""></h4>
            <div class="rltbDescription" style=""></div>
            <span class="rltbPager">Image 1 of 3</span>
            <div class="rltbToolbar">
                <button class="rltbActionButton rltbMaximizeButton" type="button" title="Maximize image" style="visibility: visible;">
                    <span class="rltbIcon rltbMaximizeIcon"></span>
                    <span class="rltbButtonText">Maximize image</span>
                <button class="rltbActionButton rltbRestoreButton" type="button" title="Restore" style="display: none;">
                    <span class="rltbIcon rltbRestoreIcon"></span>
                    <span class="rltbButtonText">Restore image</span>
    <div id="RadLightBox1_LoadingPanel" class="RadAjax RadAjax_Default" style="display:none;">
        <div class="raDiv"> </div>
        <div class="raColor raTransp"> </div>
    <input id="RadLightBox1_ClientState" type="hidden" name="RadLightBox1_ClientState" autocomplete="off" />

CSS classes and their usage

  • div.RadLightBox.RadLightBox_SkinName - this is the main control element, which holds the skin name. It has a couple of div elements for the close button, the image container and the loading panel.

  • div.rltbGlowEffect - this element doesn't contains any other elements and it is used to style the layout of RadLightBox control.

  • div.rltbWrapper - this is the wrapper element which holds the Item and the Description.

  • div.rltbItemBox - contains the image which is currently displayed in the browser.

  • input.rltbActionButton - all action buttons have this class assigned.

  • input.rltbPrevButton - the button which navigates to the previous image.

  • input.rltbPrevButton - the button which navigates to the next image.

  • img.rltbActiveImage - the currently active image.

  • div.rltbDescriptionBox - contains all elements of the description area.

  • h4.rltbTitle - element which holds the title of the description if there is any.

  • div.rltbDescription - element which contains the description itself.

  • span.rltbPager - element which contains the information about the current image index and the total number of images.

  • div.rltbToolbar - a wrapper of the maximize button.

  • div.rltbMaximizeButton - the button element which puts the image in fullscreen mode.

  • div.rltbRestoreButton - the button element which closes the fullscreen mode.

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article