How to customise LeptonX theme CSS files from SCSS #6503 | Support

hinairusu created 9 months ago

ABP Framework version: v8.0.0
UI Type: MVC / Blazor Server
Database System: EF Core (SQL Server)
Tiered (for MVC) or Auth Server Separated (for Angular): yes

Hello team.

We are looking to customise the LeptonX theme with a different font and background colour for the Light theme. We would also be interested in how to add in more styles as part of our push towards better accessability.

I have found the documentation at https://docs.abp.io/en/commercial/latest/themes/lepton-x/source-files however this doesn't make a lot of sense to me. the basic Lepton theme has a walkthrough on updating the CSS (https://docs.abp.io/en/commercial/latest/themes/lepton/customizing-lepton-theme?UI=BlazorServer) which makes sense but doesn't apply to LeptonX.

How do I go about updating the background colour for light mode to (for example) #BBA045? How do I go about changing the default font in light mode to (for example) Rubik Burned (https://fonts.google.com/specimen/Rubik+Burned)? How do I go about adding in a new theme (for example) called VomitYellowSampleTheme with the above values? How do I go about adding in these new themes into my solution? Finally, is there any difference in implementation between MVC and Blazor Server UI for implementing these themes?

I fully expect this to actually be something really simple, but I've never had to handle SCSS, especially in this manner before. If it's at all possible, could you throw me some screenshots so I know what I'm looking at as I follow the solution?

Thank you for your time!

Go to accepted answer

14 Answer(s)

1

Anjali_Musmade created 9 months ago
Support Team Support Team Member

Hello,

Have you check this video https://www.google.com/search?q=abpio+custom+lepronx&rlz=1C1RXQR_enIN1036IN1036&oq=abpio+custom+lepronx&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTEyNjI5ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8#fpstate=ive&vld=cid:c1b4f233,vid:R9CqTtn6Wcg,st:0

Please let me know if it helps you,

thanks

1
0

hinairusu created 9 months ago

Thank you, I'll take a look now and get back to you!
0

hinairusu created 9 months ago

Thank you again for the video, it's actually been really helpful!

The only thing I've not been able to do is to change the font. I've updated the CSS, as shown below

but it's still using the default fonts. Feels like I've missed something but I'm not sure where.
0

hinairusu created 9 months ago

Actually, found it, needed to update font-bundle.css with @import url("https://fonts.googleapis.com/css?family=Rubik%20Burned:wght@100;200;300;400;500;600;700;800;900&display=swap");

Thank you for your time and help, I appreciate it!
0

hinairusu created 9 months ago

Followup question.

In my update to the CSS, it appears that the BrandingProvider is no longer replacing the project logo in the new theme:

Where is the config on this one?
1
Anjali_Musmade created 9 months ago
Support Team Support Team Member
Hello hinairusu,

I have created new theme as red like

Add your project-logo under this path MyThemeApp.Web\wwwroot\images\logo\leptonx\logo-red.svg like

Add below code in global-style.css file

:root .lpx-theme-red { --lpx-logo: url('/images/logo/leptonx/logo-red.svg'); --lpx-logo-icon: url('/images/logo/leptonx/icon.svg'); }

it will result like

thanks,
1
0

hinairusu created 9 months ago

Wonderful, Thank you very much.

last question I have (And i really hope it is the last one!) When I've tested locally using run, everything is working without a problem. When I build the docker image however and push it into prod, the CSS isn't being loaded - looks like the CSS can't be found.

I can't find any CSS other than the Global-Styles.css in the docker image. Why is there a difference, and what do I need to update to make it work as expected?
0

jfistelmann created 9 months ago

Hey, does the dev console (F12) output some errors?
0

hinairusu created 9 months ago

Hi Jfistelmann,

I've uploaded it here so you can see: https://sentimentary.com/

Change the theme to Comfort and you can see the behaviour.

That's the error being shown.
0

Anjali_Musmade created 9 months ago
Support Team Support Team Member

Hello hinairusu,

can you please check once is Themes folder is present or not at your server? please confirm on this.

thanks
0

Anjali_Musmade created 9 months ago
Support Team Support Team Member

Hi,

It seems your files are not uploaded into Server You can try to add below code in **.Web.csproj file, so that files will be uploaded into server and styles will be rendered <Content Include="Themes\LeptonX\Global\side-menu\css\bootstrap-red.css"> <CopyToOutputDirectory>Always</CopyToOutputDirectory> </Content> <Content Include="Themes\LeptonX\Global\side-menu\css\red.css"> <CopyToOutputDirectory>Always</CopyToOutputDirectory> </Content>

1
0

hinairusu created 9 months ago

Hi Anjali,

That's fixed it, thank you! No idea why it worked locally but wasn't in the container, but now everything is displaying as expected. Now I'm going to go and figure out how to set my new theme as the default, and away we go!

Thank you for your help, it's much appreciated!

Anjali_Musmade created 9 months ago

Support Team Support Team Member

Thanks for update,

can we close this ticket as issue resolved?

For setting default theme , you can add below code in **WebModule.ts

private void ConfigureTheme()
{
    Configure<LeptonXThemeOptions>(options =>
    {
      options.DefaultStyle = LeptonXStyleNames.System; //here you can add any theme, you want to set as default
       });
}

0

hinairusu created 9 months ago

Ah, thank you! Yes, this can be marked as closed.

I really apprecaite the help.

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