Lepton X Lite Footer Customisation

[BenWhite27]

Is there an existing issue for this?

• I have searched the existing issues

Description

I'm creating a Blazor WebApp project, whilst I can override the footer within Blazor Web Assembly, I haven't found a way override it during pre-rendering on the MVC side of things.

There's some information in the docs for the commercial theme, but it doesn't seem to apply to the Lite version.

This means that I'm stuck with 3 non-functional links at the bottom of the application?

Reproduction Steps

No response

Expected behavior

The footer should be overridable during pre-rendering.

Actual behavior

No response

Regression?

No response

Known Workarounds

No response

Version

10.5.x

User Interface

Blazor

Database Provider

EF Core (Default)

Tiered or separate authentication server

None (Default)

Operation System

Windows (Default)

Other information

No response

[enisn]

Updated note: if Themes/LeptonXLite/Layouts/_Footer.cshtml is not hit, the page you are testing is being rendered by the Blazor layout rather than the MVC/Razor Pages layout.

For Blazor WebApp pages, replace the LeptonX Lite Footer component in the server-side Blazor project (MyProject.Blazor, or *.Blazor.WebApp in templates using the newer naming) to affect prerendered output. If the app uses InteractiveAuto/WebAssembly, add the same replacement in the client project (MyProject.Blazor.Client / *.Blazor.WebApp.Client) as well so the footer remains the same after WebAssembly takes over.

The _Footer.cshtml override applies to MVC/Razor Pages rendered by the host application. See the later comment in this thread for the full examples for both cases.

[BenWhite27]

Thanks @enisn
I'd already tried that without luck. Hopefully I'm doing something wrong and you can correct me.
I have MyProject.Blazor and MyProject.Blazor.Client and in MyProject.Blazor I've created the _Footer.cshtml file as below.

This file doesn't seem to render though, for good measure I've even added an exception, but the page renders without issue.

@{
    throw new Exception("Test");
}

Any ideas?

[enisn]

Hi,

Thanks for checking. If throwing from Themes/LeptonXLite/Layouts/_Footer.cshtml does not run, the page you are testing is rendered by the Blazor layout, not by the MVC/Razor Pages layout.

For Blazor pages, replace the LeptonX Lite Footer component. In your solution, put this replacement in the server-side Blazor project (MyProject.Blazor). In templates that use the newer naming, this is the *.Blazor.WebApp project. If you are using InteractiveAuto/WebAssembly, also add the same replacement to the client project (MyProject.Blazor.Client / *.Blazor.WebApp.Client) so the footer stays the same after WebAssembly takes over.

Example:

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite
@using Volo.Abp.DependencyInjection

@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>
            <span>Your Company</span>
        </div>
        <div class="lpx-footbar-solo-links">
            <a href="/about">About</a>
            <a href="/privacy">Privacy</a>
            <a href="/contact">Contact</a>
        </div>
    </div>
</div>

For MVC/Razor Pages rendered by the host application, override the MVC footer partial in the server project by creating this file:

Themes/LeptonXLite/Layouts/_Footer.cshtml

with your desired footer markup, for example:

<div class="lpx-footbar-container">
    <div class="lpx-footbar">
        <div class="lpx-footbar-copyright">
            <span>@DateTime.UtcNow.Year©</span>
            <span>Your Company</span>
        </div>
        <div class="lpx-footbar-solo-links">
            <a href="@Url.Content("~/about")">About</a>
            <a href="@Url.Content("~/privacy")">Privacy</a>
            <a href="@Url.Content("~/contact")">Contact</a>
        </div>
    </div>
</div>

So, for a Blazor WebApp, the practical rule is:

• MyProject.Blazor / *.Blazor.WebApp component replacement: prerendered Blazor output.
• MyProject.Blazor.Client / *.Blazor.WebApp.Client component replacement: WebAssembly output after it takes over.
• Themes/LeptonXLite/Layouts/_Footer.cshtml in the server project: MVC/Razor Pages output.

The default About / Privacy / Contact links are placeholders and can be removed or replaced using the overrides above.

[BenWhite27]

Hi @enisn

Thanks for the followup. I think I've done everything correctly; I can see that once web assembly runtime kicks in, the footer is updated with my custom content. But before that happens (pre-rendered) the content is the default from the theme.
I wonder if this is specific to the MudBlazor UI option I'm using? (I requested the source here: #25783 so I could try and figure this out myself)

So, in summary

• Web Assembly Footer override works
• MVC/Pre-rendered footer customisation doesn't work
• I'm using InteractiveWebAssembly as the @rendermode everywhere in App.razor
• I'm using the MudBlazor

This is with the same _Footer.cshtml from the previous message with the exception.