From f4ad66f2e56965b28a49ad2235e2dc9a20af8e92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Wed, 18 Nov 2020 16:14:06 +0300
Subject: [PATCH] Complete the basic theme

---
 docs/en/UI/Blazor/Basic-Theme.md | 57 +++++++++++++++++++++++++++++++-
 docs/en/UI/Blazor/Theming.md     |  2 +-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md
index 2001277b10..40e687ca2e 100644
--- a/docs/en/UI/Blazor/Basic-Theme.md
+++ b/docs/en/UI/Blazor/Basic-Theme.md
@@ -1,3 +1,58 @@
 # Blazor UI: Basic Theme
 
-TODO
\ No newline at end of file
+The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the **base theme** and build your own theme or styling on top of it. See the *Customization* section.
+
+> If you are looking for a professional, enterprise ready theme, you can check the [Lepton Theme](https://commercial.abp.io/themes), which is a part of the [ABP Commercial](https://commercial.abp.io/).
+
+> See the [Theming document](Theming.md) to learn about themes.
+
+## Installation
+
+**This theme is already installed** when you create a new solution using the [startup templates](../../Startup-Templates/Index.md). If you need to manually install it, follow the steps below:
+
+* Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project.
+* Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project.
+* Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module:
+
+````csharp
+var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
+builder.RootComponents.Add<App>("#ApplicationContainer");
+````
+
+`#ApplicationContainer` is a selector (like `<div id="ApplicationContainer">Loading...</div>`) in the `index.html`.
+
+## The Layout
+
+![basic-theme-application-layout](../../images/basic-theme-application-layout.png)
+
+Application Layout implements the following parts, in addition to the common parts mentioned above;
+
+* [Branding](Branding.md) Area
+
+* Main [Menu](Navigation-Menu.md)
+* Main [Toolbar](Toolbars.md) with Language Selection & User Menu
+* [Page Alerts](Page-Alerts.md)
+
+## Customization
+
+You have two options two customize this theme:
+
+### Overriding Styles / Components
+
+In this approach, you continue to use the the theme as NuGet and NPM packages and customize the parts you need to. There are several ways to customize it;
+
+#### Override the Styles
+
+You can simply override the styles in the Global Styles file of your application.
+
+#### Override the Components
+
+See the [Customization / Overriding Components](Customization-Overriding-Components.md) to learn how you can replace components, customize and extend the user interface.
+
+### Copy & Customize
+
+You can download the [source code](https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) of the Basic Theme, copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements.
+
+## See Also
+
+* [Theming](Theming.md)
\ No newline at end of file
diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md
index c8ebc6ee2f..9850915ada 100644
--- a/docs/en/UI/Blazor/Theming.md
+++ b/docs/en/UI/Blazor/Theming.md
@@ -101,7 +101,7 @@ A typical Layout consists of several parts. The theme should include the necessa
 
 **Example: The Basic Theme has the following parts for the Application Layout**
 
-![basic-theme-application-layout-parts](D:/Github/abp/docs/en/images/basic-theme-application-layout-parts.png)
+![basic-theme-application-layout-parts](../../images/basic-theme-application-layout-parts.png)
 
 The application code and the modules can only show contents in the Page Content part. If they need to change the other parts (to add a menu item, to add a toolbar item, to change the application name in the branding area...) they should use the ABP Framework APIs.