Kendo Menu lost color in 2019.1.115

12 posts, 0 answers
  1. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 30 Jan 2019 Link to this post

    High,

    I just updated to 2019.1.115 and have a problem with the Kendo Menu. The links have lost their blue color. See the attached screenshots for the difference. Other links are blue as expected. Can you please help me restore the blue color to the links in the Menu control?

     

    Best regards,

    Henrik

  2. Preslav
    Admin
    Preslav avatar
    570 posts

    Posted 31 Jan 2019 Link to this post

    Hello Henrik,

    Based on the provided screencasts I assume that your project uses the Bootstrap-v3 theme. Please correct me if I am wrong.

    I tested the Basic usage demo of the Menu with the 2018.3.1017 version, and it seems that the colors of the links the same:
    Having said that, could you please elaborate on if you are using custom styles to apply the blue color? If yes, please share them with me.

    I look forward to hearing from you.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 01 Feb 2019 in reply to Preslav Link to this post

    Hi Preslav,

    I use Bootstrap 3 in one project and I have updated one to Bootstrap 4.2.1, The behaviour is the same in both projects.Links are blue with 2018.3.1017 and black with 2019.1.115.

    As far as I know we do not do anything to set the color of the links in the menu, they have always been blue, which is the way I want it.

    If you can help me get the blue color back I would really appreciate it.

    Best regards,

    Henrik

  4. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 01 Feb 2019 Link to this post

    Hi again,

    Examining the two versions with the debugger tools in IE I see that in the 2018 version there is a css entry that is missing in the 2019 version:

    k-link:link, k-link:visited, k-nav.current.k-state-hover .k-link{
     color:#428bca
    }

    This is in Kendo-bootstrap-min.css, line 3281, Column: 24

    I don't know if this is any help for you.

    Best regards,

    Henrik

  5. Preslav
    Admin
    Preslav avatar
    570 posts

    Posted 01 Feb 2019 Link to this post

    Hi Henrik,

    I checked the styles again, and it seems that this CSS should not affect the overall look.

    To change the colors of the menu, I would suggest adding the following CSS to your styles:

    <style>
      .k-menu .k-item>.k-link {
        color: #428bca;
      }
    </style>



    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 01 Feb 2019 Link to this post

    Hi again,

    Thanks for the suggestion, but your CSS turned everything blue, both links and the items that are not links. We have temporarily solved it with this:

    .k-link:link, .k-link:visited, .k-nav-current.k-state-hover .k-link {
        color: #428bca !important;
    }

    This CSS makes the menu look just like it was in the prevoius Telerik version. But I had to resort to !important to solve the problem.

    Thanks for you help!

    Henrik

  7. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 10 Apr 2019 Link to this post

    Confirmed that this is an issue with 2019.1.220 using Telerik reporting. The toolbar has lost all custom theme colors after this update because of some CSS changes made by Telerik. The old version set ".k-link:link" to use the theme color, and the current version just uses ".k-link", so my toolbar buttons are black and larger than before and look ugly. I use a LESS theme.
  8. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 10 Apr 2019 in reply to Devin Link to this post

    Uploaded the images again, accidentally uploaded 2019.1.220 twice above
  9. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 10 Apr 2019 in reply to Devin Link to this post

    Added the 2018.3.911 Chrome CSS screenshot that I accidentally didn't upload above
  10. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 10 Apr 2019 Link to this post

    One more try, the forum crashes every time I try to post this attachment...
  11. Teya
    Admin
    Teya avatar
    1 posts

    Posted 12 Apr 2019 Link to this post

    Hello Devin and Henrik,

    I am stepping in for my colleague Preslav who is currently out of the office.

    Thank you for the screenshots, it helped me understand what issue exactly you were referring to and indeed you are correct. In Kendo version 2018.3.911 the links within the menu used to have a blue color. I have logged in this issue in our public repository and you can follow it here:

    https://github.com/telerik/kendo-ui-core/issues/4984

    In the meantime, in order to change only the colors of the links in the menu, instead of using !important, I would suggest increasing the specificity of the CSS link selector which will make it stronger. What I mean is adding the .k-menu class in front of the link selectors:

    .k-menu .k-link:link,
    .k-menu .k-link:visited,
    .k-menu .k-nav-current.k-state-hover .k-link {
      color: #428bca;
    }

    I have created the following Dojo where you can see this live:

    https://dojo.telerik.com/uCUKEniB/8

    I hope this would work out for you.


    Regards,
    Teya
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 12 Apr 2019 in reply to Teya Link to this post

    Thanks, I've done something similar as a temporarily fix.
Back to Top