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

learnabp created 3 years ago

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)

0

maliming created 3 years ago
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 .

learnabp created 3 years ago

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>

maliming created 3 years ago

Support Team Fullstack Developer

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>

Have an answer to this question? Log in and write your answer.