Hi guys,
I have a particular need on a project I'm working on: I need to change the background image of the RadToolbar's buttons when the user moves the mouse over them or click on them.
The problem is that I have different background images.
So, if you click/mouse over on the first button I need to change it's background to image1.png, on the second button to image2.png, and so on.
ButtonA => Image1.png
ButtonB => Image2.png
ButtonC => Image3.png
ButtonD => Image1.png
ButtonE => Image1.png
ButtonF => Image4.png
I can't figure out how to do such a thing.
Any help is appreciated.
Thanks,
Daniele Salatti
I have a particular need on a project I'm working on: I need to change the background image of the RadToolbar's buttons when the user moves the mouse over them or click on them.
The problem is that I have different background images.
So, if you click/mouse over on the first button I need to change it's background to image1.png, on the second button to image2.png, and so on.
ButtonA => Image1.png
ButtonB => Image2.png
ButtonC => Image3.png
ButtonD => Image1.png
ButtonE => Image1.png
ButtonF => Image4.png
I can't figure out how to do such a thing.
Any help is appreciated.
Thanks,
Daniele Salatti
4 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 26 May 2011, 03:16 PM
Hello Daniele,
You can achieve this by using the hover selector.
Check out the following demo.
ToolBar / Unique Item Appearance
Thanks,
Princy.
You can achieve this by using the hover selector.
Check out the following demo.
ToolBar / Unique Item Appearance
Thanks,
Princy.
0
Daniele
Top achievements
Rank 1
answered on 27 May 2011, 10:26 AM
Hi Princy,
thank you for your answer.
I have tried following the example in the demo you linked and it almost worked.
I have to fix a couple of things and I need a little help.
The most annoying one is that even if the button has the correct CSS class in the CheckedCssClass attribute, if I move the mouse over and then out of it, it loses the CSS class it was associated to (thus losing the background image).
The following is one of the code for one of the buttons:
<telerik:RadToolBarButton Owner="rtbTopMenu" CheckOnClick="true" AllowSelfUncheck="true" Group="menutop" Text="Posta Certificata" Value="2" HoveredCssClass="tabRed" FocusedCssClass="tabRed" CheckedCssClass="tabRed"></telerik:RadToolBarButton>
And here is the CSS code:
.tabRed
{
color: #fff;
background: #fff url('../../images/tlc_bgactive_red.png') repeat-x;
}
Is there something wrong?
The second problem is that the background actually doesn't cover the whole button, leaving some pixels of space at the top and at the bottom (see attached file). I have tried playing with the CSS code but every time I manage to fix it, eventually things got screwed up somewhere else (I have a love-hate relationship with CSS). Any suggestions?
Thanks in advance,
Daniele Salatti
thank you for your answer.
I have tried following the example in the demo you linked and it almost worked.
I have to fix a couple of things and I need a little help.
The most annoying one is that even if the button has the correct CSS class in the CheckedCssClass attribute, if I move the mouse over and then out of it, it loses the CSS class it was associated to (thus losing the background image).
The following is one of the code for one of the buttons:
<telerik:RadToolBarButton Owner="rtbTopMenu" CheckOnClick="true" AllowSelfUncheck="true" Group="menutop" Text="Posta Certificata" Value="2" HoveredCssClass="tabRed" FocusedCssClass="tabRed" CheckedCssClass="tabRed"></telerik:RadToolBarButton>
And here is the CSS code:
.tabRed
{
color: #fff;
background: #fff url('../../images/tlc_bgactive_red.png') repeat-x;
}
Is there something wrong?
The second problem is that the background actually doesn't cover the whole button, leaving some pixels of space at the top and at the bottom (see attached file). I have tried playing with the CSS code but every time I manage to fix it, eventually things got screwed up somewhere else (I have a love-hate relationship with CSS). Any suggestions?
Thanks in advance,
Daniele Salatti
0
Hi Daniele,
Please try using the following css class selectors and apply them as shown in the markup below. Here you can read for the different css class selectors that are applied to the RadToolBar control. Considering the second issue that you encouner this is because the Default skin is applied to the RadToolBar control. For further information please take a look at the following help article.
Using the same approach you can apply different classes to the other RadToolBarButtons.
All the best,
Kate
the Telerik team
Please try using the following css class selectors and apply them as shown in the markup below. Here you can read for the different css class selectors that are applied to the RadToolBar control. Considering the second issue that you encouner this is because the Default skin is applied to the RadToolBar control. For further information please take a look at the following help article.
<
telerik:RadToolBarButton
runat
=
"server"
Text
=
"Button 0"
CssClass
=
"red"
HoveredCssClass
=
"redHover"
FocusedCssClass
=
"redFocus"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
runat
=
"server"
Text
=
"Button 1"
CssClass
=
"green"
HoveredCssClass
=
"redHover1"
FocusedCssClass
=
"redFocus1"
>
.
green
{
background-color
: Green
!important
;
}
.
red
{
background-color
: Red;
}
.redHover a.rtbWrap,
.redHover .rtbOut,
.redHover .rtbMid,
.redHover .rtbIn
{
font-style
:
italic
!important
;
background-image
:
none
!important
;
background-color
:
green
!important
;
}
.redFocus a.rtbWrap,
.redFocus .rtbOut,
.redFocus .rtbMid,
.redFocus .rtbIn
{
font-style
:
italic
!important
;
background-image
:
none
!important
;
background-color
:
green
!important
;
}
.redHover
1
a.rtbWrap,
.redHover
1
.rtbOut,
.redHover
1
.rtbMid,
.redHover
1
.rtbIn
{
font-style
:
italic
!important
;
background-image
:
none
!important
;
background-color
:
green
!important
;
}
.redFocus
1
a.rtbWrap,
.redFocus
1
.rtbOut,
.redFocus
1
.rtbMid,
.redFocus
1
.rtbIn
{
font-style
:
italic
!important
;
background-image
:
none
!important
;
background-color
:
green
!important
;
}
Using the same approach you can apply different classes to the other RadToolBarButtons.
All the best,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Hello Daniele,
I just noticed that the links that I sent you are broken. Here are the correct ones:
http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-css-selectors.html
http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-item-css-class.html
All the best,
Kate
the Telerik team
I just noticed that the links that I sent you are broken. Here are the correct ones:
http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-css-selectors.html
http://www.telerik.com/help/aspnet-ajax/toolbar-appearance-item-css-class.html
All the best,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.