Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Can't Style Error Message via CSS

10 Answers 199 Views
Captcha
This is a migrated thread and some comments may be shown as answers.
bdukes
Top achievements
Rank 2
bdukes asked on 14 May 2010, 06:03 PM
Is there any way that I can add a CSS class to the error message for the CAPTCHA?

Thanks,
Brian Dukes

10 Answers, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
answered on 15 May 2010, 02:09 PM
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.
0
bdukes
Top achievements
Rank 2
answered on 17 May 2010, 02:50 PM
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...
0
Pero
Telerik team
answered on 19 May 2010, 03:55 PM
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.
0
Basel Nimer
Top achievements
Rank 2
answered on 18 Jul 2010, 04:06 PM
Can i reflect theme color on CaptchaImage-color?


0
Pero
Telerik team
answered on 21 Jul 2010, 12:56 PM
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
0
Basel Nimer
Top achievements
Rank 2
answered on 21 Jul 2010, 01:21 PM
Yes, i am referring to the fore color, 

But how can i do that using CSS?
0
Pero
Telerik team
answered on 21 Jul 2010, 01:36 PM
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
0
Basel Nimer
Top achievements
Rank 2
answered on 21 Jul 2010, 01:44 PM
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?
0
Pero
Telerik team
answered on 21 Jul 2010, 01:49 PM
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
0
Basel Nimer
Top achievements
Rank 2
answered on 21 Jul 2010, 02:23 PM
Thanks
Tags
Captcha
Asked by
bdukes
Top achievements
Rank 2
Answers by
Petio Petkov
Telerik team
bdukes
Top achievements
Rank 2
Pero
Telerik team
Basel Nimer
Top achievements
Rank 2
Share this question
or