How to override / Replace / Change a page's layout in ABP [MVC] #8873

1 Answer(s)

• 

  0

  alper created 18 days ago

  Support Team Director

  Step-1

  There are several themes in an ABP project. I assume you are using the PRO version. In this version LeptonX is being used.
  First of all, download the source-code of LeptonX. You can use ABP Studio or CLI to download the source-code.
  Here's ABP CLI command to download the LeptonX complete source-code:

  abp get-source Volo.Abp.LeptonXTheme
  

  These are available ABP theme package names:
  Volo.Abp.LeptonTheme
  Volo.Abp.LeptonXTheme
  Volo.Abp.LeptonXLiteTheme

  ---

  Step-2

  All the layouts are stored in the following folder of LeptonX project source-code:

  lepton\aspnet-core\volo\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Layouts
  

  

  Step-3

  You can copy a layout and paste it into your web project. The important part is the directory hierarchy must be the same to override the corresponding layout. For example if you want to override the default (master) page layout, you can find it in the lepton\aspnet-core\volo\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Layouts\Application\ folder. If you are using the navigation (main) menu on the left side, then your layout is SideMenuLayout.cshtml; if you are using the navigation (main) menu on the top, then you must copy the TopMenuLayout.cshtml file into your project. As long as the directory is the same, the original LeptonX layouts will be overridden! There is no need to set *.cshtml files as embedded resources! In the following picture, you can see which layout file affects which part:

  

  Step-3 (alternative)

  You can also create your own layout completely different than the original theme and put it in any folder in your web project. To override your own custom page with your own layout, you need to add the following code to your razor page so that it'll use your custom layout, not the default LeptonX layout.

  @{
      Layout = "/Themes/LeptonX/Layouts/MyCustomLayout.cshtml";
  }
  

  

  Save Cancel