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

8 Answer(s)

• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  hi any updated

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  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.

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  Dear muhammedaltug,

  Many thanks for shared these steps

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  hi,

  Kindly provide me, how recompile scss after changed colors

  

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  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

  

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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

  Save Cancel