Rad Alert Background color change.

10 posts, 1 answers
  1. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 30 Aug 2011 Link to this post

    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.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Aug 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 31 Aug 2011 Link to this post

    thanks princy :)

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


  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 01 Sep 2011 Link to this post

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

  6. Zÿm
    Zÿm avatar
    26 posts
    Member since:
    Jun 2010

    Posted 09 Nov 2011 Link to this post

    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.

  7. Zÿm
    Zÿm avatar
    26 posts
    Member since:
    Jun 2010

    Posted 09 Nov 2011 Link to this post

    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
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Nov 2011 Link to this post

    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
  9. Zÿm
    Zÿm avatar
    26 posts
    Member since:
    Jun 2010

    Posted 10 Nov 2011 Link to this post

    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
  10. Charles Goh
    Charles Goh avatar
    13 posts
    Member since:
    Nov 2004

    Posted 06 Mar 2013 Link to this post

    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> 
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Mar 2013 Link to this post

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