How can I make a css skin without any blackbox and border?

[Andre Vovan]

I've changed the entire css and trying to make a box with white background and no border, but i am not having any luck.

the code below is the css I've modified, all i want is just plain white box without border, I tried to set the property of border = none inside tooltip, but nothing seem to work.  I've set EnableEmbeddedBaseStylesheet off and SkinID to Gen2.  would someone please give me some ideas on how to turn these borders off?  Thanks

/* r.a.d.tooltip Gen2 skin */

/* r.a.d.tooltip resize element */
div.radtooltip_Gen2.ResizeElement
{
    border-style: none !important;
    background: #f8fce0;
}

div.radtooltip_Gen2
{
    border-style: none !important;
    position: absolute;
    cursor: default;
    background: #fff;
}

div.radtooltip_Gen2.LoadingSign
{
    /*background: url(ToolTip/Loading.gif) no-repeat center !important;*/
    width: 100% !important;
    height: 100% !important;
    text-align:left !important;
    border:0;
}

div.radtooltip_Gen2 div
{
}


div.radtooltip_Gen2 div.ToolTipCallout
{
    display:none;
}

div.radtooltip_Gen2.visiblecallout
{
    /**/
}

div.radtooltip_Gen2.visiblecallout div.ToolTipCallout
{
    display: block;
}


div.radtooltip_Gen2 table.ToolTipWrapper
{
    padding: 0; margin: 0;
    border-collapse: collapse;
}

div.radtooltip_Gen2 table.ToolTipWrapper td
{
    padding: 0; margin: 0;
    border-collapse: collapse;
    background: #fff;
    text-align:left;
}

/* -------------------------- CORNER SETTINGS BEGIN ---------------------------------- */
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopLeft,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopRight,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomLeft,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomRight
{
    height: 15px; width: 4px; line-height: 15px;
    padding: 0;
}

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopCenter,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomCenter
{
    height: 15px; line-height: 15px;
}

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipLeftMiddle
{
    width: 15px;
}

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipRightMiddle
{
    width: 15px;
}

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopRight,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipRightMiddle,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomRight
{
    width: 5px;
}

/* -------------------------- CORNER SETTINGS END ---------------------------------- */

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipContent
{
    font: normal 12px/18px Arial, Verdana, Sans-serif;
    height: 100%;
    color:#000;
}

div.radtooltip_Gen2 div.ToolTipTitlebar
{
    color: black;
    font: bold 12px/18px Verdana, Arial, Sans-serif;
    float:left;
}

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopCenter div.ToolTipTitlebar div
{
    float: left;
    margin-right: 12px;
    line-height: 21px;
}

/* close button */
div.radtooltip_Gen2 a.CloseButton,
div.radtooltip_Gen2 a.CloseButton:hover
{
    display: block; float: rightright;
    width: 16px; line-height: 16px; height: 16px;
    margin-right: -5px;
    /*background: url(ToolTip/close.gif) no-repeat;*/
    text-indent: -9999px;
    outline: none;
}

/* --------------------------------------------- TOOLTIP CALLOUT SETTINGS BEGIN --------------------------------------------- */
div.radtooltip_Gen2 div.ToolTipCallout
{
    position: absolute; top: 0; left: 0;
    line-height: 11px; height: 11px; width: 11px;
    /*background-image: url(ToolTip/Callouts.gif);*/
    background-repeat: no-repeat;
}

/* position="Center" */
div.radtooltip_Gen2 .Center
{
    background: none !important;
}

/* position="BottomRight" */
.radtooltip_Gen2 .TopLeft
{
    margin-top: -11px; margin-left: 15px;
}

/* position="BottomCenter" */
.radtooltip_Gen2 .TopCenter
{
    left: 50% !important;
    margin-top: -11px; margin-left: -5px;
    background-position: 0 -11px !important;
}

/* position="BottomLeft" */
.radtooltip_Gen2 .TopRight
{
    left: 100% !important;
    margin-top: -11px; margin-left: -26px;
    background-position: 0 -22px !important;
}

/* position="TopCenter" */
.radtooltip_Gen2 .BottomCenter
{
    top: 100% !important; left: 50% !important;
    margin-left: -5px !important; margin-top: 0 !important;
    width: 100% !important;
    background-position: 0 -55px !important;
}

/* position="TopLeft" */
.radtooltip_Gen2 .BottomRight
{
    top: 100% !important; left: 100% !important;
    margin-left: -25px !important; margin-top: 0px !important;
    background-position: 0 -66px !important;
}

/* position="TopRight" */
.radtooltip_Gen2 .BottomLeft
{
    top: 100% !important;
    margin-left: 26px !important; margin-top: 0px !important;
    background-position: 0 -88px !important;
}

/* position="MiddleRight" */
.radtooltip_Gen2 .MiddleLeft
{
    top: 50% !important;
    margin-left: -11px; margin-top: -5px;
    background-position: 0 -44px !important;
}

/* position="MiddleLeft" */
.radtooltip_Gen2 .MiddleRight
{
    left: 100% !important; top: 50% !important;
    margin-left: 0px; margin-top: -5px;
    background-position: 0 -33px;
}
/* --------------------------------------------- TOOLTIP CALLOUT SETTINGS END --------------------------------------------- */

div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopLeft,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopCenter,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopRight,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipLeftMiddle,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipContent,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipRightMiddle,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomLeft,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomCenter,
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomRight
{
    padding: 0;
    border: 0;
}

[Svetlina Anati]

Hi Peter,

Please go through the following steps and then test again the project:

1. Restore the skin to its initial state - remove all the settings you have applied.
2. Put the following style at the end of the skin:
   
   

   div.radtooltip_Gen2,
   div.radtooltip_Gen2 *
   {
       border: 0 !important;
   }
   

In case this does not help, please prepare a sample, fully runnable project with all your CSS, open a new support ticket and send it to me.

Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.