Changing Tooltip skin "Metro"

[John]

Is it possible to change the style sheet for in built skin of telerik "Metro" ? I want to change the color and my close button to make it look like the following 




I am currently getting a circle around my close button and am unable to change color from blue to the color I need. 

Thanks,
Sushma.

[Marin Bratanov]

Hello Sushma,

It seems an image didn't make it through. You can attach it instead of attempting to paste it inline.

On customizing the appearance of the control, you will find useful the following:

• the browser dev toolbar so you can see the CSS rules applied in order to change them
• this article that can outline the most important CSS classes used: http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-css-selectors.html.
• this tutorial on creating a custom skin for the Classic RenderMode: http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-creating-custom-skin.html.
• this tutorial on creating a custom Lightweight RenderMode skin: http://www.telerik.com/help/aspnet-ajax/tooltip-creating-custom-lightweight-skin.html.

For your convenience I prepared a small CSS example that changes the metro classic skin basic elements to red (and the expected result is attached):

div.RadToolTip_Metro table.rtWrapper td.rtWrapperContent
{
    background: red;
}

div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft
{
    border-top: 1px solid red;
}

div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle
{
    background: red;
}

div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
{
    border-bottom: 1px solid red;
}

div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
{
    border-left: 1px solid red;
}

div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight
{
    border-right: 1px solid red;
}

div.RadToolTip_Metro .rtWrapper a.rtCloseButton
{
    background-image: none; /* note: this will remove the X because it is part of the blue image*/
    background: red;
    border-radius: 8px;
}

Regards,

Marin Bratanov
Telerik