Problem applying theme or css in Kendo UI for Angular

0 Answers 51 Views
Menu Styling
Jeyganesh
Top achievements
Rank 1
Jeyganesh asked on 21 Nov 2024, 10:15 AM

Hi,

Can you please let me know the issue with my code using the css or theme? I have copied the code of building block of "Hero2" and I followed the below link to apply the theme

https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link

 

I have used the below code part in index.html.. the fonts and colors are not displaying the correct one and also there is no logo or image.

Please let me know the steps to proceed to use the building blocks in our portal

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestKendoMenu1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@9.0.0/dist/all.css" />
  <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-utils@9.0.0/dist/all.css" />
</head>
<body>
  <app-root></app-root>
</body>

</html>

 

 

 

 

 

Georgi
Telerik team
commented on 26 Nov 2024, 09:19 AM

Hi Jeyganesh,

Thank you very much for the details provided.

Indeed, you are correct that when the developer copies the HTML markup of a specific building (in this case, the Hero 2 block) and pastes it directly into an Angular application, the images, the font, and some of the styling may look off.

The reason behind this is the fact that on our website, the building blocks visualize pictures and fonts, which are internally loaded for representation purposes, but the idea is to leave the developer the freedom to load the images, logos, and font styles that fit the case-specific requirements.

As a result, rendering directly the building block in an Angular application will lead to missing assets(the photos and the font), and thus, the developer will get the result from the screenshot.

For your convenience, I am sending you an Angular application that uses the font and assets from the International Bank template, which internally reuses the Hero 2 building block and thus successfully visualizes the block. To run the app:

  1. Download and unzip the folder.
  2. Execute npm install.
  3. Run ng serve.

I hope the provided information sheds some light on the matter. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik

No answers yet. Maybe you can help?

Tags
Menu Styling
Asked by
Jeyganesh
Top achievements
Rank 1
Share this question
or