I have just updated my Telerik AJAX from 2012 Q2 To 2012 Q3 recently.
I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?
Attached, please find following pic:
* "Before.png" picture, which show the RadButton (Link ButtonType) in 2012 Q2 Version.
* "After.png" picture, which shown the RadButton (Link ButtonType) in 2013 Q3 Version.
Thanks
Lamk
I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?
Attached, please find following pic:
* "Before.png" picture, which show the RadButton (Link ButtonType) in 2012 Q2 Version.
* "After.png" picture, which shown the RadButton (Link ButtonType) in 2013 Q3 Version.
Thanks
Lamk
12 Answers, 1 is accepted
0
Adrian
Top achievements
Rank 2
Rank 2
answered on 18 Oct 2012, 08:20 AM
Same issue here. Also ForeColor has been changed.
Please provide a style Fix.
Please provide a style Fix.
0
Hello,
With Q3 we have improved LinkButtons styling in order to match our other input controls. In your case, the most proper solution is to create a CSS class which you could add tot he link buttons that you don`t like to have border and/or background color:
Kind regards,
Bozhidar
the Telerik team
With Q3 we have improved LinkButtons styling in order to match our other input controls. In your case, the most proper solution is to create a CSS class which you could add tot he link buttons that you don`t like to have border and/or background color:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .rbClearButton { background-color: transparent !important; border: none !important; color: #000 !important; /* optional, depending on the background */ } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSkinManager ID="rskm1" runat="server" ShowChooser="true"></telerik:RadSkinManager><br /><br /> <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload" CssClass="rbClearButton"> <Icon PrimaryIconCssClass="rbRefresh" /> </telerik:RadButton> </form></body></html>Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Adrian
Top achievements
Rank 2
Rank 2
answered on 19 Oct 2012, 07:30 AM
Wow, have to manually change 3000 RadButtons in my Project. Thanks Telerik.
0
LamKhoa
Top achievements
Rank 1
Rank 1
answered on 19 Oct 2012, 01:59 PM
I tried what you suggested and I can see that the background now is transparent, but then the hover effect of that RadButton is gone. If a link button has no hover effect, it may make user think that it is just a label text .
Thanks
Lamk.
Thanks
Lamk.
0
Hi,
Lamk, you could just add a few hover styles and make the the button to behave as you like it:
Regards,
Bozhidar
the Telerik team
Lamk, you could just add a few hover styles and make the the button to behave as you like it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> .rbClearButton, .rbClearButton:hover { background-color: transparent !important; border: none !important; color: #000 !important; /* optional, depending on the background */ } .rbClearButton:hover { border: none !important; color: #555 !important; /* optional, depending on the background */ opacity: .7; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSkinManager ID="rskm1" runat="server" ShowChooser="true"> </telerik:RadSkinManager> <br /> <br /> <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload" CssClass="rbClearButton"> <Icon PrimaryIconCssClass="rbRefresh" /> </telerik:RadButton> </form></body></html>Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Hello Adrian,
I made a compare between Default skin button type link button from Service Pack 2, Q2 2012, and Q3 2012.
You could check the attached link-button-compare.gif for more details. As you could see in both versions the buttons have border and background color. In the current version the background colors for normal and hover state are improved to match more accurate the the specific embedded theme and to look consistent with other input Telerik`s controls such as RadFormDecorator.
Would you be more specific what is the issue you are facing with the latest version of the controls and why you have to change manually more than 3000 RadButtons?
As I mentioned above the only change in that case is the color scheme improvement. If you have some specific custom CSS code that does not work already, most probably it is form the specificity of the CSS selectors in the current versions which increased with one more CSS class. If in a previous version the base style was something like that:
to override it you should add more specificity to the selector:
Now the base selector became heavier:
so, to override it you should add more specificity in the following way:
Kind regards,
Bozhidar
the Telerik team
I made a compare between Default skin button type link button from Service Pack 2, Q2 2012, and Q3 2012.
You could check the attached link-button-compare.gif for more details. As you could see in both versions the buttons have border and background color. In the current version the background colors for normal and hover state are improved to match more accurate the the specific embedded theme and to look consistent with other input Telerik`s controls such as RadFormDecorator.
Would you be more specific what is the issue you are facing with the latest version of the controls and why you have to change manually more than 3000 RadButtons?
As I mentioned above the only change in that case is the color scheme improvement. If you have some specific custom CSS code that does not work already, most probably it is form the specificity of the CSS selectors in the current versions which increased with one more CSS class. If in a previous version the base style was something like that:
.rbLinkButton {color: red;}to override it you should add more specificity to the selector:
a.rbLinkButton {color: Blue;}Now the base selector became heavier:
.RadButton.rbLinkButton {color: Red;}so, to override it you should add more specificity in the following way:
a.RadButton.rbLinkButton {color: Blue;}Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
LamKhoa
Top achievements
Rank 1
Rank 1
answered on 19 Oct 2012, 04:31 PM
I have tried your CSS, however, it is not as good as the previous version.
Attached, please take a look at:
Before.jpg : Hover style in 2012 Q2
After.jpg: Hover style in 2012 Q3, (after applied CSS)
My client have been get used to this Link Button style and I don't want to make any change to it. Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward? If this change in 2012 Q3 will be persisted as standard for next upcoming Telerik AJAX version and onward, I may have no choice but stick with 2012 Q2 forever.
Thanks
Lamk.
Attached, please take a look at:
Before.jpg : Hover style in 2012 Q2
After.jpg: Hover style in 2012 Q3, (after applied CSS)
My client have been get used to this Link Button style and I don't want to make any change to it. Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward? If this change in 2012 Q3 will be persisted as standard for next upcoming Telerik AJAX version and onward, I may have no choice but stick with 2012 Q2 forever.
Thanks
Lamk.
0
Adrian
Top achievements
Rank 2
Rank 2
answered on 22 Oct 2012, 06:21 AM
<telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload" CssClass="rbClearButton">If I have to add CssClass="rbClearButton" since means to me tons of changes.
0
Hello Lamk,
In my previous post you you I have provided a screenshot comparing link buttons form Q2 and Q3 without any CSS fixes applied. The difference comes from the fact that a visual improvement was applied to all link buttons in order to match correctly the color schemes of Themes they belong.
This what you wrote in your first post:
I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?
So, if I understand correctly, you want the button in normal state to have transparency and the hover state to use the background color from Q2 version? If this is so, here is the authentic colors from the previous version:
Note that, I am using default skin to for my example as you didn`t specified the Skin you are using. For your convenience, attached is Button.Default_Q2_12.zip containing RadButton default skin from the previous version.
As for your question:
Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward?
It is not possible to be done, as it is a solution on a global level for all controls (color improvements) and with the provided fix above you could use the Q3 version and to have the style for LinkButton from the previous one. Also it is always an option to create RadButton Custom Skin.
Greetings,
Bozhidar
the Telerik team
In my previous post you you I have provided a screenshot comparing link buttons form Q2 and Q3 without any CSS fixes applied. The difference comes from the fact that a visual improvement was applied to all link buttons in order to match correctly the color schemes of Themes they belong.
This what you wrote in your first post:
I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?
So, if I understand correctly, you want the button in normal state to have transparency and the hover state to use the background color from Q2 version? If this is so, here is the authentic colors from the previous version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> a.RadButton.RadButton_Default.rbLinkButton { background-color: transparent; border: 1px solid #666; color: #333; } a.RadButton.RadButton_Default.rbLinkButton:hover { background-color: #c5c5c5; color: #333; } </style></head><body style="background: #eee;"> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSkinManager ID="rskm1" runat="server" ShowChooser="true"> </telerik:RadSkinManager> <br /> <br /> <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload"> <Icon PrimaryIconCssClass="rbRefresh" /> </telerik:RadButton> </form></body></html>Note that, I am using default skin to for my example as you didn`t specified the Skin you are using. For your convenience, attached is Button.Default_Q2_12.zip containing RadButton default skin from the previous version.
As for your question:
Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward?
It is not possible to be done, as it is a solution on a global level for all controls (color improvements) and with the provided fix above you could use the Q3 version and to have the style for LinkButton from the previous one. Also it is always an option to create RadButton Custom Skin.
Greetings,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Hi Adrian,
I understand that if you have to add the CSS class that means a lot of changes. I would like to ask you to explain in details what is the issue you are experiencing? If it is the color scheme change you could check my last reply to Lamk, that provides the styles before the change. If it works for you, you could use the same styles in order to globally override the current link button styles without the necessity to use the CssClass property.
If you don`t use the Default skin, you should use the same cascade, but with the preferred skin in the name, if it is Black:
Put the styles in a separate stylesheet and link it to your project.
All the best,
Bozhidar
the Telerik team
I understand that if you have to add the CSS class that means a lot of changes. I would like to ask you to explain in details what is the issue you are experiencing? If it is the color scheme change you could check my last reply to Lamk, that provides the styles before the change. If it works for you, you could use the same styles in order to globally override the current link button styles without the necessity to use the CssClass property.
If you don`t use the Default skin, you should use the same cascade, but with the preferred skin in the name, if it is Black:
<style type="text/css"> a.RadButton.RadButton_Black.rbLinkButton { border: 1px solid #666; background-color: #2e2e2e; color: #fff; text-decoration: none; } a.RadButton.RadButton_Black.rbLinkButton:hover { background-color: #4f4f4f; color: #9EDA29; } </style>Put the styles in a separate stylesheet and link it to your project.
All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
LamKhoa
Top achievements
Rank 1
Rank 1
answered on 22 Feb 2013, 10:26 PM
The fix provided by Bozhidar does not work anymore after I upgraded to version 2013 Q1.
Thanks
Lamk
Thanks
Lamk
0
Accepted
Hi,
Since Q1 2013 a Breaking change was introduced for RadButton control and its rendering in order to pass HTML5 Validation: [Breaking Change] Since Q1 2013 RadButton's rendering is HTML5 compliant
In your case, you have to change the CSS in the following way:
Kind regards,
Bozhidar
the Telerik team
Since Q1 2013 a Breaking change was introduced for RadButton control and its rendering in order to pass HTML5 Validation: [Breaking Change] Since Q1 2013 RadButton's rendering is HTML5 compliant
In your case, you have to change the CSS in the following way:
span.RadButton.RadButton_Black.rbLinkButton { border: 1px solid #666; background-color: #2e2e2e; color: #fff; text-decoration: none; } span.RadButton.RadButton_Black.rbLinkButton:hover { background-color: #4f4f4f; color: #9EDA29;}Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.