This is a migrated thread and some comments may be shown as answers.

Skin getting overridden by WebResource.axd

2 Answers 66 Views
SkinManager
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 19 Jul 2010, 08:56 PM
Hi,

I upgraded my telerik Controls to the latest version. I was changing the new skin to work like the old skins I had created for my app.
However for some things the styles were getting overwritten by styles specified in WebResource.axd.
I want to apply only the styles that I have specified in my css.

Please let me know what I am doing wrong.
I have pasted below my old css for the grid and Input. If you can help me convert the css so it works exactly like the old one I would appreciate that. Unfortunately, I am not a css person so I I am finiding it very difficult to make it run like the old css.

It would be very helpful if you provided a tool that could convert the old css to the new css.

Grid:
  
/* Telerik RadGrid Telerik / embedded skin */
  
.RadGrid_MLightning
{
    background: #F9F9F9;    
}
  
.RadGrid_MLightning,
.RadGrid_MLightning table,
.GridFilterMenu_MLightning table
{
    font: normal 9pt Tahoma;    
      
}
  
.MasterTable_MLightning
{
    border: 0px !important;
    border-collapse: separate !important;
    color: #000;
      
    /*-moz-user-select: none;*/ /*disables text selecting in Firefox to combat unpleasant visual appearance*/
}
  
  
  
.MasterTable_MLightning td
{   
    padding:0px 0px 7px 0px;
      
    border-right :0px;
}
  
.MasterTable_MLightning th
{
    background:#ffffff;
    text-align: left;
}
  
.RadGrid_MLightning td,
.RadGrid_MLightning td a
    color: #000;    
}
  
  
  
th.GridHeader_MLightning, th.ResizeHeader_MLightning
{
    background: #003e7e repeat-x 0 100%;
    border-right: solid 1px #FFFFFF;
    border-bottom: solid 1px #003e7e;
    border-top: solid 1px #003e7e;
    height: 16px;
    color: #ffffff;
    font-family:Tahoma;
}
  
th.GridHeader_MLightning,
th.ResizeHeader_MLightning
{
    padding:3px;
}
  
.GridHeader_MLightning a
{
    color: #ffffff;
    text-decoration: none;
}
  
td.GridHeader_MLightning input
{
    float: left;
    border: solid 1px #666;
    background: #fafafa;
    font: bold 11px Verdana, Arial, Sans-serif;
    color: #989cb0;
    height: 20px;
    vertical-align:middle;
}
  
.GridFilterRow_MLightning td
{
    border-left: 1px solid #f9f9f9; 
    background-color: #8FBCD1;  
    empty-cells: hide;
    text-align:center;
    height: 16px;
    padding:0px 0px 0px 0px;
}
  
.GridRow_MLightning td,
.GridAltRow_MLightning td,
.SelectedRow_MLightning td,
.ActiveRow_MLightning td,
.GridEditRow_MLightning td
{
    padding-top:2px;
    padding-bottom:2px;
}
.GridRow_MLightning
{
    background: #ffffff;
}
  
.GridRow_MLightning td
{
    white-space: normal;
    text-align: center;
    color: #898a8c;
    font-family: Tahoma;
    font-size: 8pt;
    padding: 10px 0px 10px 0px;
    border: solid 1px #C4C4C4;
      
}
  
.GridRow_MLightning td div
{
    text-align: left;
    padding-left: 5px;
}
  
.GridRow_MLightning td a
{
    color: #73abc9;
    font-family:Tahoma;
    font-size:8pt;
}
  
  
.GridAltRow_MLightning
{
    background: #ffffff;
}
.GridAltRow_MLightning td
{
    white-space:normal;     
    text-align: center;
    color:#898a8c;
    font-family:Tahoma;
    font-size:8pt;
    padding: 10px 0px 10px 0px; 
    border: solid 1px #C4C4C4;
}
  
.GridAltRow_MLightning td a
{
    color: #73abc9;
    font-family:Tahoma;
    font-size:8pt;
}
  
.GridAltRow_MLightning td div
{
    text-align: left;
    padding-left: 6px;
}
  
.SelectedRow_MLightning
{
    background: #707070 url( '../../App_Themes/UTC/Grid/selectedRow.gif' ) repeat-x 50% bottom;
}
.SelectedRow_MLightning td
{
    border-top: solid 1px #eaeaea;
    border-left: none;
    border-bottom: solid 1px #83c60b;
    padding-left:4px;
}
  
