Browse Source
Merge pull request #22766 from abpframework/auto-merge/rel-9-2/3691
Merge branch dev with rel-9.2
pull/22776/head
maliming
10 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with
14 additions and
2 deletions
BIN
docs/en/ui-themes/lepton-x/images/account-layout-background-style.png
docs/en/ui-themes/lepton-x/mvc.md
Width:
|
Height:
|
Size: 1.6 MiB
@ -47,7 +47,8 @@ Before starting to customize the theme, you can consider downloading the source
---
### Appearance
You can set a default theme, add or remove appearance styles by using **LeptonXThemeOptions** .
You can set a default theme, add or remove appearance styles and layout background styles by using **LeptonXThemeOptions** .
- `DefaultStyle` : Defines the default fallback theme. The default value is **Dim**
@ -133,15 +134,26 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
- `MobileMenuSelector` : Defines items to be displayed at the mobile menu. The default value is the first 2 items from the main menu items.
```csharp
Configure< LeptonXThemeMvcOptions > (options =>
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
});
```

- `AccountLayoutBackgroundStyle` : Defines the background style of the account layout.
```csharp
Configure< LeptonXThemeMvcOptions > (options =>
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
options.AccountLayoutBackgroundStyle = "background-image: url('/images/login-background-image.svg') !important;" ;
});
```

### Layouts
**LeptonX** offers two **ready-made layouts** for your web application. One of them is **placed** with the **menu items** on the **top** and the other with the **menu items** on the **sides** .