Documented ASP.NET Core MVC / Razor Pages: Branding

docs/en/UI/AspNetCore/Branding.md

@@ -1,3 +1,45 @@
 # ASP.NET Core MVC / Razor Pages: Branding
 
-TODO
+## IBrandingProvider
+
+`IBrandingProvider` is a simple interface that is used to show the application name and logo on the layout.
+
+The screenshot below shows *MyProject* as the application name:
+
+![branding-nobrand](../../images/branding-nobrand.png)
+
+You can implement the `IBrandingProvider` interface or inherit from the `DefaultBrandingProvider` to set the application name:
+
+````csharp
+using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Components;
+using Volo.Abp.DependencyInjection;
+
+namespace MyProject.Web
+{
+    [Dependency(ReplaceServices = true)]
+    public class MyProjectBrandingProvider : DefaultBrandingProvider
+    {
+        public override string AppName => "Book Store";
+    }
+}
+````
+
+The result will be like shown below:
+
+![branding-appname](../../images/branding-appname.png)
+
+`IBrandingProvider` has the following properties:
+
+* `AppName`: The application name.
+* `LogoUrl`: A URL to show the application logo.
+* `LogoReverseUrl`: A URL to show the application logo on a reverse color theme (dark, for example).
+
+> **Tip**: `IBrandingProvider` is used in every page refresh. For a multi-tenant application, you can return a tenant specific application name to customize it per tenant.
+
+## Overriding the Branding Area
+
+The [Basic Theme](Basic-Theme.md) doesn't implement the logos. However, you can see the [UI Customization Guide](Customization-User-Interface.md) to learn how you can replace the branding area with a custom view component.
+
+An example screenshot with an image is used in the branding area:
+
+![bookstore-added-logo](../../images/bookstore-added-logo.png)

docs/en/UI/AspNetCore/Customization-User-Interface.md

@@ -128,11 +128,11 @@ The ABP Framework, pre-built themes and modules define some **re-usable view com
 
 ### Example
 
-The screenshot below was taken from the **basic theme** comes with the application startup template.
+The screenshot below was taken from the [Basic Theme](Basic-Theme.md) comes with the application startup template.
 
 ![bookstore-brand-area-highlighted](../../images/bookstore-brand-area-highlighted.png)
 
-[The basic theme](Basic-Theme.md) defines some view components for the layout. For example, the highlighted area with the red rectangle above is called **Brand component**. You probably want to customize this component by adding your **own application logo**. Let's see how to do it.
+The [Basic Theme](Basic-Theme.md) defines some view components for the layout. For example, the highlighted area with the red rectangle above is called **Brand component**. You probably want to customize this component by adding your **own application logo**. Let's see how to do it.
 
 First, create your logo and place under a folder in your web application. We used `wwwroot/logos/bookstore-logo.png` path. Then copy the Brand component's view ([from here](https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Brand/Default.cshtml)) from the basic theme files under the `Themes/Basic/Components/Brand` folder. The result should be similar the picture below:
 

docs/en/docs-nav.json

@@ -456,6 +456,10 @@
               "text": "Page Header",
               "path": "UI/AspNetCore/Page-Header.md"
             },
+            {
+              "text": "Branding",
+              "path": "UI/AspNetCore/Branding.md"
+            },
             {
               "text": "Layout Hooks",
               "path": "UI/AspNetCore/Layout-Hooks.md"