Drop Shadow with RadDock

[Joseph]

I have a client that would like to see a drop shadow with the raddock pieces.  Nothing fancy, just an offset black line on the top and right edges of the panel (like a shadow).  I can do this with divs and offsets, however I can't figure out how to do it with a RadDock item.  The divs don't follow the dock.  Here's the effect I'm looking for:

The CSS:

    <style>
        body {
            margin: 0px;
            padding: 20px;
            font-family: verdana;
            font-size: 12px;
            background-color: #FFFFFF;
        }

        #shadow-container {
            position: relative;
            left: 3px;
            top: 3px;
            margin-right: 3px;
            margin-bottom: 3px;
        }

        #shadow-container .shadow2,
        #shadow-container .shadow3,
        #shadow-container .container {
            position: relative;
            left: -3px;
            bottombottom: -3px;
        }

        #shadow-container .shadow1 {
            /*background: #F1F0F1;*/
            background-color: #808080;
        }

        #shadow-container .shadow2 {
            background: #DBDADB;
        }

        #shadow-container .shadow3 {
            background: #B8B6B8;
        }

        #shadow-container .container {
            background: #ffffff;
            border: 1px solid #848284;
            padding: 10px;
        }
    </style>

The HTML:

    <div id="shadow-container">
        <div class="shadow1">
            <div class="container">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
    </div>

joe

[Martin]

Hi Joseph,

At present, the rendering of RadDock does not allow such type of CSS styling, as there are no enough elements to "hook to" in order to create a dropshadow effect.

However, you may try  to create a custom skin based on one of the skins RadDock is shipped with and to add shadow to the respective images. To do so, follow these steps:

1. Go to RadControls installation folder, and then to Skins/ folder
2. Go to Default, and copy the Dock.Default.css file as well as the Dock/ folder
3. Paste these files in a custom fodler inside your project
4. Set EnableEmbeddedSkins to "false" in the server declaration of RadDock
5. Register Dock.Default.css in the head section of your webpage
6. Set Skin="Default"
7. Reload the page to check if the files are loaded correctly
8. Modify the images in the Dock folder and add dropshadow where necessary.

I recommend you to use FireBug or Microsoft Internet Explorer developer toolbar in order to acquire a better view of the DOM structure of RadDock and make it easier for you to create a custom skin.

You may also use CSS in order to create a shadow effect in IE - the dropShadow filter, however it obviously won't work with other browsers, as filter is a browser specific CSS / Direct X property.

Regards,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Hey Martin, thanks for your quick reply.  I am ok with the drop shadow filter only working in IE as our customers must use IE for our site.  However I cannot get the drop shadow filter to work with raddock, even when I use the !important property.  Have you tried using the drop shadow filter on a raddock with any success and do you have a working css example?  If so that would suit my needs.

thanks,
Joseph

[Martin]

Hi Joseph,

You may use two shadow filters for RadDock - dropshadow an shadow. The first one creates a solid color dropshadow, and the second - a semi-transparent one. In both filters you have control over the size of the shadow, its color, positiveness and direction.

It is up to you to choose which filter to use. Personally, I prefer the shadow filter, i.e. the semi-transparent one. However, please, have in mind that these CSS filters actually don't have much to do with CSS at all. These are purely Direct X controls, and may trigger unwanted and unpredictable results when used with other filters and layouts.

Here is the code I wrote for you:

1. dropShadow filter:

<style type="text/css">
.raddock
{
 filter: progid:DXImageTransform.Microsoft.dropShadow(Color=cccccc, offX=5, offY=5, positive=true);
}
</style>

2. shadow filter:

<style type="text/css">
.raddock
{
 filter: progid:DXImageTransform.Microsoft.Shadow(direction=145, color=#cccccc, strength=8);
}
</style>

Regards,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Thanks Martin, works great.

joseph