- ABP Framework version: v4.4.3
- UI type: Blazor Server
- DB provider: EF Core
Hi,
We have developed software in the past using Syncfusion controls. This is the first time we will use Abp Framework + Commercial modules. Commercial templates come with Lepton theme pre-installed. We would like to maintain Lepton theme management and they way menu items are generated. However, we want to ovewrite the existing controls (blazorize) with Syncfusion controls. So for example the main menu (left side) to show the items in the same way as it already does but instead of using a sidebar control from blazorize to use a sidebar control from Syncfusion. I have read the articles and documentation of how you can add lepton theme module inside your solution and change the reference from nuget to module. However, nothing changes on the ui regardless the override of files. Can you provide some steps or a sample project that shows the best way to achieve the above?
Thanks
9 Answer(s)
-
0
Hi maristides
You can replace Lepton theme package with source code via using ABP Suite:
https://support.abp.io/QA/Questions/462/How-can-I-download-Lepton-Theme-source-code#answer-443079cf-43ba-d676-cd46-39f7f66bc2fd
Then you can customize any part of the theme.
-
0
Hi enisn,
Thanks for your response. I already know about this. I have tried it as well. The problem is that when i try to overwrite a control nothing changes. It seems that theme can't be overwritten. Can you please provide an example of how main menu control could be replaced with something else?
-
0
if you replaced the source-code then you can change it in your custom Lepton project. isn't that working?
-
0
No,
For example i navigate to modules\Volo.LeptonTheme\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton\Themes\Lepton\Components\MainMenu\Default.cshtml and i comment out the entire sidebar @<div class="lp-sidebar collapse navbar-collapse d-lg-block" id="navbarSidebar"> <div class="lp-sidebar-header"> <div class="lp-toggle-sidebar"> <i class="fa fa-align-left material-icons lp-open-icon"></i> <i class="fa fa-align-justify material-icons lp-close-icon"></i> </div> </div> <div class="lp-sidebar-wrapper"> <nav role="navigation" class="lp-sidebar-navi"> <ul> @foreach (var menuItem in Model.Items) { @await Html.PartialAsync("~/Themes/Lepton/Components/MainMenu/_MenuItem.cshtml", menuItem) } </ul> </nav> </div> </div>@
but when i run the project it still shows the main menu. Do i miss something?
-
0
Hi,
As we speak i have also tried the following:
- Created a new solution with the free Template and Basic Theme
- Added all the commercial modules manually
- Added the source code of the Basic Theme in my solution
- Updated the project references
I still can't overwrite the theme. I comment out entire section and they still appear on screen. Is it possible to send you my solution for you to test?
-
0
Hi guys,
I have found a solution to the above. I have:
- Created a commercial solution
- Replaced the lepton theme with the basic theme
- Added the basic source code to my solution
- Updated the references
Now i can override the theme but i have another problem. As i said in the beginning i want to work with Syncfusion controls. I added the controls in the Blazor project as mentioned on the docs. However, the UI now is managed from the module and not Blazor project. How can i inject Syncfusion to the module as well?
-
0
Are you sure Lepton Theme is built after your changes. Can you check last change dates of lepton dll's?
-
0
Hi,
I finally got it working. The structure is a bit confusing. When i created my project using ABP Suite i chose Blazor Server as the UI and i was expecting to have one UI project (only Blazor). Importing the Lepton theme source code, I realised that there are 3 UI projects involved.
- Volo.Abp.AspNetCore.Components.Server.LeptonTheme
- Volo.Abp.AspNetCore.Components.Web.LeptonTheme
- Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton
Is there a plan to change the structure for Blazor and provide a single UI project without having any MVC parts involved?
-
0
Hi @maristides, Blazor Server template uses pages/components from both MVC and Blazor WASM. Therefore, it indirectly depends on both
Volo.Abp.AspNetCore.Components.Web.LeptonThemeandVolo.Abp.AspNetCore.Mvc.UI.Theme.Lepton.Is there a plan to change the structure for Blazor and provide a single UI project without having any MVC parts involved?
Currently, we don't plan to such a seperation.
