Metronic 8.2.5: Change starterkit signin layout from corporate to fancy in ASP.NET Core
Hi, I have your theme built and running correctly using either demo1 or demo30.
In the HTML examples you have 4 possible layouts: Corporate, Overlay, Creative, Fancy.
I wanted to switch between them (for example, from this https://preview.keenthemes.com/metronic8/demo1/authentication/layouts/corporate/sign-in.html to this https://preview.keenthemes.com/metronic8/demo1/authentication/layouts/creative/sign-in.html)
Reading several questions in this forum about changing layouts and the answers are always just pointing the users to this page (https://preview.keenthemes.com/asp.net-core/metronic/docs/views) that has the syntax for changing normal layouts on any application in ASP.NET Core and then mention we need to check the html version and copy paste the html from there.
The only layouts generated in the starterkit are one layout per type (Master, Auth, etc) so there is no other layout to change to, I only have one Auth.cshtml. I've replaced the signin.cshtml contents with the same form contents from the creative layout login page (in the html source files) but it doesn't change the layout.
You mention we might need to add some js or css but there is not documentation on which js or css to choose when you want to use "Corporate", "Overlay", "Fancy", etc.
If I compare the 2 htmls files (corporate/signin.html and creative/signin.html) all the changes are outside the form with leads me to believe we need to change the actual layout html (Auth.cshtml) or use the theme api but there is not actual specific examples in the documentation on how to do this.
Do I need to add a specific css using KTTheme.AddCssFile(???), is so, which file?
Do I need to add some body class/attributes using AddHtmlClass or AddHtmlAttribute? If so, which ones? Again the existing Auths.cshtml only calls KTTheme.AddHtmlClass("body", "app-blank");
Can you provide a detailed explanation on how to switch between the different provided layouts (corporate, fancy, creative and overlay) that exist in several pages in your html examples?
I think it would be good if you could add an example like this to your documentation explaining how to switch from one layout flavour to the other (what to look for, what to copy, what to include).
Thank you
Replies (3)
HI,
Sorry for the late reply.
You can copy the layout HTML markup from file authentication/layouts/creative/sign-in.html then you can paste this code to Starterkit/Views/Layout/Demo1/Auth.cshtml.
Include the code below to use the master layout wrapper and blank body html class.
@{
// Master layout
Layout = "~/Views/Layout/Master.cshtml";
KTTheme.AddHtmlClass("body", "app-blank");
KTTheme.AddHtmlClass("body", "bgi-size-cover");
KTTheme.AddHtmlClass("body", "bgi-attachment-fixed");
KTTheme.AddHtmlClass("body", "bgi-position-center");
KTTheme.AddHtmlClass("body", "bgi-no-repeat");
}Then on your page, you can change the background color using the CSS below:
<style>
body {
background-image: url(@KTTheme.GetAssetPath("media/auth/bg7.jpg"));
}
[data-bs-theme="dark"] body {
background-image: url(@KTTheme.GetAssetPath("media/auth/bg7-dark.jpg"));
}
</style>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi, thank you for your response but this doesn't answer my question.
I cannot simply copy the sign-in.html (that contains a full html page) to the Auth.cshtml (that is not a full html since it is a subset of that remaster layout).
If I would follow your answer blindly I would get a duplicate layout for the base stuff that would come from main and I would get a compilation error since I didn't add any "RenderBody()" to the Auth.cshtml after the copy paste from sign-in.cshtnl
What I ask was a checklist of what to look for when changing from the generated starter kit to another page in the theme from the html.
Your answer is very specific for the example I provided. You mention adding those classes to the body and background image but that is very specific to this change. Also even though is specific still doesn't cover what to copy paste to the auth.cshtml page. What region should we start copying and what to replace with the RenderBody etc.
Again, I think a mini checklist with what to look for (e.g. check classes from body and very background image) / copy from (start from section X and repaste section Y with render body) would greatly help any C# dev that needs to use this theme.
Hi,
Yes, you shouldn't blindly copy the entire html file since it contains all style and script imports. In my previous reply, I added the example of body classes you should add to your authentication layout and styles to set a background.
You should only copy part related to the layout, starting with kt_app_root, and then in your file, you can replace the form element with id kt_sign_in_form with @RenderBody().
Regards,
Lauris Stepanovs,
Keenthemes Support Team
