Wrong Forecolor in RadToolBarButton

[Emir Prcic]

Hy,
we are experiencing a strange problem. We have a RadToolBar on in a WebPart used in Sharepoint 2010. We usually use the Outlook 2007 Skin, which has white Forcolor Text (when not MouseOver).
During Design in Visual Studio, all the Colors appear as they should be. However, If we deploy it to the server and run the webpart. the Color of the RadToolBarButton Text is not as it should be. If we place the mouse on the button, the now changed Text Color is as it should be at this state.

We found out, that the color attribute of the corresponding css-style is overwritten by Sharepoint:

.ms-WPBody a:link {
    color: #0072BC;
    text-decoration: none;
}
.RadToolBar_Outlook .rtbWrap, .RadToolBar_Outlook .rtbTemplate {
    color: #FFFFFF;
    font: 12px/20px "Segoe UI",Arial,sans-serif;
}

while on the other hand in the Stylesheet used when Mousever, the Telerik-CSS overwrites the Sharepoint style.

Could somebody verify this? (and maybe give a possible Solution to overcome this?)

Regards

[Kalina]

Hi Emir Prcic,

We succeeded to reproduce the issue and started investigating it, but we will need some more time.
We will update this thread when we find what causes the issue.

All the best,
Kalina
the Telerik team

[Kalina]

Hello Emir Prcic,

You are right - indeed some SharePoint 2010 css styles override the RadToolBar styles.
We can overcome this issue by adding the “.ms-WPBody a:link“ style before the toolbar in your markup and add the style attributes that we need. This will override the default style that disturbs RadToolBar appearance.

<style type="text/css">
    .ms-WPBody a:link
    {
        color: #ffffff;
        text-decoration: none;
        font: 12px/20px "Segoe UI" ,Arial,sans-serif;
    }
</style>
<telerik:RadToolBar ID="RadToolBar1" runat="server"
    EnableRoundedCorners="true" EnableShadows="true"
    Skin="Outlook">
...

I have created a sample for you - please find it attached.

Best wishes,
Kalina
the Telerik team

[Emir Prcic]

Hy

Thanks for the workaround. However, this works in IE (at least IE 9), but Firefox (for example) still shows the text in purple.

Regards

[Kalina]

Hello Emir Prcic,

Let me suggest you modify the .ms-WPBody style in this way:

<style type="text/css">
    .ms-WPBody a:link
    {
        color: #ffffff !important;
        text-decoration: none;
        font: 12px/20px "Segoe UI" ,Arial,sans-serif;
    }
</style>

Please let me know if this helps.

All the best,
Kalina
the Telerik team