Hi,
I'm using RadButtons and would like to turn off the rounded corners and make the buttons look more like RadDocks with corners turned off and the RadToolBar, am I missing a property somewhere or is this going to be a CSS fudge?
Regards,
Jon
I'm using RadButtons and would like to turn off the rounded corners and make the buttons look more like RadDocks with corners turned off and the RadToolBar, am I missing a property somewhere or is this going to be a CSS fudge?
<telerik:RadButton ID="uxCancelButton" runat="server" CausesValidation="False" UseSubmitBehavior="false" Text="Cancel" OnClientClicked="CloseAdhocPopup" AutoPostBack="False" ><Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="6px"></Icon></telerik:RadButton>Regards,
Jon
9 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 25 Jun 2012, 05:41 AM
Hi Jon,
One suggestion is you can create a custom skin where default button type sprite image will be created without rounded corners, or you could use RadButton property ButtonType="LinkButton" and the button will be rendered without rounded corners, but without background gradient also. But you could use CSS gradients if you like, or background image.
Hope this helps.
Thanks,
Princy.
One suggestion is you can create a custom skin where default button type sprite image will be created without rounded corners, or you could use RadButton property ButtonType="LinkButton" and the button will be rendered without rounded corners, but without background gradient also. But you could use CSS gradients if you like, or background image.
Hope this helps.
Thanks,
Princy.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 25 Jun 2012, 09:07 AM
Hi Princy,
Good call although as I'm trying to make the site work better with all skins it could mean more work than it's worth if I use a custom skin.
I think I'll take a look and see if there is a way to override the CSS.
As it happens I have seen that I need to do both the RadButton and also normal .net buttons styled with formdecorator.... What fun.
Thanks for the advice though.
Regards,
Jon
Good call although as I'm trying to make the site work better with all skins it could mean more work than it's worth if I use a custom skin.
I think I'll take a look and see if there is a way to override the CSS.
As it happens I have seen that I need to do both the RadButton and also normal .net buttons styled with formdecorator.... What fun.
Thanks for the advice though.
Regards,
Jon
0
Hello,
It is also possible to use the LinkButton type to avoid rounded corners. Or if you like to use the Default button, with just a few CSS you could remove the background image (that makes the rounded corners), and to set some CSS border to wrap the button.
All the best,
Bozhidar
the Telerik team
It is also possible to use the LinkButton type to avoid rounded corners. Or if you like to use the Default button, with just a few CSS you could remove the background image (that makes the rounded corners), and to set some CSS border to wrap the button.
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
Jon
Top achievements
Rank 1
Rank 1
answered on 28 Jun 2012, 07:32 AM
Hi Bozhindar
I'd like to go with the LinkButton type but keep the squared corners and have the gradient image from the other button style.
Could you possibly post the CSS that I'd need to use? I'd like to avoid extracting the background image from the file so that this will work on multiple skins.
Regards,
Jon
I'd like to go with the LinkButton type but keep the squared corners and have the gradient image from the other button style.
Could you possibly post the CSS that I'd need to use? I'd like to avoid extracting the background image from the file so that this will work on multiple skins.
Regards,
Jon
0
Princy
Top achievements
Rank 2
Rank 2
answered on 28 Jun 2012, 10:36 AM
Hi Jon,
Try setting the css as follows.
ASPX:
CSS:
Thanks,
Princy.
Try setting the css as follows.
ASPX:
<telerik:RadButton ID="RadButton" ButtonType="LinkButton" CssClass="myclass" runat="server" Text="Button" ></telerik:RadButton>CSS:
<style type="text/css"> .myclass
{ -moz-box-shadow:inset 0px 1px 0px 0px #ffffff!important; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff!important; background-image:none!important; background-color:#ededed!important; border:1px solid #dcdcdc!important; display:inline-block!important; color:#777777!important; text-decoration:none!important; } .myclass:hover
{ background-color:#dfdfdf!important; } .myclass:active
{ position:relative!important; top:1px!important; }</style>Thanks,
Princy.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 28 Jun 2012, 12:24 PM
Hi Princy,
Thanks for that although I think that I misphrased something and confused matters. What I wanted to do was get rid of the rounded corners but keep the background gradient so that the button fitted in more with other controls. For clarity's sake I'm using the Office 2010 Black skin so it maybe that other skins don't have the same issue.
I have found that the skin has a mix of some curved and some straight corners on objects - rather inconsistent and annoying. Take another example of the combo box - it has rounded corners, the text box however is squared off corners so when the two are side by side on the form there is a visual disparity between the two controls.
Anyway, I'll have a look at adapting the CSS you kindly provided. I've realised that the CSS for the button uses the sliding doors technique so it's unlikely that I can use that directly for my button background :(
Regards,
Jon
Thanks for that although I think that I misphrased something and confused matters. What I wanted to do was get rid of the rounded corners but keep the background gradient so that the button fitted in more with other controls. For clarity's sake I'm using the Office 2010 Black skin so it maybe that other skins don't have the same issue.
I have found that the skin has a mix of some curved and some straight corners on objects - rather inconsistent and annoying. Take another example of the combo box - it has rounded corners, the text box however is squared off corners so when the two are side by side on the form there is a visual disparity between the two controls.
Anyway, I'll have a look at adapting the CSS you kindly provided. I've realised that the CSS for the button uses the sliding doors technique so it's unlikely that I can use that directly for my button background :(
Regards,
Jon
0
Hi,
If you like the link button, but to use the sprite gradient form the button type button, then you could use the following code, but note it is relevant for the Office2010Black skin:
Kind regards,
Bozhidar
the Telerik team
If you like the link button, but to use the sprite gradient form the button type button, then you could use the following code, but note it is relevant for the Office2010Black skin:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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> <telerik:RadCodeBlock runat="server"> <style type="text/css"> .RadButton_Office2010Black.rbLinkButton { background-color: transparent !important; /* removes link button background */ border: 1px solid #262626 !important; /* sets border colors to match the sprite image */ border-top: 0 !important; /* removes top border - it comes from the sprite image */ border-bottom: 0 !important; /* removes bottom border - it comes from the sprite image */ background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(Telerik.Web.UI.Skins.RadButton), "Telerik.Web.UI.Skins.Office2010Black.Button.ButtonSprites.png")%>'); /* get the sprite fot the button type button */ background-position: -2px -22px; /* sets the background position with minus to in the horizontal to hide the rounded conrer of the sprite */ } .RadButton_Office2010Black.rbLinkButton:hover { border: 1px solid #f7c840 !important; /* sets hover border colors to match the sprite image */ border-top: 0 !important; border-bottom: 0 !important; background-position: -2px -66px; } .RadButton_Office2010Black.rbLinkButton:active { border: 1px solid #c28b31 !important; /* sets active border colors to match the sprite image */ border-top: 0 !important; border-bottom: 0 !important; background-position: -2px -110px; } </style></telerik:RadCodeBlock></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadButton runat="server" Text="RadButton" ButtonType="LinkButton" Skin="Office2010Black"></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
Jon
Top achievements
Rank 1
Rank 1
answered on 28 Jun 2012, 01:57 PM
Many thanks for that, I'll give it a shot shortly.
Could a feature request be added for an EnableRoundedCorners flag being added to the controls that I mentioned (RadButton and RadComboBox). That would make their functionality more consistant with controls such as the RadDock.
Regards,
Jon
Could a feature request be added for an EnableRoundedCorners flag being added to the controls that I mentioned (RadButton and RadComboBox). That would make their functionality more consistant with controls such as the RadDock.
Regards,
Jon
0
Hello,
We will consider your suggestion, but note that RadDock and RadButton are different controls. And while for boxes is common to be or not to be with rounded or not rounded corners, the not decorated button (HTML inputs) in all browsers are always rendered with rounded corners. So thinking of usability rounded corners are the thing the buttons have. On the other side, it is really easy to create a button without rounded corners and a gradient (image or CSS gradient), so a new property and a lot more code to enable/disable RadButton rounded corners most probably will be pointless.
Kind regards,
Bozhidar
the Telerik team
We will consider your suggestion, but note that RadDock and RadButton are different controls. And while for boxes is common to be or not to be with rounded or not rounded corners, the not decorated button (HTML inputs) in all browsers are always rendered with rounded corners. So thinking of usability rounded corners are the thing the buttons have. On the other side, it is really easy to create a button without rounded corners and a gradient (image or CSS gradient), so a new property and a lot more code to enable/disable RadButton rounded corners most probably will be pointless.
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.