Ends in:
2 DAYS
1 HR
21 MIN
42 SEC
Ends in:
2 D
1 H
21 M
42 S
Open Closed

Public site menu placement left #3383


User avatar
0
jfistelmann created

Hey :)

This is somewhat a follow up of #3241

When removing lp-topmenu in aspnet-core\src\MyCompanyName.MyProjectName.Web.Public\Themes\Lepton\Layouts\Public\Default.cshtml this leads to some pretty weird behavior.

Background

if you scroll a bit, it looks like this:

I removed that using

@media only screen and (min-width: 992px) {
    .landing-header {
        background: none !important;
        height: 100%;
    }
}

But is that good?

The footer also looks weird

So we now have:

@media only screen and (min-width: 992px) {
    .landing-header {
        background: none !important;
        height: 100%;
    }

    .lp-footer {
        background: none;
    }
}

language and login still on top - menu hover weird

As you can see here, the language selection and login menu are still on top and it does not align correctly. And as you can see - I hovered over "Home". Also not looking as it's supposed to.

Got no solution for that >.<

Page rebuilds/ menu flickering

The weirdest thing though is this. When navigating to a new page, the menu takes it space after the page has loaded. This does not look very nice as you can see.

I tried changing the css to the following:

@media only screen and (min-width: 992px) {
    .landing-header {
        background: none !important;
        height: 100%;
    }

    .lp-footer {
        background: none;
    }

    .lp-sidebar {
        transition: none !important;
        background: linear-gradient(7deg, #303f9f, #7b1fa2) !important;
    }

    .lp-content {
        padding: 0 36px 24px 300px !important;
    }
}

This made it kind of worse but shows a bit better what actually happens.

There may be more issues, but that are the ones I experienced so far. And I am not sure if I am even supposed to make these css changes of if there's something already built in.


10 Answer(s)
  • User Avatar
    0
    alper created
    Support Team Director

    write your ABP version? your UI Framework?

  • User Avatar
    0
    jfistelmann created

    write your ABP version? your UI Framework?

    Sorry, 5.2.1 and Blazor server side. But as this is related to the public site it's ASP .NET

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi jfistelmann

    We will check this.

  • User Avatar
    0
    jfistelmann created

    hi jfistelmann

    We will check this.

    Hey maliming,

    thank you very much. I just received an email that a ServiceBot closed this ticket. Was that on intention?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Here's another way:

    Update the MyCompanyName.MyProjectName.Web.Public\Pages\_ViewStart.cshtml and using the GetApplicationLayout

    @using Volo.Abp.AspNetCore.Mvc.UI.Theming
    @inject IThemeManager ThemeManager
    @{
        Layout = ThemeManager.CurrentTheme.GetApplicationLayout(); //GetPublicLayout
    }
    
    
  • User Avatar
    0
    jfistelmann created

    hi

    Here's another way:

    Update the MyCompanyName.MyProjectName.Web.Public\Pages\_ViewStart.cshtml and using the GetApplicationLayout

    @using Volo.Abp.AspNetCore.Mvc.UI.Theming 
    @inject IThemeManager ThemeManager 
    @{ 
        Layout = ThemeManager.CurrentTheme.GetApplicationLayout(); //GetPublicLayout 
    } 
     
    

    Thank you, this works way better. Sadly the footer is gone >.<

  • User Avatar
    0
    alper created
    Support Team Director

    closing the issue... you can always reopen.

  • User Avatar
    0
    jfistelmann created

    closing the issue... you can always reopen.

    Hey albert :) The footer is missing, so this is not done yet :/

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please copy the ApplicationLayout and custom it like the default. You can download the source code of Letpton to get the ApplicationLayout

  • User Avatar
    1
    jfistelmann created

    hi

    Please copy the ApplicationLayout and custom it like the default. You can download the source code of Letpton to get the ApplicationLayout

    Thank you, this did the trick.

    To summarize:

    To get the menu to the left side, following steps need to be performed.

    First download Volo.Abp.LeptonTheme.

    Then copy content from here:

    Insert it into your Default.cshtml

    Change @await Html.PartialAsync("~/Themes/Lepton/Layouts/Application/_Footer.cshtml") to @await Html.PartialAsync("~/Themes/Lepton/Layouts/Public/_Footer.cshtml")

    The drawback is that one now needs to monitor ApplicationLayout for changes when updating abp

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35