Currently, I am in the process of designing a menu using telerik:RadImageAndTextTile. In order to give it a unique look, I followed the provided instructions available here. Below is the CSS code that I used:
.RadTile_MyCustomSkin {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
background-color: #eeeeee;
/* Loading image */ }
.RadTile_MyCustomSkin.rtileSelected {
border-color: #666; }
.RadTile_MyCustomSkin.rtileHovered {
border-color: #9f9f9f; }
.RadTile_MyCustomSkin.rtileSelected.rtileHovered {
border-color: rgba(102, 102, 102, 0.7); }
.RadTile_MyCustomSkin.rtileSelected .rtileSelectedIcon {
background-image: url('Tile/rtileSprite.png');
_background-image: url('Tile/rtileSpriteIE6.png'); }
html .RadTile_MyCustomSkin.RadTile h6.rtileTitle {
color: #333333; }
.RadTile_MyCustomSkin .rtilePeekContent {
background-color: #eeeeee; }
.RadTile_MyCustomSkin.rtileLoading,
.RadTile_MyCustomSkin .rtileLoading {
background-image: url('Common/loading_small.gif'); }
While changing the font size and color have been successful in modifying the text format within the tile, other properties such as
.RadTile_MyCustomSkin.rtileHovered { border-color: #666; }
do not seem to be affecting the skin of the tile despite attempts at modification. Any insights into what might be causing this issue would be greatly appreciated. Thank you for your help.
Below is the code snippet from the webpage:
<telerik:RadImageAndTextTile EnableEmbeddedSkins="false" Skin="MyCustomSkin" ID="tlTrow_truck" runat="server" Shape="Square" BackColor="#f70000" ImageUrl="~/tiles/towtruck.png"
Text="Tow Truck & Garage Services">
</telerik:RadImageAndTextTile>