This is a migrated thread and some comments may be shown as answers.

Rad Alert Background color change.

9 Answers 331 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mugdha Aditya
Top achievements
Rank 1
Mugdha Aditya asked on 30 Aug 2011, 02:49 PM
i have radalert on my web page. i wants to change back ground color of rad alert and wants to add image inside the rad alert.

how to do that?

For reference i am adding screenshot of my rad alert box.

and Above the welcome , i want to add horizontal image.

9 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 31 Aug 2011, 06:14 AM
Hello Mugdha,

You can try the following CSS to achieve your scenario.

CSS:
<style type="text/css">
 .TelerikModalOverlay
 {
   background-color: White !important;//changing background color of radalert
 }
.RadWindow .rwWindowContent .radconfirm
{
   background-image: url("Images/Alert.jpg") !important;//adding image in radalert
}
</style>

Thanks,
Princy.
0
Mugdha Aditya
Top achievements
Rank 1
answered on 31 Aug 2011, 12:33 PM
thanks princy :)

1st css is working correctly but 2nd one is not working.


0
Marin Bratanov
Telerik team
answered on 01 Sep 2011, 02:58 PM
Hello Mugdha,

Just replace radconfirm with radalert to affect the RadAlert instead of the RadConfirm :)
The following rule worked fine on my end:
.radalert
{
    background-image: url("custom-content-icon.png") !important;
}



Greetings,
Marin
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Zÿm
Top achievements
Rank 1
answered on 09 Nov 2011, 02:14 PM
And how do you change position of overlay div?

.TelerikModalOverlay
{
 position: fixed;
}

dosen't work. There is a problem when using radalert with other divs in page which uses position absolute.

0
Zÿm
Top achievements
Rank 1
answered on 09 Nov 2011, 04:16 PM
OK, all applauds to me
solved with this:
<script type="text/javascript">
            function CustomAlert(message, title) {
                var theAlert = radalert(message, 350, 150, title);
                var overlay = theAlert._modalExtender._backgroundElement;
                overlay.style.position = "fixed";
                var ow = (GetRadWindowManager()).GetActiveWindow();
                ow.MoveTo(0, 0);
            }
</script>
and in code behind added this line in button on click event (js calls this CustomAlert)
Telerik.Web.UI.RadAjaxManager.GetCurrent(Page).ResponseScripts.Add(js);
1 point for me -1 for telerik
0
Marin Bratanov
Telerik team
answered on 10 Nov 2011, 12:36 PM
Hello Sunboz,

I am glad to hear you have successfully resolved your difficulty.

A simpler option would be to make the CSS rule heavier, which will spare some JavaScript:
.TelerikModalOverlay
 {
  position: fixed !important;
 }

If you believe the issue with the modal overlay stems from our code and not from a global CSS rule that changes some property pleas share some more details on the issue you are having - the desired and actual effect, as well as the circumstances that lead to it - is it browser specific, what is the exact setup, etc. I am asking this because I have not seen erroneous behavior with the modal overlay and if there is indeed some scenario that does not work well we may need to address it. If it indeed bug in the control we will gladly reward your efforts with some telerik points.

Regards,
Marin
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
0
Zÿm
Top achievements
Rank 1
answered on 10 Nov 2011, 01:56 PM
OK, you just got from -1 to 1 :D, oh this is much simpler, thank you. The key was !important, I guess I should used it whenever i want to override default style
0
Charles Goh
Top achievements
Rank 1
answered on 06 Mar 2013, 06:10 AM
I have applied CSS  to change the background color of radconfirm. But it does not work (attachment). Any one can tell me how to do that. Thank you so much.
<style type="text/css">
           .RadWindow .rwWindowContent .radconfirm
            { 
                background-color:rgb(219,238,244) !important;
            }  
            
            .radconfirm
            { 
                background-color:rgb(219,238,244) !important;
            }            
            .TelerikModalOverlay
             {
               background-color: rgb(219,238,244) !important;
             }
 </style> 
0
Princy
Top achievements
Rank 2
answered on 06 Mar 2013, 07:09 AM
Hello,

Try overriding the default CSS as follows. Please have a look at the attachment too.

CSS:
<style type="text/css">
    .RadWindow .rwWindowContent
    {
        background-color: #92F3FD !important;
    }
</style>

Thanks,
Princy.
Tags
Window
Asked by
Mugdha Aditya
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Mugdha Aditya
Top achievements
Rank 1
Marin Bratanov
Telerik team
Zÿm
Top achievements
Rank 1
Charles Goh
Top achievements
Rank 1
Share this question
or