.GridEditRow_MLightning
{
    background-color: #ffffe1;
}
.GridEditRow_MLightning input
{
    font-size: 11px;
}
  
.ActiveRow_MLightning
{
    background: #edf2d9;
}
.ActiveRow_MLightning td,
.GridEditRow_MLightning td
{
    border-top: solid 1px #eaeaea;
    border-left: solid 1px #eaeaea;
    border-bottom: solid 1px #fefefe;
}
  
.GridRowOver_MLightning
{
    background:none #fff;
}
  
.GridPager_MLightning
{
    background: #898a8c;
    color: #ffffff;
      
}
.GridPager_MLightning td
{
    /*border: solid 1px #fff;*/
    border: 1px solid #c7c7c7;
    border-right: 0;
    color: #999;
    height: 14px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 8pt;
    background: #898a8c;
}
.GridPager_MLightning td div
{
    padding-left:0px;
    color: #ffffff;
}
  
.GridPager_MLightning td a
{
    padding-left:1px;
    color: #ffffff;
}
  
.GridPager_MLightning td a:hover,
.GridFooter_MLightning td a:hover
{
    color: #333;
}
  
.PagerLeft_MLightning *,
.PagerRight_MLightning *,
.PagerCenter_MLightning *
{
    vertical-align:middle;
}
  
.PagerLeft_MLightning,
.PagerRight_MLightning,
.sliderPagerLabel_MLightning
{
    line-height:17px;
    padding-top:2px;
}
  
.PagerLeft_MLightning
{
    float:left;
}
.PagerRight_MLightning,
.sliderPagerLabel_MLightning
{
    float:right;
    padding-right:4px;
}
.GridPager_MLightning .radslider
{
    float:left;
}
.GridPager_MLightning img
{
    border:0;
}
  
.GridPager_MLightning .radInput_MLightning
{
    vertical-align:middle;
}
  
.PagerCenter_MLightning
{
    display:block;
    text-align:center;
}
  
.GridFooter_MLightning
{
    background: #6dabaa;
    height: 16px;
    color: #666;
    line-height: 10px;
}
.GridFooter_MLightning td
{
    border: solid 2px #6dabaa;
    border-top: 1px solid #6dabaa;
    border-left: 7px solid #6dabaa;
    border-right: 7px solid #6dabaa;
}
.GridFooter_MLightning td a
{
    color: #666;
}
  
tr.GroupHeader_MLightning
{
      
    height: 22px;
}
tr.GroupHeader_MLightning td
{
    border-left:0px solid #fff;
    border-right:0;
    border-bottom: solid 1px #c2c2c2;
    padding: 7px;
}
  
.GroupHeader_MLightning td div div{top:-0.5em;}
* html .GroupHeader_MLightning td div div{top:0.4em;}
*+html .GroupHeader_MLightning td div div{top:0.4em;}
.GroupHeader_MLightning td div div div{top:0;}
  
  
  
.GroupPanel_MLightning
{
    background-color: #e8e8e8;
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #b1b1b1;
}
  
.GroupPanel_MLightning td
{
    padding: 2px 4px;
}
  
.GroupPanelItems_MLightning
{
    background: #efefef;
    color: #999999;
    border: solid 1px white;
    border-right: solid 1px #c6c6c6;
    border-bottom: solid 1px #c6c6c6;
    white-space:  nowrap;
    font-size: 10px;
}
  
.TopReorderIndicator_MLightning
{
    background: url('../../App_Themes/UTC/Grid/MoveDown.gif') no-repeat;
}
  
.BottomReorderIndicator_MLightning
{
    background: url('../../App_Themes/UTC/Grid/MoveUp.gif') no-repeat;
}
  
.GridFilterMenu_MLightning
{
    cursor:default;
      
}
  
.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning,
.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning
{
    padding:3px 4px;
}
  
.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning
{
    background:#f9f9f9;
    text-align:center;
}
  
.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning
{
    background: #FFFFFF;
    color: #333;
}
  
.GridFilterMenu_MLightning .GridFilterMenuHover_MLightning
{
    background:#c1f320;
}
  
/*AJAX Loading*/
  
.GridLoadingTemplate_MLightning
{
    background:#fff !important;
    font:normal 24px/54px arial,sans-serif;
    color:#b5ea0e;
}
  
/*loading*/
  
.LoadingPanel_MLightning {
    background: url( 'Grid/loading.gif' ) center center no-repeat #fff;
}
  
/* rtl support */
  
.RadGridRTL_MLightning th,
.RadGridRTL_MLightning td
{
    text-align:center;
}
  
