Rank 1
Iron
Using Custom Skins of RadToolTip with Base Style Sheet after Upgrading to Q3.2009SP1
With the release of Q3.2009 SP1 we have introduced a change in serving the skins of RadToolTip.
RadToolTip was one of the few controls that did not use base style sheet, but only a skin .css file. Since Service Pack 1 the styling of the control is based on two style sheets – base style sheet and skin-specific style sheet.
The aim of this article is to explain in a few easy steps how to use this new functionality on custom skins that would be broken after upgrade.
The main purpose of the base style sheet of Telerik RadControls is to separate the layout-specific CSS rules that are common for all skins from the skin-specific settings (background images, colors and borders) and thus facilitate the skin maintenance or the creation of a new skin. By introducing a base style sheet to RadToolTip and moving the common settings in a separate file we managed to reduce the CSS file from 300+ lines to less than 50 lines per skin.
The easiest way to use a custom skin with the latest version of RadControls is to set EnableEmbeddedBaseStylesheet to false in the server declaration of RadToolTip. This will prevent the loading of the base style sheet on the page and the control will simply resort on the custom style sheet that contains all settings that are now gone in the base CSS file. However, in order to ensure that the skin will work in any possible case or future updates just read the rest of this article.
Let’s assume that our custom skin is based on one of the skins shipped with RadControls, for example – WebBlue. All skins are stored in [RadControlsInstallationRoot]/Skins/SkinName/ToolTip.SkinName.css. Let’s now compare the skins from SP1 with an older skin. The first thing that is obvious is that both files differ in size.
Essentially, what we need to do now is to remove selectors from the custom skin that are not required by the new skinning mechanism of RadToolTip.
The selectors or CSS properties that need to be removed from the skin are shown in red in the listing below:
.RadToolTip_WebBlue.rtLoading
{
background: url('ToolTip/Loading.gif') no-repeat center;
width: 100%;
height: 100%;
}
div.RadToolTip_WebBlue
{
position: absolute;
cursor: default;
}
div.RadToolTip_WebBlue div.rtCallout
{
display: none;
}
div.RadToolTip_WebBlue.rtVisibleCallout div.rtCallout
{
display: block;
}
div.RadToolTip_WebBlue table.rtWrapper
{
padding: 0;
margin: 0;
border-collapse: collapse;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopRight,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomRight
{
width: 3px;
height: 3px;
line-height: 1px;
font-size: 1px;
background-image: url('ToolTip/ToolTipSprites.gif');
background-color: transparent;
background-repeat: no-repeat;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopLeft
{
background-position: 0 -12px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopRight
{
background-position: right -12px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomLeft
{
background-position: 0 -63px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomRight
{
background-position: right -63px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopCenter,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomCenter
{
height: 3px;
line-height: 0px;
font-size: 1px;
background: url('ToolTip/ToolTipSprites.gif') ;
background-repeat: repeat-x;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopCenter
{
background-position: 0 -66px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomCenter
{
background-position: 0 -120px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperLeftMiddle,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperRightMiddle
{
background-image: url('ToolTip/ToolTipVerticalSprites.gif');
background-repeat: repeat-y;
font-size: 1px;
width: 3px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperLeftMiddle
{
background-position: 0 0;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperRightMiddle
{
background-position: -3px 0;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperContent
{
font: normal 12px "Segoe UI", Arial, Sans-serif;
height: 100%;
background-color: #e4e5f0;
padding: 4px;
color: #333;
}
div.RadToolTip_WebBlue div.rtTitlebar
{
color: #333;
font: normal 18px "Segoe UI", Arial, Sans-serif;
float: left;
line-height: 22px;
}
div.RadToolTip_WebBlue a.rtCloseButton
{
display: block;
float: right;
position: absolute;
right: 2px;
width: 12px;
height: 12px;
font-size: 1px;
line-height: 1px;
margin-top: 5px;
margin-right: 3px;
background-image: url('ToolTip/ToolTipSprites.gif');
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
outline: none;
}
/* RTL support begin */
div.RadToolTip_WebBlue_rtl a.rtCloseButton,
div.RadToolTip_WebBlue_rtl a.rtCloseButton:hover
{
float: left ;
text-decoration: none ;
outline: none;
left: 2px;
margin-left: 1px;
right: auto;
margin-right: auto;
}
div.RadToolTip_WebBlue_rtl div.rtTitlebar,
div.RadToolTip_WebBlue_rtl table.rtWrapper td.rtWrapperTopCenter div.rtTitlebar div
{
float: right ;
}
/* position="rtCalloutCenter" */
div.RadToolTip_WebBlue_rtl .rtCalloutCenter
{
right: 0;
left: auto;
}
/* position="rtCalloutBottomRight" */
.RadToolTip_WebBlue_rtl .rtCalloutTopLeft
{
margin-right: -20px;
left: 0;
}
/* position="rtCalloutBottomCenter" */
.RadToolTip_WebBlue_rtl .rtCalloutTopCenter
{
margin-right: 10px;
}
/* position="rtCalloutBottomLeft" */
.RadToolTip_WebBlue_rtl .rtCalloutTopRight
{
margin-right: 20px;
}
/* position="rtCalloutTopCenter" */
.RadToolTip_WebBlue_rtl .rtCalloutBottomCenter
{
margin-right: 10px ;
}
/* position="rtCalloutTopLeft" */
.RadToolTip_WebBlue_rtl .rtCalloutBottomRight
{
margin-right: 40px ;
}
/* position="rtCalloutTopRight" */
.RadToolTip_WebBlue_rtl .rtCalloutBottomLeft
{
margin-right: -20px;
left: 0;
}
/* position="rtCalloutMiddleRight" */
.RadToolTip_WebBlue_rtl .rtCalloutMiddleLeft
{
margin-right: 10px;
left: 0;
}
/* position="rtCalloutMiddleLeft" */
.RadToolTip_WebBlue_rtl .rtCalloutMiddleRight
{
margin-right: 1px;
}
/* RTL support end */
div.RadToolTip_WebBlue div.rtCallout
{
position: absolute;
height: 11px;
width: 11px;
line-height: 0px;
font-size: 1px;
background-image: url('ToolTip/Callouts.gif');
background-repeat: no-repeat;
}
/* position="rtCalloutCenter" */
div.RadToolTip_WebBlue .rtCalloutCenter
{
visibility: hidden;
}
/* position="rtCalloutBottomRight" */
.RadToolTip_WebBlue .rtCalloutTopLeft
{
margin-top: -10px;
margin-left: 20px;
background-position: 0 -22px;
}
/* position="rtCalloutBottomCenter" */
.RadToolTip_WebBlue .rtCalloutTopCenter
{
left: 50% ;
margin-top: -9px;
margin-left: -10px;
background-position: 0 0 ;
}
/* position="rtCalloutBottomLeft" */
.RadToolTip_WebBlue .rtCalloutTopRight
{
left: 100% ;
margin-top: -10px;
margin-left: -20px;
background-position: 0 -11px ;
}
/* position="rtCalloutTopCenter" */
.RadToolTip_WebBlue .rtCalloutBottomCenter
{
top: 100% ;
left: 50% ;
margin-left: -10px ;
margin-top: -1px ;
background-position: 0 -55px ;
}
/* position="rtCalloutTopLeft" */
.RadToolTip_WebBlue .rtCalloutBottomRight
{
top: 100% ;
left: 100% ;
margin-left: -40px ;
margin-top: -1px ;
background-position: 0 -66px ;
}
/* position="rtCalloutTopRight" */
.RadToolTip_WebBlue .rtCalloutBottomLeft
{
top: 100% ;
margin-left: 20px ;
margin-top: -1px ;
background-position: 0 -77px ;
}
/* position="rtCalloutMiddleRight" */
.RadToolTip_WebBlue .rtCalloutMiddleLeft
{
top: 50% ;
margin-left: -10px;
margin-top: -7px;
background-position: 0 -44px ;
}
/* position="rtCalloutMiddleLeft" */
.RadToolTip_WebBlue .rtCalloutMiddleRight
{
left: 100% ;
top: 50% ;
margin-left: -1px;
margin-top: -10px;
background-position: 0 -33px;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopCenter,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopRight,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperLeftMiddle,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperContent,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperRightMiddle,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomCenter,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomRight
{
padding: 0;
border: 0;
border-collapse: collapse;
}
Finally, when we are over and done removing selectors and properties, the new custom skin should look similar to this:
.RadToolTip_WebBlue.rtLoading
{
background: url('ToolTip/Loading.gif') no-repeat center;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopRight,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomLeft,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomRight
{
background-image: url('ToolTip/ToolTipSprites.gif');
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperTopCenter,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperBottomCenter
{
background-image: url('ToolTip/ToolTipSprites.gif') ;
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperLeftMiddle,
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperRightMiddle
{
background-image: url('ToolTip/ToolTipVerticalSprites.gif');
}
div.RadToolTip_WebBlue table.rtWrapper td.rtWrapperContent
{
background-color: #e4e5f0;
color: #333;
}
div.RadToolTip_WebBlue div.rtTitlebar
{
color: #333;
}
div.RadToolTip_WebBlue a.rtCloseButton
{
background-image: url('ToolTip/ToolTipSprites.gif');
}
div.RadToolTip_WebBlue div.rtCallout
{
background-image: url('ToolTip/Callouts.gif');
}