Open Closed

LeptonX MVC - How to change the logo #3698


User avatar
0
dlapointe created
  • ABP Framework version: 6.0.0-rc.4 (commercial)
  • UI type: MVC
  • DB provider: EF Core Mysql
  • Tiered (MVC) or Identity Server Separated (Angular): no

Hi,

Im trying to change the leptonx logo in order to put our own one. I cant find any docs about this (i do find for lepton, but not for leptonx) nor find where in the code it should be done?

Also, i think it would be worth cleaning the project template when you select LeptonX as there is still stuff that seems to be for Lepton only such as :

  1. logo-dark.png and logo-light.png in the images folder of the wwwroot. This seems to be the logo used in Lepton
  2. This section of the appsettings in the web project
    "Settings": {
    "Volo.Abp.LeptonTheme.Style": "Style1", /* Options: Style1, Style2... Style6 */
    "Volo.Abp.LeptonTheme.Layout.MenuPlacement": "Top", /* Options: Left, Top */
    "Volo.Abp.LeptonTheme.Layout.MenuStatus": "AlwaysOpened", /* Options: AlwaysOpened, OpenOnHover */
    "Volo.Abp.LeptonTheme.Layout.Boxed": "False" /* Options: True, False */
  }

10 Answer(s)
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi,

    Also, i think it would be worth cleaning the project template when you select LeptonX as there is still stuff that seems to be for Lepton only such as :

    • We've removed lepton-related lines/files and it'll be available within the next release.

    Im trying to change the leptonx logo in order to put our own one. I cant find any docs about this (i do find for lepton, but not for leptonx) nor find where in the code it should be done?

    • We'll update LeptonX documentation and add customization sections.

    To change the logos you can use the following code block in your CSS file (global-styles.css):

    /* for dim and dark theme styles */
    :root .lpx-theme-dim, :root .lpx-theme-dark {
        --lpx-logo: url('/images/logo/logo-light.png');
        --lpx-logo-icon: url('/images/logo/logo-light-thumbnail.png');
    }
    
    /* for light theme style */
    :root .lpx-theme-light, :root .lpx-brand-logo {
        --lpx-logo: url('/images/logo/logo-dark.png');
        --lpx-logo-icon: url('/images/logo/logo-dark-thumbnail.png');
    }
    
  • User Avatar
    0
    dlapointe created

    Thank you, it does work.

    Also, there aint no doc either for those 2 other customization that probably everyone needs:

    1. The *.web favicon
    2. The picture of the login page

    Thank you

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Thank you, it does work.

    Also, there aint no doc either for those 2 other customization that probably everyone needs:

    1. The *.web favicon
    2. The picture of the login page

    Thank you

    We are preparing the customization documentations for LeptonX Theme and they'll be available soon.

    Favicon:

    • You can add a favicon to the ~/images/favicon/logo-favicon_1.svg path to override the current favicon. (We have an open issue about this problem and we'll improve and make it easier to customize)

    The picture of the login page:

    Please see, https://support.abp.io/QA/Questions/3653/LeptonX-Theme-and-Login-Form#answer-feab7ac5-5e50-0cfb-3e8a-3a0623adb4d9

  • User Avatar
    0
    dlapointe created

    Thanks, so far the favicon and logo is working.

    On my BrandingProvider tough, i only have those properties and the logo url actually is working (so it seems we dont have to override the css ;)).

    Please note that i am using the not tiered version

    Thank you

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    and the logo url actually is working (so it seems we dont have to override the css ;)).

    Yes, you don't have to override CSS. You can also specify the logo URL from the branding provider. Both options are valid and can be used.

  • User Avatar
    0
    dlapointe created

    Do you know then how we can change the picture on the login screen?

    Thank you

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Do you know then how we can change the picture on the login screen?

    Thank you

    Hi, you can add an image to the /Themes/LeptonX/Global/assets/img/login-bg.jpg path. When you do that, your image will be used in the background on the login screen.

    There is a watermark in the background image, so you might remove that. To do that:

    .lpx-brand-logo.lpx-login-big-logo {
        display: none;
    }
    
  • User Avatar
    0
    ageiter created

    I changed the image and had problems with the size and alignment. Now I have set the following CSS styles and so the image is set as background for this column. This way it looks great even with different screen sizes.

    .lpx-login-image-area img {
        display: none;
    }
    
    .lpx-login-image-area {
        background-image: url("/Themes/LeptonX/Global/assets/img/login-bg.jpg");
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    I changed the image and had problems with the size and alignment. Now I have set the following CSS styles and so the image is set as background for this column. This way it looks great even with different screen sizes.

    .lpx-login-image-area img { 
        display: none; 
    } 
     
    .lpx-login-image-area { 
        background-image: url("/Themes/LeptonX/Global/assets/img/login-bg.jpg"); 
        background-position: right; 
        background-repeat: no-repeat; 
        background-size: cover; 
    } 
    

    Thanks for reporting this, I'll discuss this with the team and we'll try to improve the customization of the background image of the login page.

    Best Regards.

  • User Avatar
    0
    dlapointe created

    Thanks you! closing it ;)

Made with ❤️ on ABP v9.1.0-preview. Updated on November 01, 2024, 05:35