[Solved] Skin getting overridden by WebResource.axd

[newbie]

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;
}

[newbie]

Hi telerik Team,

Could you give me a solution for this issue.

Thanks.

[Rick]

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.