Hyperlink styling

8 posts, 0 answers
  1. Den
    Den avatar
    17 posts
    Member since:
    Apr 2012

    Posted 21 May 2012 Link to this post

    Hi!

    I use RadFormDecorator for styling a form. But link(<a></>) is not styled. How can I  apply style to links?

    Thanks for any advice... 
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 21 May 2012 Link to this post

    Hi,

    Note that RadFormDecorator styles form elements only (text inputs, checkboxes, radio buttons etc.) and <a> anchor is not form element. To apply styles to links, you could use simple CSS such as:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .links
            {
                color: Lime;
            }
             
            .links:hover
            {
                color: Red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <a href="" title="" class="links">My Link</a>
        </form>
    </body>
    </html>


    Greetings,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Den
    Den avatar
    17 posts
    Member since:
    Apr 2012

    Posted 21 May 2012 Link to this post

    Thanks.
    I want to use style that is depending on selected Telerik skin. For instance, hyperlink font size should be equal to label font size. Can I do it?
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 21 May 2012 Link to this post

    Hello,

    These are basic CSS knowledge and are out of the scope of Telerik support. You could use FireBug or similar tool to find the necessary styles and apply it for the hyper links. In that particular case it should be:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .links
            {
                color: Lime;
                font-family: "Segoe UI",Arial,Helvetica,sans-serif;
                font-size: 12px;
            }
             
            .links:hover
            {
                color: Red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <a href="" title="" class="links">My Link</a>
        <label>Label</label>
        </form>
    </body>
    </html>


    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Den
    Den avatar
    17 posts
    Member since:
    Apr 2012

    Posted 21 May 2012 Link to this post

    Hello,
    I do not want to hardcode the values. Is there any common class that I can use.
    Thanks.
  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 21 May 2012 Link to this post

    Hello,

    There is no common class for hyper links. You should hard code it. Telerik provides RadControls for a lot of different elements, but we could style and colorize each different HTMl element, which in scope of maintaining and styling an application is pointless.

    Greetings,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  8. Henrik
    Henrik avatar
    23 posts
    Member since:
    Feb 2012

    Posted 01 Jan 2013 Link to this post

    Well I find it far from pointless for you to provide some standard css classes for the currently selected skin.

    Its not that rare that I need to style some of my own elements to fit some user-selected telerik-skin.

    Right now I make my own stylesheets named e.g.: "TelerikStyles_Office2007.css" or "TelerikStyles_Office2010Silver.css" and then loading them dynamicly according to the selected skin.
    They contain styles such as
    .TelerikBorder (For styling borders on panels, etc in the color of the selected skin)
    .TelerikText
    .TelerikTextHover
    .TelerikBackground

    ...and so on

    All those styles i've found and created using custom browser tools and I've only created them for a couple skins.  Adding a new telerik skin to my solution is tedious because I need to go find all those values for every new skin and since you propable already have them defined for your own controls, it seems like a waste of time.

    What I need is either a custom stylesheet for each of your skins or some kind of overview of what allready exists in your class definitions.
  9. Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 Jan 2013 Link to this post

    Hi Denis,

    You can find a list of the CSS classes used by the FormDecorator control on the following help page - http://www.telerik.com/help/aspnet-ajax/formdecorator-css-classes.html. If you need the corresponding CSS definitions, you can get the CSS resource loaded on the page.
    Please, note that the structure and names of the CSS classes and selectors has been adapted to the needs of the control itself and is generally not intended to be used as a CSS framework.
     
     For your particular case you can check the .rfdSkinnedButton CSS class, which seems to be perfect for what you wish to accomplish. Note that using the out-of-the-box CSS resources requires that this HTML tag be part of a container with a .RadForm CSS class.

    Regards,
    Niko
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017