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

unable to convert font-weight to bold with the hover event

2 Answers 114 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Rafay
Top achievements
Rank 1
Rafay asked on 30 Mar 2009, 11:36 AM
Hi,

My senario is , I am using RadPanelBar in my custom control for sharepoint as a menu, and I want to have a functionality i.e. the text will be shown as bold on hover event , following is my CSS class details , any help will be highly appriciated.

.RadPanelBar_Default2006 /*sets the background color of the entire menu */
{
 background:#ACDEEC;
 font-weight:normal;
 text-decoration:none;
}
.RadPanelBar_Default2006 .rpRootGroup /* sets the border of the main menu */
{
 background: #F3F9FD url('Images/MenuSeparator.gif') repeat-x;
}
.RadPanelBar_Default2006 .rpImage /* Only for inner Image */

 position:relative;
 top:10px;
 left:1px;
}
.RadPanelBar_Default2006 .rpText  /* Applies to All the text items in the menu */
{
 color:#003399;
    text-transform:uppercase;
 font: normal 10px/18px Tahoma, Verdana, sans-serif;
 padding:0 0 0 0;
 padding-top:3px;
 border-top: solid 1px white;
 padding-bottom:5px;
}
/*To make the Text bold on mouse over currently working in FirFox only*/
.RadPanelBar_Default2006 .rpText:hover
{
 FONT-WEIGHT: bold;
 text-decoration:none;
}
.RadPanelBar_Default2006 .rpText:active
{
 FONT-WEIGHT: bold;
 text-decoration:none;
}
.RadPanelBar_Default2006 .rpLink /*this class applies to the top level menu links*/
{
 background: #fff url('Images/MainBg.gif') repeat-x;
 border-top:5px white solid;
}
.RadPanelBar_Default2006 .rpGroup .rpText /* Applies to All the text items in the menu for all the group */
{
 color: #003399;
 padding:0 0 0 0;
 padding-top:3px;
 padding-bottom:3px;
 background:#d3ecf5; /*#D3ECF5 Background Color for the submenu items */
 text-decoration:none;
 /*border-bottom: solid 2px #f5f5f5;*/
 /*border-bottom:1px #f5f5f5 solid;*/
}
/*To make the Text bold on mouse over currently working in FirFox only*/
.RadPanelBar_Default2006 .rpGroup .rpText:hover
{
 FONT-WEIGHT: bold;
 text-decoration:none;
}
.RadPanelBar_Default2006 .rpGroup .rpLink /*This sets the background for the submenu items*/
{
 background: none;
 color:#003399; /*#666;*//* Forground Color for the submenu items */
 border-top:0;
 /*border-bottom:1px #f5f5f5 solid;*/
}
.RadPanelBar_Default2006 .rpExpanded /* This class is used for setting the background Once the item is selected */
{
 background: #fff url('Images/SelectBg.gif') repeat-x;
}
.RadPanelBar_Default2006 .rpGroup .rpExpanded
{
 background: none;
 border-bottom: 0;
 color:#003399;
}
.RadPanelBar_Default2006 .rpExpanded .rpText/* is not used  */
{
 /*background: url('Images/HeaderArrowExpanded.gif') no-repeat 11px center;
 border-bottom: solid 1px #bbbbbb;
 border-top: solid 1px white;
 height:15px;
 color:#003399;
 padding: 5px 0px 5px 15px;
 font: normal 11px/18px Tahoma, Verdana, sans-serif;
 border-top: solid 1px white;*/
}
.RadPanelBar_Default2006 .rpSelected .rpText
{
 text-decoration:none;
 font-weight: bold;
}
.RadPanelBar_Default2006 .rpGroup .rpSelected .rpText /*not being used */
{ /*
 text-decoration: underline;
 font-weight: normal;
 border-bottom: solid 1px #e5e5e5;/*#f5f5f5*/
 /*background: none;
 color: #000;*/
 text-decoration:none;
 font-weight: bold;

}
.RadPanelBar_Default2006 .rpGroup .rpExpanded .rpText
{

 color: #000;
 background: none;
   background:#D3ECF5; /*silver;*/
   font-weight:bold;
   text-decoration:none;
   /*border-bottom: solid 1px #f5f5f5;*/
}
.RadPanelBar_Default2006 .rpLevel2 .rpText
{
}
.RadPanelBar_Default2006 .rpLevel3 .rpText
{
}
.RadPanelBar_Default2006 .rpLevel4 .rpText
{
}
.RadPanelBar_Default2006 .rpDisabled:hover,
.RadPanelBar_Default2006 .rpDisabled .rpText
{
 color: #ccc;
 cursor: default;
}
.RadPanelBar_Default2006 .rpGroup .rpDisabled:hover,
.RadPanelBar_Default2006 .rpGroup .rpDisabled .rpText
{
 text-decoration: none;
 background: none;
 color: #ccc;
 cursor: default;
}

 

2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 Mar 2009, 12:17 PM
Hello Rafay,

You can try adding the !important keyword in the css class as shown below and see if it helps. Since the skin definitions will override any additional css classes, you will need to put an !important keyword to the corresponding styles in order to take precedence over the preset style rendering.

styles.css:
.RadPanelBar_Default2006 .rpText:hover 
 FONT-WEIGHT: bold !important; 
 text-decoration:none

Thanks
Princy.
0
Rafay
Top achievements
Rank 1
answered on 31 Mar 2009, 12:50 AM
Hello Princy,
 
I have tried your suggestion but still no effect in IE,any other suggestions or queries feel free to discuss.

Regards,
Rafay. 
Tags
PanelBar
Asked by
Rafay
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Rafay
Top achievements
Rank 1
Share this question
or