Remove Styles RadLinkButton

6 posts, 0 answers
  1. William
    William  avatar
    72 posts
    Member since:
    Jun 2011

    Posted 08 Dec 2011 Link to this post

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


    Thanks. 
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Dec 2011 Link to this post

    Hello,

    Each telerik control has:

    • EnableEmbeddedSkins
    • EnableEmbeddedBaseStylesheet

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

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. William
    William  avatar
    72 posts
    Member since:
    Jun 2011

    Posted 16 Dec 2011 Link to this post

    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.
  5. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 19 Dec 2011 Link to this post

    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!
  6. William
    William  avatar
    72 posts
    Member since:
    Jun 2011

    Posted 19 Dec 2011 Link to this post

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

  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 21 Dec 2011 Link to this post

    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
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017