Custom Theme #3399

3 Answer(s)

• 

  0

  maliming created 2 years ago

  Support Team Fullstack Developer

  hi

  What theme do you want to custom? Angular or MVC?

  Save Cancel
• 

  0

  mmaldonado@emscltd.com created 2 years ago

  In fact I would like to add new theme based on lepton, not to customize one of the 6, I would like to add one more to the list, and apply it to my angular projects or keep it on profile settings

  Save Cancel
• 

  1

  muhammedaltug created 2 years ago

  Hello,

  You can do it by downloading the source code. After downloading the source code you can follow the steps below for adding a new option.

  1. Yarn install Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton

  2. Create lepton7.scss under modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Themes/Lepton/Global/styles and modify like other lepton scss files.

  3. Run gulp command under modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/

  4. Copy lepton7.min.css and lepton7.rtl.min.css to projects/theme-lepton/dist/styles

  5. Create lepton7.js and lepton7.rlt.js under projects/theme-lepton/dist/styles, File contents should equal below;

     //lepton7.js

     import css from './lepton7.min.css';
     
     export default css;
     

     //lepton7.rtl.js
     import css from './lepton7.rtl.min.css';
     
     export default css;
     

  6. Add Style7 option to projects/theme-lepton/src/lib/components/settings/settings.component.html



     <!— Dashboard Style —>
     
     <div class="mb-3" *ngIf="!customStyle">
       <label for="Style" class="form-label">{{
         'LeptonThemeManagement::DisplayName:Style' | abpLocalization
       }}</label>
       <select
         class="form-select form-control valid"
         id="Style"
         name="Style"
         formControlName="style"
       >
         <option [ngValue]="0">Style1</option>
         <option [ngValue]="1">Style2</option>
         <option [ngValue]="2">Style3</option>
         <option [ngValue]="3">Style4</option>
         <option [ngValue]="4">Style5</option>
         <option [ngValue]="5">Style6</option>
         <option [ngValue]="6">Style7</option> <!— This line added —>
       </select>
     
       <span
         class="text-danger field-validation-valid"
         data-valmsg-for="Style"
         data-valmsg-replace="true"
       ></span>
     </div>
     
     <!— Dashboard Style End—>
     
     
     <!— Public Layout Style —>
     
     <div class="mb-3">
       <label for="PublicLayoutStyle" class="form-label">{{
         'LeptonThemeManagement::DisplayName:PublicLayoutStyle' | abpLocalization
       }}</label>
       <select
         class="form-select form-control valid"
         id="PublicLayoutStyle"
         name="PublicLayoutStyle"
         formControlName="publicLayoutStyle"
       >
         <option [ngValue]="0">Style1</option>
         <option [ngValue]="1">Style2</option>
         <option [ngValue]="2">Style3</option>
         <option [ngValue]="3">Style4</option>
         <option [ngValue]="4">Style5</option>
         <option [ngValue]="5">Style6</option>
         <option [ngValue]="6">Style7</option> <!— This line added —>
       </select>
     
       <span
         class="text-danger field-validation-valid"
         data-valmsg-for="PublicLayoutStyle"
         data-valmsg-replace="true"
       ></span>
     </div>
     
     <!— Public Layout Style End—>

     

  7. Add Style7 to LeptonStyle enum which placed in modules/Volo.LeptonTheme/src/Volo.Abp.LeptonTheme.Management.Domain.Shared/Volo/Abp/LeptonTheme/Management/LeptonStyle.cs

  8. Add below lines to GetStyleCssFileNameAsync metod of LeptonGlobalStyleContributor which placed in modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Bundling/LeptonGlobalStyleContributor.cs

     else if (string.Equals(style, LeptonStyle.Style6.ToString(), StringComparison.OrdinalIgnoreCase))
     {
         return $"lepton6{rtlStringExtension}.css";
     }
     // this block added start
     else if (string.Equals(style, LeptonStyle.Style7.ToString(), StringComparison.OrdinalIgnoreCase))
     {
         return $"lepton7{rtlStringExtension}.css";
     }
     // this block added end
     return $"lepton1{rtlStringExtension}.css";
     
```
     
     

  Save Cancel