Changing Tooltip skin "Metro"

2 posts, 0 answers
  1. John
    John avatar
    2 posts
    Member since:
    Sep 2014

    Posted 17 Sep 2014 Link to this post

    Is it possible to change the style sheet for in built skin of telerik "Metro" ? I want to change the color and my close button to make it look like the following 




    I am currently getting a circle around my close button and am unable to change color from blue to the color I need. 

    Thanks,
    Sushma.














  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Sep 2014 Link to this post

    Hello Sushma,

    It seems an image didn't make it through. You can attach it instead of attempting to paste it inline.

    On customizing the appearance of the control, you will find useful the following:

    For your convenience I prepared a small CSS example that changes the metro classic skin basic elements to red (and the expected result is attached):

    div.RadToolTip_Metro table.rtWrapper td.rtWrapperContent
    {
        background: red;
    }
     
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft
    {
        border-top: 1px solid red;
    }
     
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle
    {
        background: red;
    }
     
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
    {
        border-bottom: 1px solid red;
    }
     
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
    {
        border-left: 1px solid red;
    }
     
    div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle,
    div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight
    {
        border-right: 1px solid red;
    }
     
    div.RadToolTip_Metro .rtWrapper a.rtCloseButton
    {
        background-image: none; /* note: this will remove the X because it is part of the blue image*/
        background: red;
        border-radius: 8px;
    }



    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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