Hi everybody,
I have added a dock in the aspx page and I use Telerik skins. I add the skin stylesheet like this, in the OnInit method of the page
I have change a property of the css Dock.MySkin.css page :
But when I load the page, that class is not used. If I put the keyword !important, the class is used. but I wanted to know if there was an other way to override a style which is define in the Dock.MySkin.css.
Moreover, when I check the <head> tag in the source of the page, we can see that the stylesheet is loaded before the telerik axd.
So I wanted to know if :
- It was possible to load the stylesheet after the webresource.axd
- I want the css to be the priority on the webresource.axd, without using the keyword "!important"
Thanks for replying
I have added a dock in the aspx page and I use Telerik skins. I add the skin stylesheet like this, in the OnInit method of the page
HtmlLink lrDock = new HtmlLink();lrDock.Href = "~/style/-1/skins/MySkin/Dock.MySkin.css";lrDock.Attributes.Add("type", "text/css");lrDock.Attributes.Add("rel", "stylesheet");Page.Header.Controls.Add(lrDock);I have change a property of the css Dock.MySkin.css page :
.RadDock_MySkin.rdTop .rdRight {width: 0px;}But when I load the page, that class is not used. If I put the keyword !important, the class is used. but I wanted to know if there was an other way to override a style which is define in the Dock.MySkin.css.
Moreover, when I check the <head> tag in the source of the page, we can see that the stylesheet is loaded before the telerik axd.
<link href="../../../style/-1/skins/MySkin/Dock.MySkin.css" type="text/css" rel="stylesheet" /><link href="/dev/WebResource.axd?d=aqedTiDwmUI4QsO_0Jw61omT-LA1rFwmbV4c1GVQqcU-wKQGCetoudaQtJPuF7ZedWlBts1MIvLkr3B3WKzZshepG7nqpwP86LZM20NTk7RGF4f4b9gBIvvmp8CBaa3_B9m7IQ2&t=634320685135340310" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />So I wanted to know if :
- It was possible to load the stylesheet after the webresource.axd
- I want the css to be the priority on the webresource.axd, without using the keyword "!important"
Thanks for replying
2 Answers, 1 is accepted
0
Hello,
- It was possible to load the stylesheet after the webresource.axd
Custom stylesheet will be loaded always before the webresource.axd, there is now way to change that.
- I want the css to be the priority on the webresource.axd, without using the keyword "!important"
Yes, you could override the CSS for the controls if you use heavier selecotr than the one used in our base or skin specific stylesheet. In your case it should be done the same way:
Here I am pasting an old answer to another customer that was explained the thing with the Selectors heaviness:
To make the selecotr heavier, you should use one more HTML element in the selecotr, or ClassName or ID, or !important.
Each of them has some values - html element = 1, classname=10, ID=100, important=10 000.
Let`s use for example my previous post - the original selecotr that should be overwritten was:
It should be overwritten with the following:
If I use the selector without UL they would be with equal weight, but because the override we are using with our custom CSS file, which is loaded first, will be overridden by the base CSS, which is loaded second.
So, when you have selectors with equal weight, the latest loaded will be allied.
If I want to make the selector heavier than 32, I could use the following:
Using ID will make the selecotr much more heavier (+100) and using !important will give +10 000.
And when you are using Telerik controls usually you don`t need to override base styles with your Custom Skin, but when you want to do that, in your case with the size of the buttons, you should use heavier selector than the one used in the base CSS file.
Hope that will be helpful to guide you how to make your selectors heavier and to apply the necessary changes.
Regards,
Bojo
the Telerik team
- It was possible to load the stylesheet after the webresource.axd
Custom stylesheet will be loaded always before the webresource.axd, there is now way to change that.
- I want the css to be the priority on the webresource.axd, without using the keyword "!important"
Yes, you could override the CSS for the controls if you use heavier selecotr than the one used in our base or skin specific stylesheet. In your case it should be done the same way:
div.RadDock_MySkin .rdTop .rdRight{width: 0;}Here I am pasting an old answer to another customer that was explained the thing with the Selectors heaviness:
To make the selecotr heavier, you should use one more HTML element in the selecotr, or ClassName or ID, or !important.
Each of them has some values - html element = 1, classname=10, ID=100, important=10 000.
Let`s use for example my previous post - the original selecotr that should be overwritten was:
.RadDock .rdCenter .rdCommands a = 31 (3 classnames x 10 = 30 + one html element <a> = 1)It should be overwritten with the following:
.RadDock_Bluefin .rdCenter ul.rdCommands a = 32 (3 classnames x 10 = 30 + two html elements <a> and <ul> = 2)
If I use the selector without UL they would be with equal weight, but because the override we are using with our custom CSS file, which is loaded first, will be overridden by the base CSS, which is loaded second.
So, when you have selectors with equal weight, the latest loaded will be allied.
If I want to make the selector heavier than 32, I could use the following:
.RadDock_Bluefin .rdCenter ul.rdCommands li a - it will give me 33 ordiv.RadDock_Bluefin .rdCenter ul.rdCommands li a - 34 ordiv.RadDock_Bluefin .rdTable .rdTop .rdCenter ul.rdCommands li a - which will give me really heavy selecotr of 54...and still I can make it heavier....div.RadDock_Bluefin table.rdTable tr.rdTop td.rdCenter ul.rdCommands li a - which will be 57...Using ID will make the selecotr much more heavier (+100) and using !important will give +10 000.
And when you are using Telerik controls usually you don`t need to override base styles with your Custom Skin, but when you want to do that, in your case with the size of the buttons, you should use heavier selector than the one used in the base CSS file.
Hope that will be helpful to guide you how to make your selectors heavier and to apply the necessary changes.
Regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
TANSERI
Top achievements
Rank 1
Rank 1
answered on 28 Jul 2011, 10:08 AM
Thank you for replying so fast, your answer is very clear. Thanks again.