Open Closed

Trying to replace the Lepton Theme with Custom.css #1844


User avatar
0
learnabp created

I want to replace the Lepton6.css with my own custom.css

I have followed the documentation and it works fine in development environment on local machone .... but it doesn't work in staging, uat and prod environements

public override void ConfigureServices(ServiceConfigurationContext context)
        {
            var hostingEnvironment = context.Services.GetHostingEnvironment();
            var configuration = context.Services.GetConfiguration();

            ConfigureBundles();
            ConfigureUrls(configuration);
            ConfigurePages(configuration);
            ConfigureCache(configuration);
            ConfigureAuthentication(context, configuration);
            ConfigureAutoMapper();
            ConfigureVirtualFileSystem(hostingEnvironment);
            ConfigureNavigationServices();
            ConfigureAutoApiControllers();
            ConfigureSwaggerServices(context.Services);
            ConfigureCors(context, configuration);
            ConfigureExternalProviders(context);

            Configure<LeptonThemeOptions>(options =>
            {
                options.StylePath = "/styles/custom.css";
            });

        }

        private void ConfigureBundles()
        {

            Configure<AbpBundlingOptions>(options =>
            {
                options.StyleBundles.Configure(
                    LeptonThemeBundles.Styles.Global,
                    bundle =>
                    {
                        bundle.AddFiles("/global-styles.css");
                        bundle.AddFiles("/libs/intl-tel-input/build/css/intlTelInput.css");
                    }
                );
                options.ScriptBundles.Configure(
                    LeptonThemeBundles.Scripts.Global,
                    bundle =>
                    {
                        bundle.AddFiles("/libs/sweetalert2/dist/sweetalert2.all.min.js");
                        bundle.AddFiles("/libs/intl-tel-input/build/js/intlTelInput.min.js");
                        bundle.AddFiles("/global.js");
                    }
                );
            });

        }

3 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please check the wwwroot folder to confirm the css file exists.

    Also share your Web.csproj file.

    You can change the ASPNETCORE_ENVIRONMENT to Production to test your app locally .

  • User Avatar
    0
    learnabp created

    Yes the file definately exists

    below is my web.csproj file

    <Project Sdk="Microsoft.NET.Sdk.Web">
    
      <Import Project="..\..\common.props" />
    
      <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
        <RootNamespace>DesertFire.Ppm.Web</RootNamespace>
        <AssetTargetFallback>$(AssetTargetFallback);portable-net45+win8+wp8+wpa81;</AssetTargetFallback>
        <AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects>
        <GenerateBindingRedirectsOutputType>true</GenerateBindingRedirectsOutputType>
        <GenerateRuntimeConfigurationFiles>true</GenerateRuntimeConfigurationFiles>
        <PreserveCompilationContext>true</PreserveCompilationContext>
        <MvcRazorExcludeRefAssembliesFromPublish>false</MvcRazorExcludeRefAssembliesFromPublish>
        <PreserveCompilationReferences>true</PreserveCompilationReferences>
      </PropertyGroup>
    
      <ItemGroup>
        <Compile Remove="Logs\**" />
        <Content Remove="Logs\**" />
        <EmbeddedResource Remove="Logs\**" />
        <None Remove="Logs\**" />
      </ItemGroup>
    
      <ItemGroup>
        <Content Include="Pages\**\*.js">
          <CopyToOutputDirectory>Always</CopyToOutputDirectory>
        </Content>
        <Content Include="Pages\**\*.css">
          <CopyToOutputDirectory>Always</CopyToOutputDirectory>
        </Content>
      </ItemGroup>
    
      <ItemGroup>
        <Content Remove="wwwroot\styles\custom.css" />
        <Content Remove="wwwroot\styles\lepton1.min.css" />
      </ItemGroup>
    
      <ItemGroup>
        <None Remove="Pages\Account\ConfirmUser.js" />
        <None Remove="Pages\Identity\index.js" />
        <None Remove="Pages\Identity\Users\create.js" />
        <None Remove="Pages\Identity\Users\edit.js" />
        <None Remove="Pages\index.js" />
        <None Remove="Pages\Payment\gateway-selection.js" />
        <None Remove="Pages\Public\buyTenant.js" />
        <None Remove="Pages\Storage\Index.js" />
        <None Remove="Pages\Subscriptions\buy.js" />
        <None Remove="Pages\Subscriptions\buyLicensedUsers.js" />
        <None Remove="Pages\Subscriptions\RegisterTenantModal.js" />
        <None Remove="Pages\Symbols\importModal.css" />
        <None Remove="Pages\Symbols\ImportModal.js" />
      </ItemGroup>
    
      <ItemGroup>
        <PackageReference Include="Serilog.AspNetCore" Version="3.2.0" />
        <PackageReference Include="Serilog.Sinks.Async" Version="1.4.0" />
        <PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="5.0.*" />
        <PackageReference Include="Microsoft.AspNetCore.Authentication.MicrosoftAccount" Version="5.0.*" />
        <PackageReference Include="Microsoft.AspNetCore.Authentication.Twitter" Version="5.0.*" />
        <PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="5.0.*" />
        <PackageReference Include="Volo.Payment.Web" Version="4.3.2" />
      </ItemGroup>
    
      <ItemGroup>
        <ProjectReference Include="..\DesertFire.Ppm.Application\DesertFire.Ppm.Application.csproj" />
        <ProjectReference Include="..\DesertFire.Ppm.HttpApi\DesertFire.Ppm.HttpApi.csproj" />
        <ProjectReference Include="..\DesertFire.Ppm.EntityFrameworkCore.DbMigrations\DesertFire.Ppm.EntityFrameworkCore.DbMigrations.csproj" />
        <PackageReference Include="Volo.Abp.Autofac" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.AspNetCore.Serilog" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.AspNetCore.Authentication.JwtBearer" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.Swashbuckle" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.FeatureManagement.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.Account.Pro.Public.Web.IdentityServer" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.Account.Pro.Admin.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.AuditLogging.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.Identity.Pro.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.LeptonTheme.Management.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.IdentityServer.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.LanguageManagement.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Saas.Host.Web" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton" Version="4.3.2" />
        <PackageReference Include="Volo.Abp.TextTemplateManagement.Web" Version="4.3.2" />
      </ItemGroup>
    
      <ItemGroup>
        <None Update="tempkey.rsa">
          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
        </None>
        <None Update="tempkey.jwk">
          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
        </None>
      </ItemGroup>
    
      <ItemGroup>
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-100.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-200.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-300.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-600.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-600italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-700.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-700italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-regular.woff2" />
        <None Include="wwwroot\styles\custom.css" />
      </ItemGroup>
    
    </Project>
    
    
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you try to remove these?

    The custom.css file should be added in virtual file system.

    
    
      <ItemGroup>
        <Content Remove="wwwroot\styles\custom.css" />
        <Content Remove="wwwroot\styles\lepton1.min.css" />
      </ItemGroup>
    
    
      <ItemGroup>
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-100.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-200.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-300.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-600.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-600italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-700.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-700italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-italic.woff2" />
        <None Include="wwwroot\assets\fonts\poppins-v6-latin-regular.woff2" />
        <None Include="wwwroot\styles\custom.css" />
      </ItemGroup>
    
    
Made with ❤️ on ABP v9.1.0-preview. Updated on November 18, 2024, 05:54