Ends in:
2 DAYS
10 HRS
49 MIN
56 SEC
Ends in:
2 D
10 H
49 M
56 S
Open Closed

Custom Theme #3399


User avatar
0
mmaldonado@emscltd.com created
  • ABP Framework version: 5.3.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes / microservices

How do I create a custom theme for my apps?


3 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

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

  • User Avatar
    0
    mmaldonado@emscltd.com created

    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

  • User Avatar
    1
    muhammedaltug created

    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";
      
```
      
      
Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35