Cannot implement my custom theme

Question

YouI created a custom theme based on bootstrap5, but i did not change anything.
I then downloaded and renamed the files to bootstrap5_ems.
I then created a folder under wwwroot called styles and copied all the files from the zip to that folder.
Then in _host.csahtml i change this line
<link href="_content/Syncfusion.Blazor/styles/bootstrap5_ems.css" rel="stylesheet" /> @* Theme *@

When i run it the site looks totally fucked up, even if i did no changes in theme studio.

What am I doing wrong?

Subathra Kaliamoorthy · Answer

Hi Jens,Greetings from Syncfusion Support!Based on the provided details, it appears that you have created a custom theme based on Bootstrap 5. Following this, you renamed the files and included them under the "~/wwwroot/styles" path. To ensure proper referencing of these files in _Host.cshtml, you should structure the link as follows for clarity and ease of understanding: //… //… Please get back to us if you have any other concerns.Note: We request you to use professional language while posting forum updates with our support.Regards,Subathra K

Jens Chr. Thomsen · Answer

I used the theme studio and open theme bootstrap5.

then i changes the primary and font color on the appbar and left everything as is.

I then created a folder called styles under wwwroot

I then copied the css and scss files to the styles folder and renamed them to bootstrap5-ems

I then copied the folder individual-scss folder to styles

And inserted this in my _hostcshtml file

When I start my project the appbar has changed color, but it is still off,
The grid on the page is looking very wrong and so on.

I thought that if I based my own theme on bootstrap5 and only changed one thing the rest would look at it allways did.

What did I do wrong.

Subathra Kaliamoorthy · Answer

Hi Jens,We've customized the styling by referencing the Bootstrap 5 theme from the theme studio, adjusting the primary and font colors of the AppBar as per your instructions. Next, we renamed the folder names as 'bootstrap5-ems' and placed them under the 'styles' directory within the '~/wwwroot' path."Furthermore, we've made sure to comment out the Syncfusion Blazor styles references to prevent any conflicts or inconsistencies._Host.cshtml //… @* *@ //…Please check the attached sample for your reference and get back to us if you have any other concerns.Regards,Subathra KAttachment: BlazorServerApp_3e4f3732.zip

Jens Chr. Thomsen · Answer

I trried your code example and used the files from my changed theme
The appbar did change colors but the grid below it looks totally different.

And I did not change anything on the grid.

I just changed the appbar backcolor to green and the appbar text color to red.

Downloaded the zip file and copied the .css,scss files to the styles folder

It just dont work here for me. :(

Subathra Kaliamoorthy · Answer

Hi Jens,Based on the details provided, we suspect that when customizing and downloading styles from the theme studio, you might have only selected styles for the AppBar component and missed to include the Grid component. So that the downloaded styles in your project, the Grid component may not appear styled.Could you please ensure whether do you downloaded both Appbar and Grid Components CSS from Blazor ThemeStudio?If the issue still persists, kindly provide us with a detailed error log, and if possible, share a sample for further investigation.Regards,Subathra K

Jens Chr. Thomsen · Answer

Yes I only selected AppBar in filter.So the download function only downloads the selected components in the filter or what?I will try to select them all and try again.

Jens Chr. Thomsen · Answer

Well it seems to help if I select all components and download.So I guess I could just select thecomponents I uses in my project and download to get it to work.

Jens Chr. Thomsen · Answer

But if I in the Theme Editor tries to import the settings.json file I just created/downloaded i get this error.

settings.json1.0 KBFile failed to upload

WHy isd

Subathra Kaliamoorthy · Answer

Hi Jens,Thank you for bringing this issue to our attention. We have replicated the issue while importing the "settings.json" file in Blazor Theme Studio at our end.Root Cause: uploader API used the older services.Now we have updated this to latest API service and resolved the issue. We apologize for any inconvenience this may have caused.Blazor ThemeStudioPlease get back to us if you have any other concerns.Regards,Subathra K

Jens Chr. Thomsen · Answer

That did help with the error I got.But if I try to import my json file Theme Studio just hangs with the waiting wheel turning.I even tried on another browser but it allso just hangs.I even tried to restart my computer but it still hangs.

Subathra Kaliamoorthy · Answer

Hi Jens,Based on the details provided, we tried to replicate the
issue while importing the "settings.json" file in Blazor Theme Studio
just hangs with the waiting wheel turning. We have thoroughly tested across
various browsers and have attached videos for your reference.If the issue persists, please provide the below details.
 Could
     you please try once again after clearing the browser’s cache?
 Do
     you have any console errors after imported the ‘settings.json’? if so,
     share the error details.
 Details
     about browser in which you experience the issue.
 If
     possible, share that ‘settings.json’ file.
This will help us further investigate and resolve the issue
effectively.Regards,Subathra K.Attachment: BlazorThemeStudio_317e49ba.zip

Jens Chr. Thomsen · Answer

Now I have it to work on Edge, Chrome and Firefox, thanks!

Subathra Kaliamoorthy · Answer

Hi Jens,Please check and get back to us if you need any further assistance.Regards,Subathra K.

Jens Chr. Thomsen · Answer

As I said, everything is fine now. Thanks!

Subathra Kaliamoorthy · Answer

Thanks for the update, Jens.