Starts in:
2 DAYS
3 HRS
27 MIN
24 SEC
Starts in:
2 D
3 H
27 M
24 S
Open Closed

Lepton Theme, Branding: How to globally change colors, create new template lepton7.scss #2328


User avatar
0
mostafa_ibrahem22@hotmail.com created
  • ABP Framework version: v5.0 commercial
  • UI type: Angular & MVC [identity server]
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes

In the documentation, there is no information on how to use all our company brand colors with ABP commercial Lapton Theme. https://docs.abp.io/en/commercial/latest/themes/customizing-lepton-theme?UI=NG

I want to create a new template lepton7.scss in Angular & MVC [identity server] projects

how add lepton7.scss as Style7 Angular & MVC [identity server] projects Volo.Abp.LeptonTheme.Style => Style7 Volo.Abp.LeptonTheme.Style.PublicLayout=> Style7


8 Answer(s)
  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    hi any updated

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Sorry for the late response.

    You need to copy lepton7.css file and assets folder which in Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Themes/Lepton/Global directory to your PublicLayout and IdentityServer projects' wwwroot directory.

    After copying files, you need to do the Set Style Path section in Customize Lepton Theme with Custom CSS in MVC/Razor Pages UI documentation for each project

    For the angular project copy the backgrounds, fonts and imgs folders and lepton7.css to angular/src/assets directory.

    After copying files, set customStyle property to true as shown in the document and add your CSS file to your style.scss file. In this case, your scss file must include the line below

    @use './assets/lepton7.css';
    

    Information about after the customization, the style selection box will not be included in the theme settings form and ThemeLeptonModule does not load its own styles

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    hi, Kindly I want to change all colors in lepton1.scss as an example, so so I want to make changes on lepton1.scss, and after generating the lepton1.css file, I want to replace file in my project without add "Volo.LeptonTheme" module, I just only replace CSS file.

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Please follow the steps below to replace the existing CSS file

    Angular
    • Copy your style file, backgrounds and fonts folders to angular/src/assets directory.
    • Add a new path to your tsconfig file for the assets folder.
    {
      "compilerOptions": {
       // other compiler options
        "paths": {
          // other tsconfig paths
          "@assets/*": [
            "src/assets/*"
          ]
        }
      }
    }
    
    • Create a new js file in your assets folder. And add the following lines to your file
    import css from '@assets/your-css-file';
    
    export default css;
    
    • Finally, add your js file to fileReplacements array of each configuration in angular.json to replace theme lepton's js file. Look at the example below (lepton6 style replace for this example)
    {
      "projects": {
        "pro500sep": {
          "architect": {
            "build": {
              "configurations": {
                "production": {
                  "fileReplacements": [
                    // other replacements
                    {
                      "replace": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.js",
                      "with": "src/assets/your-js-file"
                    }
                  ]
                },
                "development": {
                  "fileReplacements": [
                    {
                      "replace": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.js",
                      "with": "src/assets/your-js-file"
                    }
                  ]
                }
              }
            }
          }
        }
      }
    }
    
    Identity Server and Public Layout
    • Create folder Themes/Lepton/Global/Styles for each project under the wwwroot folder.
    • Copy your style file to these directories.
    • Rename style filename with lepton-STYLE_NUMBER.css.
    • For example, for replacing lepton 6 styles in the identity server project, you need to copy like this wwwroot/Themes/Lepton/Global/Styles/letpton6.css
  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    Dear muhammedaltug,

    Many thanks for shared these steps

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    hi,

    Kindly provide me, how recompile scss after changed colors

  • User Avatar
    0
    mostafa_ibrahem22@hotmail.com created

    I download the source-code of the Lepton Theme with the following CLI command abp get-source Volo.LeptonTheme and same error appear without any updated

    Kindly Please describe how build and compile scss file to genterate letpon1.css && letpon1.rtl.css

  • User Avatar
    1
    muhammedaltug created

    Hello,

    There is a gulp file that builds styles in Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton project.

    In Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton first install packages with yarn command

    After build styles with gulp command

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06