- ABP Framework version: v8.3.3
- UI Type: Angular
- Database System: EF Core (SQL Server)
- Tiered (for MVC) or Auth Server Separated (for Angular): no
- Exception message and full stack trace:
- Steps to reproduce the issue:
Dear Support Team,
I hope this message finds you well. I am reaching out to request assistance with integrating the Kendo Bootstrap theme with Abp Commercial LeptonX. Our team is currently working on a project that utilizes the LeptonX theme and incorporates Telerik's Kendo UI components on a .NET Core and Angular stack. However, we are facing challenges in aligning the styling of Kendo components with the LeptonX theme.
We have attempted to use Telerik's ThemeBuilder application to customize the visual appearance of Kendo UI components, but we need expert guidance to ensure a seamless integration. Specifically, we require assistance with:
Customizing the Kendo UI components to match the LeptonX theme using ThemeBuilder.
Integrating the customized theme package into our existing project architecture that utilizes abp.iowith .NET Core and Angular.
Resolving any conflicts and ensuring that the custom theme does not break or interfere with existing styles or functionalities.
Configuration changes in abp.ioand adjustments to our build process to accommodate the new Sass and CSS files.
Your expertise in abp.iowill be crucial for the successful completion of this task, particularly in ensuring a smooth integration that is maintainable and updatable in the long term.
Thank you for your time and assistance. We look forward to your guidance on this matter.
Best regards, Akash Ghadage
1 Answer(s)
-
0
Hi Akash,
If you wanna customize our exitsing theme package
in this case it is @volosoft/abp.ng.theme.lepton-xyou can customize 2 thingsStyles (css)
- This theme built top of bootstrap classes which means you can override bootstrap classes
- Also theme lepton-x have some css classes it self (like border color, text color etc.) you can also override this
Functionality
- You can replace any part of the theme via Replaceable System
Using any theme pacakge in abp solution
Aside from
- overriding css classes
- extending or replacing any part of theme
Using 2nd css framework like tailwindcss is not a problem for abp solution it's problem it self, even if you don't use the ABP, still you couldn't use multiple css framework at the same time in your project(if you could do it conflict will be still exits) that's why you need to decide which css framework needs to be exits in your project
Using 2nd UI Component Library like (Angular Material, PrimeNG, KendoUI) in ABP solution still you can include, you can create new page and use theme's component inside of it no problem but your css classes might be occurs conflict, it is also common problem without abp, the solution of this problem is choosing one CSS Framework + UI Component Library in ABP Project overriding theme + module packages.
If you only wanna use KendoUI Component Library for abp angular project you need to also deal with creating new app-layout and overriding existing abp angular packages.
You can extends from abp component's like (UsersComponent and etc.) for existing logic just implement the UI side (HTML template)
