Transparent Dock

[Nilachandan]

Hi Telerik,

Is is possible to make a total transparent RadDock. Or having some opacity of 30% or 50% so that my custom background image of webpage will be seen which is beneath RadDock?

Regards,
Chandan

[Sophy]

Hello Nilachandan,

You can use the standard css settings for making the RadDock control transparent with the desired opacity, e.g.:

<telerik:RadDock id="RadDock1" runat="server" style="filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;"  text="RadDock1" title="RadDock1"></telerik:RadDock>

Let us know if you need further assistance.

Kind regards,
Sophy
the Telerik team

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

[Nilachandan]

Hi Sophy,

Thanks again for your quick reply. But I need the dock to be remain transparent, not the dock's content.

I want to see a background image of an page where the dock is placed and at the same time I should also be able to veiw the content of the dock also. Instead of the docks background, which is filled with some colors, can it be remain transparent?

Can it happen?

Thanks,
Chandan

[Sophy]

Hi Nilachandan,

I could not understand completely what you mean. You want to make only the titlebar of the dock transparent but to leave its content solid or you have something else in mind. What do you mean under "the dock to remain transparent"? Please, explain in more details what is the result you want to achieve.
If you want some part of the RadDock to be transparent but another one not you can use the css class selector related to the corresponding element and add the needed settings to this class. For example, if you want a transparent titlebar but you do not want the dock's content to be transparent you can use the .rdTitlebar selector, e.g.:

<style type="text/css">
.rdTitlebar
{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
</style>
<telerik:RadDock id="dock1" runat="server" style="" text="RadDock1" title="RadDock1"></telerik:RadDock>

More information about RadDock's css classes you can find in the CSS Skin File Selectors help aritcle.

Best regards,
Sophy
the Telerik team

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

[Nilachandan]

Hi Sophy

I have put that image in this URL
transparentDockExample.jpg
I just wanted to make the dock's background color transparent, not the content in it, so that the background image of the whole page, in which the dock is...should come of a bit like the image.

I hope, this time you can get me.

Regards,
Chandan

[Sophy]

Hello Nilachandan,

If I understand you correctly you want to have a transparent RadDock but any control inside its content to remain non-transparent. It is a common browser problem that when you set some transparency to an outer element it is applied to all of its children and it is not possible to override this transparency setting. The situation is the same with the RadDock control. If you could achieve such an appearance with standard html elements you will be able to achieve it with RadDock as well. You should choose either make the content of the RadDock transparent and all the elements inside will automatically become transparent or leave the whole content non-transparent.

Best regards,
Sophy
the Telerik team

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