Merge pull request #24758 from abpframework/issue/24757

Angular - Updating the theme documents for the footer customization

docs/en/ui-themes/lepton-x-lite/angular.md

@@ -1,7 +1,7 @@
 ```json
 //[doc-seo]
 {
-    "Description": "Discover how to install and use the LeptonX Lite Angular UI theme for ABP Framework, enhancing your project's professional look effortlessly."
+  "Description": "Discover how to install and use the LeptonX Lite Angular UI theme for ABP Framework, enhancing your project's professional look effortlessly."
 }
 ```
 
@@ -69,12 +69,12 @@ export const appConfig: ApplicationConfig = {
 
 To change the logos and brand color of `LeptonX`, you have two options:
 
-1) Provide logo and application name via the Theme Shared provider (recommended)
+1. Provide logo and application name via the Theme Shared provider (recommended)
 
 ```ts
 // app.config.ts
-import { provideLogo, withEnvironmentOptions } from '@abp/ng.theme.shared';
-import { environment } from './environments/environment';
+import { provideLogo, withEnvironmentOptions } from "@abp/ng.theme.shared";
+import { environment } from "./environments/environment";
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -91,15 +91,15 @@ Ensure your environment contains the logo url and app name:
 export const environment = {
   // ...
   application: {
-    name: 'MyProjectName',
-    logoUrl: '/assets/images/logo.png',
+    name: "MyProjectName",
+    logoUrl: "/assets/images/logo.png",
   },
 };
 ```
 
 The LeptonX brand component reads these values automatically from `@abp/ng.theme.shared`.
 
-2) Or override via CSS variables in `styles.scss`
+2. Or override via CSS variables in `styles.scss`
 
 ```css
 :root {
@@ -296,10 +296,11 @@ The Mobile User-Profile component key is `eThemeLeptonXComponents.MobileUserProf
 
 ![Angular Footer Component](../../images/angular-footer.png)
 
-The Footer is the section of content at the very bottom of the site. This section of the content can be modified.
-Inject **FooterLinksService** and use the **setFooterInfo** method of **FooterLinksService**
+The Footer is the section of content at the very bottom of the site. This section of the content can be modified. The ABP Studio templates serve this option by default. You can reach the configurations under `angular/src/app/footer` directory that has a component and a configuration file.
+
+If you still prefer overriding it by yourself, remove the default configuration. Inject **FooterLinksService** and use the **setFooterInfo** method of **FooterLinksService**
 to assign path or link and description.
-**descUrl** and **footerLinks** are nullable. Constant **footerLinks** are on the right side of footer.
+The **descUrl** and **footerLinks** are nullable. Constant **footerLinks** are on the right side of footer.
 
 ```js
 ///...

docs/en/ui-themes/lepton-x/angular.md

@@ -1,7 +1,7 @@
 ```json
 //[doc-seo]
 {
-    "Description": "Learn how to integrate the LeptonX Angular UI into your project with step-by-step instructions and essential configuration tips."
+  "Description": "Learn how to integrate the LeptonX Angular UI into your project with step-by-step instructions and essential configuration tips."
 }
 ```
 
@@ -16,14 +16,12 @@ To add `LeptonX` into your existing projects, follow the steps below.
 
 Add theme-specific styles into the `styles` array of the file. Check the [Theme Configurations](../../framework/ui/angular/theme-configurations.md#lepton-x-commercial) documentation for more information.
 
-
 - At last, remove `provideThemeLepton` from `app.config.ts`, and add the following providers in `app.config.ts`
 
-
 ```ts
-import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
-import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
-// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 
+import { provideThemeLeptonX } from "@volosoft/abp.ng.theme.lepton-x";
+import { provideSideMenuLayout } from "@volosoft/abp.ng.theme.lepton-x/layouts";
+// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -37,14 +35,11 @@ export const appConfig: ApplicationConfig = {
 If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add `provideTopMenuLayout` as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
 
 ```ts
-import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
-import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
+import { provideThemeLeptonX } from "@volosoft/abp.ng.theme.lepton-x";
+import { provideTopMenuLayout } from "@volosoft/abp.ng.theme.lepton-x/layouts";
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideTopMenuLayout(),
-    provideThemeLeptonX(),
-  ],
+  providers: [provideTopMenuLayout(), provideThemeLeptonX()],
 };
 ```
 
@@ -74,6 +69,12 @@ export const appConfig: ApplicationConfig = {
 
 If everything is ok, you can remove the `@volo/abp.ng.theme.lepton` in package.json
 
+## Customizing the Footer Section
+
+You can follow the [component replacement](../../framework/ui/angular/component-replacement.md) documentation to customize the footer part. However, the ABP Studio templates serve this by default. You can reach the footer under `angular/src/app/footer` directory that has a component and a configuration file.
+
+![angular-footer-files](./images/angular-footer-files.png)
+
 ## Server Side
 
 In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow [Server Side Migration](https://docs.abp.io/en/commercial/latest/themes/lepton-x/mvc) document.