Can't Style Error Message via CSS

11 posts, 0 answers
  1. bdukes
    bdukes avatar
    14 posts
    Member since:
    Jun 2007

    Posted 14 May 2010 Link to this post

    Is there any way that I can add a CSS class to the error message for the CAPTCHA?

    Thanks,
    Brian Dukes
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 15 May 2010 Link to this post

    Hi,

    RadCaptcha's error message is rendered in a SPAN element and you can use the following CSS selector to apply style to that element:
    <style type="text/css">
            .RadCaptcha span
            {
                color:Red;
                font-size:large;
            }
        </style>

    Sincerely yours,
    Petio Petkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. bdukes
    bdukes avatar
    14 posts
    Member since:
    Jun 2007

    Posted 17 May 2010 Link to this post

    In my situation, I'm trying to incorporate the CAPTCHA control into DNN, and apply the .NormalRed CSS class to it, to make it consistent with other error messages throughout the site.  I don't really control that style, so I can't just add a selector; I really would need to add the class itself to that element...

    That span is a CustomValidator control, right?  I guess I can just iterate over the Controls collection and look for the CustomValidator, unless there's some better way to identify it...
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 19 May 2010 Link to this post

    Hi,

    There is no built-in way to set CSS class to the Error Message, except setting its fore color, by using the ForeColor property. If you need to set a custom CSS class, please use the following workaround:

    .aspx
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Please enter the code shown correctly."
                CaptchaTextBoxLabel="ENTER CODE" ForeColor="Brown">
            </telerik:RadCaptcha>
            <asp:Button ID="Button1" runat="server" Text="Verify Code" />
        </div>
        </form>
    </body>
    </html>

    .cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class Captcha_Default_Captcha : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            WebControl ctrl = RadCaptcha1.Controls[0] as WebControl;
            ctrl.CssClass = "errorMessageClass";
        }
    }


    Best wishes,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 18 Jul 2010 Link to this post

    Can i reflect theme color on CaptchaImage-color?


  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Jul 2010 Link to this post

    Hello Basel,

    If you are referring about setting the background and text color of the CaptchaImage by using themes, then yes this is possible. For example the following skin file will set green background and red text color to the CaptchaImage:

    CaptchaTheme.skin
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <telerik:RadCaptcha runat="server" CaptchaImage-BackgroundColor="Green" CaptchaImage-TextColor="Red"/>


    Best wishes,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 21 Jul 2010 Link to this post

    Yes, i am referring to the fore color, 

    But how can i do that using CSS?
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Jul 2010 Link to this post

    Hi Basel,

    This is not possible, since the CaptchaImage is an image (JPEG) and you can't style an image file. It would be the same as specifying an <img/> tag, and trying to style the actual image and not the HTML <img/> element.

    Greetings,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 21 Jul 2010 Link to this post

    understood

    the idea was to make the color works with the current theme of the  page.

    but it seems that this has to be done through server code

    Thanks again.

    BTW: one more questions, can i customise the (reload image) button? can i use my own button?
  11. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Jul 2010 Link to this post

    Hi Basel,

    The reload image button can be customized as shown in the following RadCaptcha online demo: http://demos.telerik.com/aspnet-ajax/captcha/examples/localization/defaultcs.aspx.
    The rcRefreshImage class should be used to style the refresh button.

    Sincerely yours,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 21 Jul 2010 Link to this post

    Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017