.RadGridRTL_MLightning .PagerLeft_MLightning,
.RadGridRTL_MLightning .GridPager_MLightning .radslider
{
    float:left;
}
.RadGridRTL_MLightning .PagerRight_MLightning,
.RadGridRTL_MLightning .sliderPagerLabel_MLightning
{
    float:left;
}
.GridCommandRow_MLightning
{
    background: #a7a7a9;
    color: #ffffff;
}
  
.GridCommandRow_MLightning td
{
    background: #a7a7a9;
    /*border: solid 1px #c7c7c7;*/
    color: #ffffff;
    height: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 9pt;
    text-align:right;
}
  
.GridCommandRow_MLightning td a
{
    /*color: #73abc9;*/
    text-align:right;
      
}
  
Input:
  
/*Telerik RadInput M Lightning Skin*/
  
  
.datePicker {
    background-color: #F6F6F6;
    border: 1px solid #CCCCCC;
    font-family: Tahoma,verdana,sans-serif;
    font-size: 12px;
    padding: 3px;
    padding-right:0px;
}
  
/*global*/
  
.radInput_MLightning {
    font-family: tahoma;
    font-size: 9pt;
    vertical-align: middle; 
    color:#898a8c;
}
  
.radInput_MLightning table, .radInput_MLightning table td {
    border: 0;
}
  
.radInput_MLightning table {
    vertical-align: bottom;
}
  
.radInput_MLightning td {
    padding: 0;
    vertical-align: middle;
    overflow: visible; /*RadGrid*/
}
  
.radInput_MLightning td.inputCell {
    padding-right: 2px;
}
  
.radInput_MLightning textarea {
    vertical-align: middle;
    overflow: auto;
    display: block;
}
  
/*textbox states*/
  
.radEnabledCss_MLightning, .radEmptyMessageCss_MLightning, .radHoverCss_MLightning, .radFocusedCss_MLightning, .radReadOnlyCss_MLightning, .radDisabledCss_MLightning, .radNegativeCss_MLightning, .radInvalidCss_MLightning
{
    font-family: Tahoma,verdana,sans-serif;
    border: 1px solid #666666;
    background-color: #FFFFFF;
    padding: 3px;
    font-size: 9pt; 
    color:#898a8c;
}
  
.radEnabledCss_MLightning {
}
  
.radEmptyMessageCss_MLightning {
}
  
.radHoverCss_MLightning {
}
  
.radFocusedCss_MLightning {
}
  
.radReadOnlyCss_MLightning, .radDisabledCss_MLightning {
    color: gray;
    background: #eee;
}
  
.radNegativeCss_MLightning {
}
  
.radInvalidCss_MLightning {
    background: url('Input/sprite.gif') 99% -183px no-repeat;
    color: #f32800;
}
  
/*buttons*/
  
.radInput_MLightning a {
    display: block;
    text-indent: -4444px;
    overflow: hidden;
    position: relative; /*FF*/
    outline: none; /*FF*/
    z-index: 2; /*Opera*/
    background: url('Input/sprite.gif') no-repeat;
}
* html .radInput_MLightning a {
    position: static;
}
/*IE6*/
* + html .radInput_MLightning a {
    position: static;
}
/*IE7*/
  
/*go*/
  
.radInput_MLightning a.gobutton {
    width: 20px;
    height: 17px;
    line-height: 17px;
    background-position: 3px 4px;
}
  
/*spin*/
  
.radInput_MLightning a.spinbutton {
    width: 13px;
    height: 7px;
    line-height: 7px;
    margin: 0 1px;
}
  
.radInput_MLightning a.up {
    background-position: 3px -36px;
}
  
.radInput_MLightning a.down {
    background-position: 3px -64px;
    margin-top: 2px;
}
  
/*label*/
  
.radLabelCss_MLightning {
    margin: 0 4px 0 0;
    color: #000;
    white-space: nowrap;
}

2 Answers, 1 is accepted

Sort by
0
newbie
Top achievements
Rank 1
answered on 26 Jul 2010, 05:32 PM
Hi telerik Team,

Could you give me a solution for this issue.

Thanks.
0
Rick
Top achievements
Rank 2
answered on 05 Mar 2013, 04:09 PM
If you have redefined CSS classes in your own CSS file - try adding !important to the end of the line for your custom CSS classes.
Tags
SkinManager
Asked by
newbie
Top achievements
Rank 1
Answers by
newbie
Top achievements
Rank 1
Rick
Top achievements
Rank 2
Share this question
or