Hi all,
It is not easy for me to set custom css into each of radcontrol...Now I have a question, I have downloaded a style sheet from telerik and read this topic already:
http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html
But I cannot change its css with the following code and the result is attached.
style sheet
ascx
It is not easy for me to set custom css into each of radcontrol...Now I have a question, I have downloaded a style sheet from telerik and read this topic already:
http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html
But I cannot change its css with the following code and the result is attached.
style sheet
.RadPanelBar_JonDan |
{ |
background: #f8f8f8 !Important; |
font-family: Verdana, Arial, helvetica, sans-serif !Important; |
font-size: 11px !Important; |
line-height: 24px !Important; |
} |
.RadPanelBar_JonDan .rpRootGroup |
{ |
border: solid 1px #f0f0f0; |
} |
.RadPanelBar_JonDan .rpRootGroup .rpLink |
{ |
background: #fff !Important; |
font-weight: bold; |
font-size: 12px; |
border: none !Important; |
color: #cc0000; |
} |
.RadPanelBar_JonDan .rpRootGroup .rpFocused, |
.RadPanelBar_JonDan .rpRootGroup .rpLink:hover |
{ |
background: #fff url('PanelBar/RootItemBg.png') 0 -1px !Important; |
color: #fff; |
} |
.RadPanelBar_JonDan .rpGroup .rpLink |
{ |
background: #f8f8f8 none !Important; |
border-top: solid 1px #fff !Important; |
border-bottom: solid 1px #f0f0f0 !Important; |
border-left: solid 1px #f8f8f8 !Important; |
border-right: solid 1px #f8f8f8 !Important; |
font-weight: normal; |
color: #666 !Important; |
} |
.RadPanelBar_JonDan .rpGroup .rpFocused, |
.RadPanelBar_JonDan .rpGroup .rpLink:hover |
{ |
background: #fff none !Important; |
border-top: solid 1px #fff !Important; |
border-bottom: solid 1px #e6e6e6 !Important; |
border-left: solid 1px #f8f8f8 !Important; |
border-right: solid 1px #f8f8f8 !Important; |
font-weight: normal; |
color: #ff0000 !Important; |
} |
.RadPanelBar_JonDan .rpOut |
{ |
border-color: #f8f8f8 !Important; |
} |
.RadPanelBar_JonDan .rpExpanded |
{ |
border-color: #f8f8f8; |
} |
/* <disabled items> */ |
.RadPanelBar_JonDan .rpDisabled, |
.RadPanelBar_JonDan .rpDisabled:hover |
{ |
color: #ccc; |
} |
.RadPanelBar_JonDan .rpDisabled:hover |
{ |
border-color: #002d96; |
} |
.RadPanelBar_JonDan .rpDisabled .rpOut, |
.RadPanelBar_JonDan .rpDisabled:hover .rpOut |
{ |
border-color: #89aee5; |
} |
/* </disabled items> */ |
/* <expand arrows> */ |
.RadPanelBar_JonDan .rpExpandable .rpText, |
.RadPanelBar_JonDan .rpExpanded .rpText |
{ |
background-color: transparent; |
background-image: url('PanelBar/Expandable.gif'); |
} |
/* </expand arrows> */ |
/* <expand arrows override> */ |
.RadPanelBar .rpExpandable .rpText, |
.RadPanelBar .rpExpanded .rpText |
{ |
padding-right: 20px; |
background-repeat: no-repeat; |
} |
.RadPanelBar_rtl .rpExpandable .rpText, |
.RadPanelBar_rtl .rpExpanded .rpText |
{ |
padding-left: 20px; |
} |
.RadPanelBar_rtl .rpGroup .rpText |
{ |
padding: 0 10px; |
} |
.RadPanelBar .rpExpandable .rpText { background-position: 100% 0; } |
.RadPanelBar .rpExpanded .rpText { background-position: 100% -176px; } |
.RadPanelBar_rtl .rpExpandable .rpText { background-position: 0 0; } |
.RadPanelBar_rtl .rpExpanded .rpText { background-position: 0 -176px; } |
.RadPanelBar .rpExpandable:hover .rpText, |
.RadPanelBar .rpExpandable.rpSelected .rpText, |
.RadPanelBar .rpExpandable.rpSelected:hover .rpText |
{ |
background-position: 100% -337px; |
} |
.RadPanelBar .rpExpanded:hover .rpText, |
.RadPanelBar .rpExpanded.rpSelected .rpText, |
.RadPanelBar .rpExpanded.rpSelected:hover .rpText |
{ |
background-position: 100% -476px; |
} |
.RadPanelBar_rtl .rpExpandable:hover .rpText, |
.RadPanelBar_rtl .rpExpandable.rpSelected .rpText, |
.RadPanelBar_rtl .rpExpandable.rpSelected:hover .rpText |
{ |
background-position: 0 -337px; |
} |
.RadPanelBar_rtl .rpExpanded:hover .rpText, |
.RadPanelBar_rtl .rpExpanded.rpSelected .rpText, |
.RadPanelBar_rtl .rpExpanded.rpSelected:hover .rpText |
{ |
background-position: 0 -476px; |
} |
/* </expand arrows override> */ |
/* <subitems> */ |
.RadPanelBar_JonDan .rpGroup |
{ |
background-color: #fff; |
} |
.RadPanelBar_JonDan .rpGroup .rpLink, |
.RadPanelBar_JonDan .rpGroup .rpTemplate |
{ |
color: #000; |
background-color: transparent; |
background-image: none; |
line-height: 20px; |
min-height: 20px; |
} |
* html .RadPanelBar_JonDan .rpGroup .rpLink { height: 20px; } |
.RadPanelBar_JonDan .rpGroup .rpLink |
{ |
background-color: transparent; |
background-image: none; |
padding: 1px; |
margin: 0 1px; |
} |
.RadPanelBar_JonDan .rpGroup .rpOut |
{ |
border-bottom: 0; |
margin-right: 3px; |
} |
/* <subitems (disabled)> */ |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled, |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover, |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut |
{ |
background-image: none; |
} |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled, |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover |
{ |
color: #999; |
text-decoration: none; |
background-color: #fff; |
border: 0; |
padding: 1px; |
} |
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut |
{ |
border-bottom: 0; |
} |
/* </subitems (disabled)> */ |
/* <subitems> */ |
<link href="../Styling/ProductPanel.css" rel="stylesheet" type="text/css" /> <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" DataFieldID="productID" |
DataFieldParentID="productParentID" DataSourceID="adsProducts" |
DataTextField="productTitle" DataValueField="productID" Width="250px" EnableEmbeddedSkins="false" Skin="RadPanelBar_JonDan"> |
</telerik:RadPanelBar> |