Telerik Forums
ThemeBuilder Forum
0 answers
11 views

What's the guidance on how to theme a Locked/Frozen column for the Grid using theme builder?  Right now my team is resorting to an override CSS sheet and we'd love nothing but to integrate this in the generated SCSS.

Patrick
Top achievements
Rank 1
 asked on 07 Sep 2023
1 answer
11 views

I have read the documentation, but I'm feeling confused about how to implement an optimal approach for limiting color choices to red, green, and blue in my project. I am using the themebuilder to create a customized theme, and this themebuilder provides a single CSS file that I can apply in my project. Could you please guide me on how to switch between at least three different themes, each with distinct red, green, and blue color combinations? I'm finding it challenging to grasp this process despite having read the documentation."

 This type is used in a CSS file in the provided Kendo ThemeBuilder

import React from "react";
import { AppRouter } from "@routes/route";
import "./common/main.css";
const App = () => {
  return <AppRouter />;
};
export default App;
Vessy
Telerik team
 answered on 23 Aug 2023
1 answer
37 views
We want to have a button radius set on normal buttons but the toolbar we want to remove the radius how would you go about doing that in Themebuilder?
Kammen
Telerik team
 answered on 19 Jun 2023
2 answers
58 views

Hi,

As you can imagine from the previous questions, we are integrating deeply Figma with our Kendo implementations, and so far it looks great.

3 questions that would be ideal if they are possible to execute:

  1. Do you know or do you plan to release a plugin for Figma to generate React code which incorporates Kendo components? For example if we make a layout of the dashboard like the Coffee shop example...would be great if we could generate the sample code which already has Drawer implemented with hardcoded items inside. It would be great if it already had css and html for the App bar using Kendo App bar.
    But also, if we put Grid on the page, go the extra mile to define the columns in Figma, that it gives us a starter React code definition which includes defining the Kendo Grid and appropriate columns.

    The aim is not to have a perfect functional code, but to save on writing boiler plate code by hand.

    If not with Kendo components, closest possible option or idea?


  2. Will the new plugin and addition to Themebuilder Pro support custom styles and tokens as well? For example, we use your components UI Kit, we restyle what we need, but for a title on the dashboard we are missing a style...we create a new color called $title-color, we create a new style called title-style...how can we export that together with Kendo theme changes?

    Will the new upcoming plugin be able to do that as well?

    So the idea being that we create a unified theme of the app or site which redefines both Kendo components look&feel, but also the custom html fragements as well.


  3. We create a new style...for example we have a case that we need a style for 100% transparency. And we want to apply it to one of your components, which we can in the design system...in this case a Drawer item...we basically want to put a newly created style to make our drawer components fully transparent to the main background.

    How will the Themebuilder plugin handle this and what is the path to make this happen?

 

Thank you!

Sanja

Nick Iliev
Telerik team
 answered on 15 Jun 2023
1 answer
32 views

Hi

What is the recommended way to build the Themebuilder exported scss? 

Nick Iliev
Telerik team
 answered on 14 Jun 2023
1 answer
62 views

Hi,

I know it's not directly related to ThemeBuilder, but maybe closest area to ask?

I love the UI Kits for Figma, but want to export them all to Axure and make hi fidelity prototypes with Kendo controls.

Did anyone try this?

When I just use the Axure plugin for Figma, it exports/copies the frames without styles.

 

Thnx!

 

Nick Iliev
Telerik team
 answered on 31 May 2023
1 answer
104 views

Hi,

I don't understand the workflow now that the Unite UX tool was retired.

Our designers used your Figma UI kits for our custom Kendo React App and have built our design system.

How do I get it now to code with the logic of ThemeBuilder replacing Unite UX?

 

Thank you!

Radoslav
Telerik team
 answered on 24 May 2023
1 answer
36 views

How can I right justify text in the cells (not header) of the first column in my Grid layout using ThemeBuilder Pro? Try to set the first column as shown in reference image.

Thanks!

Galin
Telerik team
 answered on 23 May 2023
2 answers
43 views
I try to set 4px border bottom green but nothing applied to the grid
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 19 Apr 2023
2 answers
574 views

Hello our company is considering using Telerik Angular UI and we have questions regarding creating and installing a custom theme.

Here are the steps we took so far: 

1) progress theme builder for angular material created a project named test-custom-theme. 

2) changed primary color and secondary to our company colors and background to a dark gray just to see that the theme is working. These are extremely simple changes our artists will do much more once we prove out the concept. 

3) exported test-custom-theme from theme builder into a zip. 

4) created a new angular project called telerik-test-app using the angular cli, installed the telerik license and activated.

5) started to follow the readme with the custom theme zip this is where things started to not work.

After generating the theme builder zip I preformed the following steps.

1) The readme says extract the custom theme folder to your application and use it as a standard npm package.

2) Changed dir to telerik-custom-theme and ran npm install

3) added the dependencies to my project's root package.json "telerik-custom-theme": "file:./telerik-custom-theme"

4) navigated to the root of my project and ran npm install. Received the following errors:

PS D:\src\Development\angular\telerik-test-app> npm install
npm ERR! code EISDIR
npm ERR! syscall symlink
npm ERR! path D:\src\Development\angular\telerik-test-app\telerik-custom-theme
npm ERR! dest D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme
npm ERR! errno -4068
npm ERR! EISDIR: illegal operation on a directory, symlink 'D:\src\Development\angular\telerik-test-app\telerik-custom-theme' -> 'D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nfisher\AppData\Local\npm-cache\_logs\2023-03-25T15_37_51_187Z-debug.log

These instructions seem simple but for some reason we are missing something can anyone help? 

Sinny
Top achievements
Rank 1
 answered on 19 Apr 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?