Wrong Forecolor in RadToolBarButton

5 posts, 1 answers
  1. Emir Prcic
    Emir Prcic avatar
    19 posts
    Member since:
    Dec 2009

    Posted 06 Jun 2011 Link to this post

    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

  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 09 Jun 2011 Link to this post

    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

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 10 Jun 2011 Link to this post

    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

    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.

  5. Emir Prcic
    Emir Prcic avatar
    19 posts
    Member since:
    Dec 2009

    Posted 14 Jun 2011 Link to this post

    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

  6. Answer
    Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 17 Jun 2011 Link to this post

    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

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017