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

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

1 Answer 43 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Andre Vovan
Top achievements
Rank 1
Andre Vovan asked on 31 Oct 2008, 07:44 PM

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-stylenone !important;  
    background#f8fce0;  
}  
 
div.radtooltip_Gen2  
{  
    border-stylenone !important;  
    positionabsolute;  
    cursordefault;  
    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  
{  
    displayblock;  
}  
 
 
div.radtooltip_Gen2 table.ToolTipWrapper  
{  
    padding: 0; margin: 0;  
    border-collapsecollapse;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td  
{         
    padding: 0; margin: 0;  
    border-collapsecollapse;  
    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  
{  
    height15pxwidth4pxline-height15px;  
    padding: 0;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopCenter,  
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomCenter  
{  
    height15pxline-height15px;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipLeftMiddle  
{  
    width15px;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipRightMiddle  
{  
    width15px;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopRight,  
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipRightMiddle,  
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipBottomRight  
{  
    width5px;  
}  
 
/* -------------------------- CORNER SETTINGS END ---------------------------------- */ 
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipContent  
{  
    fontnormal 12px/18px ArialVerdanaSans-serif;  
    height: 100%;  
    color:#000;  
}  
 
div.radtooltip_Gen2 div.ToolTipTitlebar  
{     
    colorblack;  
    fontbold 12px/18px VerdanaArialSans-serif;  
    float:left;  
}  
 
div.radtooltip_Gen2 table.ToolTipWrapper td.ToolTipTopCenter div.ToolTipTitlebar div  
{  
    floatleft;  
    margin-right12px;  
    line-height21px;    
}  
 
/* close button */ 
div.radtooltip_Gen2 a.CloseButton,  
div.radtooltip_Gen2 a.CloseButton:hover  
{  
    displayblockfloatrightright;  
    width16pxline-height16pxheight16px;  
    margin-right: -5px;  
    /*background: url(ToolTip/close.gif) no-repeat;*/ 
    text-indent: -9999px;  
    outlinenone;  
}  
 
/* --------------------------------------------- TOOLTIP CALLOUT SETTINGS BEGIN --------------------------------------------- */ 
div.radtooltip_Gen2 div.ToolTipCallout  
{  
    positionabsolutetop: 0; left: 0;  
    line-height11pxheight11pxwidth11px;  
    /*background-image: url(ToolTip/Callouts.gif);*/ 
    background-repeatno-repeat;  
}  
 
/* position="Center" */ 
div.radtooltip_Gen2 .Center  
{  
    backgroundnone !important;  
}  
 
/* position="BottomRight" */ 
.radtooltip_Gen2 .TopLeft  
{  
    margin-top: -11pxmargin-left15px;  
}  
 
/* position="BottomCenter" */ 
.radtooltip_Gen2 .TopCenter  
{  
    left: 50% !important;  
    margin-top: -11pxmargin-left: -5px;  
    background-position: 0 -11px !important;  
}  
 
/* position="BottomLeft" */ 
.radtooltip_Gen2 .TopRight  
{  
    left: 100% !important;  
    margin-top: -11pxmargin-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-top0px !important;  
    background-position: 0 -66px !important;  
}  
 
/* position="TopRight" */ 
.radtooltip_Gen2 .BottomLeft  
{  
    top: 100% !important;  
    margin-left26px !important; margin-top0px !important;  
    background-position: 0 -88px !important;  
}  
 
/* position="MiddleRight" */ 
.radtooltip_Gen2 .MiddleLeft  
{  
    top: 50% !important;  
    margin-left: -11pxmargin-top: -5px;  
    background-position: 0 -44px !important;  
}  
 
/* position="MiddleLeft" */ 
.radtooltip_Gen2 .MiddleRight  
{  
    left: 100% !important; top: 50% !important;  
    margin-left0pxmargin-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;  

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 03 Nov 2008, 02:52 PM
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.
Tags
ToolTip
Asked by
Andre Vovan
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or