Browse Source
Add examples for customizing the footer in Blazor and MVC themes.
pull/22692/head
maliming
10 months ago
No known key found for this signature in database
GPG Key ID: A646B9CB645ECEA4
3 changed files with
52 additions and
1 deletions
docs/en/ui-themes/lepton-x/blazor.md
BIN
docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png
docs/en/ui-themes/lepton-x/mvc.md
@ -316,8 +316,45 @@ namespace LeptonX.DemoApp.Blazor.MyComponents
> Don't forget to remove repeated attributes from the razor page!
---
#### Customizing Footer Example
Add a new `LeptonXFooter.razor` file and override the `Footer` component.
```cs
@using Volo.Abp.DependencyInjection
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
@inherits Footer
@attribute [ExposeServices(typeof(Footer))]
@attribute [Dependency(ReplaceServices = true)]
< div class = "lpx-footbar-container" >
< div class = "lpx-footbar" >
< div class = "lpx-footbar-copyright" >
< span > @DateTime.UtcNow.Year©< / span >
< a href = "https://leptontheme.com/" target = "_blank" > Lepton ThemeXXX< / a >
< span > by< / span >
< a href = "https://volosoft.com/" target = "_blank" > Volosoft< / a >
< / div >
< div class = "lpx-footbar-solo-links" >
< a href = "#" > About< / a >
< a href = "#" > Privacy< / a >
< a href = "#" > Contact< / a >
< / div >
< / div >
< / div >
````
> If you are using **Top Menu Layout** , You can change the namespace to
```diff
- @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
+ @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu
```
Use above way to customize the other components as well.
---
## Common Components
Width:
|
Height:
|
Size: 68 KiB
@ -138,6 +138,20 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
> - **_Sidebar.cshtml**
> - **_Toolbar.cshtml**
#### Customizing Footer Example
Add the **_Footer.cshtml** file under the **Themes/LeptonX/Layouts/Application** folder to customize the footer. You can customize the **_Sidebar.cshtml** and **_Toolbar.cshtml** files as well.

```html
< div class = "text-center py-2 lpx-footer" >
< span class = "copyright-text" >
@DateTime .Now.Year © AbpSolution1< br />
< / span >
< / div >
````
### Account Layout
