Open Closed

Theme Customization of Lepton Angular Source #730


0
paul.harriman created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: v4.0.1
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Seperated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:

I want to customize the colors used in the styles to fit our brand. Either by adding a new Style, like Style 7 or repurpose Style 1

I have seen 2 support items: https://support.abp.io/QA/Questions/460/Skinning--Theme-Customization-of-Lepton-Angular-Source

if I try this solution, i get build errors: I tried to install the missing packages, and re-build, but i cannot get by the build errors

The other support item: https://support.abp.io/QA/Questions/722/AngularUI-new-Lepton-Theme-and-change-login-screen

This solution says I need to wait for a future version of abp 4.2.

My question is can I use solution 1 and download the ABP Commerical Business (which includes the source code of all themes, of which we are). by using "abp get-source Volo.LeptonTheme" or do I need to wait for a future version abp 4.2?


17 Answer(s)
  • 0
    alper created
    Support Team

    if you have no time to wait for v4.2, you can download the source-code and customize according to your requirements. when we release v4.2 you can go return back to the original package and customize it in the recommended way.

  • 0
    paul.harriman created

    How do I download the source code? Using this command? abp get-source Volo.LeptonTheme. If yes I did this and ran into build errors detailed above. I tried to install the blazor packaages to resolve the errors, but it did no work

  • 0
    alper created
    Support Team

    yes the command is correct. To fix that Blazor issue, see https://support.abp.io/QA/Questions/626/Bugs--Issues-v4X#answer-4c30b02d-0072-c6a2-5223-39f94063fb2b

    I reproduced what you faced and created an issue to the team. sorry for the problem.

  • 0
    paul.harriman created

    Hello, found the item you refered to to fix Blazor. I am expected to add an entry in the Nuget.config

    I searched for said file and it does not exist. This is what I see in the solution

    I googled this doc and found that there is a global location for this file: %AppData%\NuGet\NuGet. config. I added the entry to this file, cleaned the solution and rebuilt. If I manange nuget for the solution I see the new entry

    And I'm now down to 3 build errors:

  • 0
    paul.harriman created

    I received the ng theme code, that was sent to me from [email protected] I am integrating it as a local library. It will be cool if I can get it to work. Currently running into some build issues, but want a little more time to work it out

  • 0
    paul.harriman created

    so i finally got the library to build. the process i used was

    1. generate ng app, this app is only used to build the library
    2. in app, ng g library theme-lepton
    3. replace contents w/ dropped files to theme-lepton A. add the following packages to the app created in step 1 to build 1. "@ng-bootstrap/ng-bootstrap": "^8.0.0", 2. "@ngx-validate/core": "^0.0.13", 3. "@volo/abp.commercial.ng.ui": "^4.0.2", 4. "@volo/abp.ng.theme.lepton": "^4.0.2", 5. "@abp/ng.core": "^4.0.2", 6. "@abp/ng.theme.shared": "^4.0.2", B. Copy dist/global to dist directory so assets are included in tgz C. create tsconfig.prod.json in root, populated with something I found on the internet. this fixes ngc build error D. ng b theme-lepton, go to directory where build is, npm pack to build the tgz file E. in real app, copy tgz to a directory, uninstall @volo/abp.ng.theme.lepton, install tgz F. crank up backend, frontend, get error NullInjectorError: No provider for InjectionToken CORE_OPTIONS!

    on Monday I will upgrade the real project to the lastest npm modules for vovo, just to make sure the CORE_OPTIONS isn't a version issue. Could I get tsconfig.prod.json file with contents

  • 0
    alper created
    Support Team

    great work paul! I didn't expect this step :)

  • 0
    paul.harriman created

    ok, now the i'm on the latest preview version, i can run the "real" project without errors using a private "npm" module, as i detailed above. that's the good news. however, if I

    1. change lepton1.min.css, then npm pack, the style file that is packed is the original file, not the modified file. not sure where it is getting up the old file from. the lepton1.min.css is modified in the projects/lib, dist/theme-lepton folders. the project.json references my new "private" module.
    2. saw that the footer is a replaceble component. followed the instructions of how to replace it, it still calls the old footer and errors out trying to get appInfo.name. the replaceable component exists in the "real" project, not in the project used to build the "private" npm module.
    3. still waiting for tsconfig.prod.json file with contents

    export class AppComponent { constructor(private replaceableComponents: ReplaceableComponentsService) { this.replaceableComponents.add({ component: FooterComponent, key: eThemeLeptonComponents.ApplicationLayoutFooter, }); } }

  • 0
    Mehmet created
    Support Team

    Hi Paul

    1. The theme-lepton library gets style files from node_modules/@volo/abp.ng.theme.lepton/dist folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:
    yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton
    

    Then check the styles in dist/theme-lepton/dist/styles folder. You will see your edited styles there.

    1. You should add a variable named appInfo. This custom footer component works:
    import { EnvironmentService } from '@abp/ng.core';
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-footer',
      template: `
        <footer class="lp-footer">
          <div class="d-flex">
            <div class="mr-auto">
              <span>2019 - {{ currentYear }} © {{ appInfo.name }}</span
              ><br />
            </div>
          </div>
        </footer>
      `,
      styleUrls: ['./footer.component.scss'],
    })
    export class FooterComponent {
      currentYear = new Date().getFullYear();
    
      get appInfo() {
        return this.environment.getEnvironment().application;
      }
    
      constructor(private environment: EnvironmentService) {}
    }
    
    1. Here is the tsconfig.prod.json:
    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom"],
        "types": ["jest"]
      },
      "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
      }
    }
    

    tsconfig.json:

    {
      "extends": "./tsconfig.prod.json",
      "compilerOptions": {
        "paths": {
          "@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"],
          "@volo/abp.ng.account": ["packages/account/src/public-api.ts"],
          "@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"],
          "@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"],
          "@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"],
          "@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"],
          "@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"],
          "@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"],
          "@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"],
          "@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"],
          "@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"],
          "@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"],
          "@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"],
          "@volo/abp.ng.theme.lepton/*": ["packages/theme-lepton/src/lib/*"],
          "@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"],
          "@volo/abp.ng.language-management/config": [
            "packages/language-management/config/src/public-api.ts"
          ],
          "@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"],
          "@volo/abp.ng.text-template-management": [
            "packages/text-template-management/src/public-api.ts"
          ],
          "@volo/abp.ng.text-template-management/config": [
            "packages/text-template-management/config/src/public-api.ts"
          ]
        }
      }
    }
    
  • 0
    paul.harriman created

    I am already doing what you prescribe for the first issue. I noticed after I added the private package, it adds dependencies which I believe includes the original npm package. So my changes are stepped on. If the new functionality is encorporated into 4.1, which is still in rc, then i will wait for 4.1, then the "stepped" becomes a non issue. If all else fails I can always add a postbuild step that does the copy to the node modules. Maybe not the best solution, but it should work for a little while

    warning "@volo/abp.ng.identity > [email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0". warning "@volo/abp.ng.identity > ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0 || ^10.0.0-0". warning "@volo/abp.ng.identity > ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0 || ^10.0.0-0". warning "@volo/abp.ng.identity > ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0". warning "@volo/abp.ng.identity > ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0". warning "@volo/abp.ng.identity > ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/[email protected]^9.0.0".
    [4/4] Building fresh packages... success Saved lockfile. success Saved 3 new dependencies. info Direct dependencies └─** @volo/abp.ng.theme.lept[email protected]** info All dependencies ├─ @abp/[email protected] ├─ @volo/[email protected] └─ [email protected] Done in 9.65s.

    The error in the footer was a name collision.

  • 0
    Mehmet created
    Support Team

    Hi

    You can upgrade the version to the v4.1, this will not cause any problems. But the new functionality will be available in v4.2-preview. You can continue to use postbuild step until the v4.2 is released.

  • 0
    paul.harriman created

    Is the functionality for Lepton Angular Theme Customization available now in 4.2? I looked through the documentation for something that would tell me how to use it, but didn't see anything.

  • 0
    Mehmet created
    Support Team

    Hi,

    Actually I was thinking of informing you about this. Sorry, it got out of my mind.

    We are still working on it. We encountered unexpected problems. So we couldn't release this feature with v4.2.

    If we can solve the problems, I will inform you. Thanks in advance for your understanding.

  • 0
    tony created

    Hi, any news about this functionality? We are waiting for this too. Thanks

  • 0
    Mehmet created
    Support Team

    Hi @tony

    We're still working on this. When complete, we will notify you and provide a document about implementation of the feature.

  • 0
    MILLENNIUM created

    This solution still have problems, when you have both lepton theme source code and account source code, you cannot change the style of the theme, (you still read the value from node module)

    Hi Paul

    1. The theme-lepton library gets style files from node_modules/@volo/abp.ng.theme.lepton/dist folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:
    yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton 
    

    Then check the styles in dist/theme-lepton/dist/styles folder. You will see your edited styles there.

    1. You should add a variable named appInfo. This custom footer component works:
    import { EnvironmentService } from '@abp/ng.core'; 
    import { Component } from '@angular/core'; 
     
    @Component({ 
      selector: 'app-footer', 
      template: ` 
        <footer class="lp-footer"> 
          <div class="d-flex"> 
            <div class="mr-auto"> 
              <span>2019 - {{ currentYear }} © {{ appInfo.name }}</span 
    

    > ><br />

        &lt;/div&gt; 
      &lt;/div&gt; 
    &lt;/footer&gt; 
    

    `, styleUrls: ['./footer.component.scss'], }) export class FooterComponent { currentYear = new Date().getFullYear();

    get appInfo() { return this.environment.getEnvironment().application; }

    constructor(private environment: EnvironmentService) {} }

     
    3. Here is the `tsconfig.prod.json`:  
     
    

    { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": ["node_modules/@types"], "lib": ["es2018", "dom"], "types": ["jest"] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }

     
    `tsconfig.json`: 
     
    

    { "extends": "./tsconfig.prod.json", "compilerOptions": { "paths": { "@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"], "@volo/abp.ng.account": ["packages/account/src/public-api.ts"], "@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"], "@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"], "@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"], "@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"], "@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"], "@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"], "@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"], "@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"], "@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"], "@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"], "@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"], "@volo/abp.ng.theme.lepton/": ["packages/theme-lepton/src/lib/"], "@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"], "@volo/abp.ng.language-management/config": [ "packages/language-management/config/src/public-api.ts" ], "@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"], "@volo/abp.ng.text-template-management": [ "packages/text-template-management/src/public-api.ts" ], "@volo/abp.ng.text-template-management/config": [ "packages/text-template-management/config/src/public-api.ts" ] } } }

  • 0
    paul.harriman created

    This solution still have problems, when you have both lepton theme source code and account source code, you cannot change the style of the theme, (you still read the value from node module)

    Hi Paul

    1. The theme-lepton library gets style files from node_modules/@volo/abp.ng.theme.lepton/dist folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:
    yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton  
    

    Then check the styles in dist/theme-lepton/dist/styles folder. You will see your edited styles there.

    1. You should add a variable named appInfo. This custom footer component works:
    import { EnvironmentService } from '@abp/ng.core';  
    import { Component } from '@angular/core';  
      
    @Component({  
      selector: 'app-footer',  
      template: `  
        &lt;footer class=&quot;lp-footer&quot;&gt;  
          &lt;div class=&quot;d-flex&quot;&gt;  
            &lt;div class=&quot;mr-auto&quot;&gt;  
              &lt;span&gt;2019 - {{ currentYear }} © {{ appInfo.name }}&lt;/span  
    

    > > ><br />

        &lt;/div&gt;  
      &lt;/div&gt;  
    &lt;/footer&gt;  
    

    `,
    styleUrls: ['./footer.component.scss'],
    })
    export class FooterComponent {
    currentYear = new Date().getFullYear();

    get appInfo() {
    return this.environment.getEnvironment().application;
    }

    constructor(private environment: EnvironmentService) {}
    }

      
    3. Here is the `tsconfig.prod.json`:   
      
    

    {
    "compileOnSave": false,
    "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "types": ["jest"]
    },
    "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
    }
    }

      
    `tsconfig.json`:  
      
    

    {
    "extends": "./tsconfig.prod.json",
    "compilerOptions": {
    "paths": {
    "@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"],
    "@volo/abp.ng.account": ["packages/account/src/public-api.ts"],
    "@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"],
    "@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"],
    "@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"],
    "@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"],
    "@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"],
    "@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"],
    "@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"],
    "@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"],
    "@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"],
    "@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"],
    "@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"],
    "@volo/abp.ng.theme.lepton/": ["packages/theme-lepton/src/lib/"],
    "@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"],
    "@volo/abp.ng.language-management/config": [
    "packages/language-management/config/src/public-api.ts"
    ],
    "@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"],
    "@volo/abp.ng.text-template-management": [
    "packages/text-template-management/src/public-api.ts"
    ],
    "@volo/abp.ng.text-template-management/config": [
    "packages/text-template-management/config/src/public-api.ts"
    ]
    }
    }
    }

    Yes we are already doing what u r describing. Every new version of ABP we repeat the procedure again, so not an ideal solution. It would make things even easier if ABP would use the vars they create (perhaps they do this b/c of older browsers). Another method which we use is i load the style being used as a class in the body. then in style.scss i can create styles like

    .Style1 .lp-footer { // these styles only affect this style and not globally. this is being done so i can use Style1 as our specific brand. this allows // me to change the background color of the footer. We still run into issues where ABP uses styles that are !important that I am // not able to override. an example of this is with the pick lists and errors, like the user submitted and didn't enter the data // required (we do not disable the submit button if there are form errors, b/c we feel it's a bad user experience if the user cannot // see any visual of what is wrong with the form).
    }

    As for footer, i was able to replace the footer component with a custom footer component.