Remove Styles RadLinkButton

[William]

Is there a way to remove all of the built in styles applied to a RadLinkButton? (ie: CSS Classes: "RadButton", "RadButton_Default", "rbLinkButton")


Thanks. 

[Princy]

Hello,

Each telerik control has:

• EnableEmbeddedSkins
• EnableEmbeddedBaseStylesheet

Setting both of these to false will disable all of telerik's embedded stylesheets.

Thanks,
Princy.

[William]

I've set both of those options to "false", but using Firebug I see that the CSS classes are still being applied. If I use Firebug and manually remove those classes from the element, then the link button display's like I want it to.

[Richard]

William:

Setting the EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false" works for me. It strips out all of the CSS. I'm using RadButton v.2011.3.1115 and displaying in FireFox 8.0.1. No CSS in Firebug view.

Can you post your code?

Cheers!

[William]

Sure, see below:

<% Response.Write("<ul id=\"userDropdown\">");
Response.Write("<li class=\"userDropdown_right\"><a href=\"#\" class=\"drop\"><img src=\"../images/icons/user_group.png\" style=\"position:absolute;left:5px;border:0;\" />" + HttpContext.Current.Session["Name"].ToString() + "</a>");
Response.Write("<div class=\"dropdown align_right\" style=\"width:175px;\">");
Response.Write("<div class=\"col_2\">");
Response.Write("<h2>" + HttpContext.Current.Session["Name"].ToString() + "</h2>");
Response.Write("<h3>" + HttpContext.Current.Session["Access"].ToString() + "</h3>");
Response.Write("<a href=\"UserSettings.aspx\">Settings </a><br />");%>
<telerik:RadButton ID="userLogout" runat="server" ButtonType="LinkButton" Text="Logout" OnClick="OnUserLogoutClicked" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" />
<%Response.Write("</div></div></li></ul>"); %>

CSS

body, ul, li {
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
}

#userDropdown {
    list-style:none;
    height:43px;
    padding:0px;
    margin:0px;
}

#userDropdown li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#userDropdown li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #FFFFFF);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#FFFFFF));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#userDropdown li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #000;
    /*display:block;*/
    outline:0;
    text-decoration:none;
}

#userDropdown li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#userDropdown li .drop {
    padding-right:21px;
    padding-left:15px;
    background:url("../images/drop.png") no-repeat right 8px;
}
#userDropdown li:hover .drop {
    background:url("../images/drop.png") no-repeat right 7px;
}

.dropdown{
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));

    /* Rounded Corners
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;*/

    /* Shadow */
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #666666;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666');
}

.dropdown {width: 280px;}

#userDropdown li:hover .dropdown{
    left:-1px;
    top:auto;
}

#userDropdown .userDropdown_right {
    float:right;
    margin-right:0px;
}
#userDropdown li .align_right {
    /* Rounded Corners
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;*/
}

#userDropdown li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#userDropdown p, #userDropdown h2, #userDropdown h3, #userDropdown ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#userDropdown h2 {
    font-size:17px;
    font-weight:400;
    margin:7px 0 14px 0;
}
#userDropdown h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    color: #666666;
}
#userDropdown p {
    line-height:18px;
    margin:0 0 10px 0;
}

#userDropdown li:hover div a {
    font-size:12px;
    color:#015b86;
}
#userDropdown li:hover div a:hover {
    color:#029feb;
}

#userDropdown li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#userDropdown li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#userDropdown li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}

[Bozhidar]

Hi William,

Setting the EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false" will remove all the styles associated with the CSS classes that styles the RadButton, it will not remove the CSS classes in the rendered HTML code. So, you will have something similar to: <a href="" class="RadButton"></a>, and not styles will be applied to RadButton class, which means that it will be rendered visually exactly the same way as a the following code without any class: <a href=""></a>.

All the best,
Bozhidar
the Telerik team