Merge pull request #4818 from wso2/add-documentation-app-branding

Add docs for App-wise Branding

en/asgardeo/docs/guides/branding/index.md

@@ -1,9 +1 @@
-# Branding
-
-By default, the business applications of your organization in Asgardeo are presented to your users with Asgardeo branding. You have the option of using your own branding as follows:
-
-- [Customize the user interfaces (UIs)]({{base_path}}/guides/branding/configure-ui-branding/) of the user login, sign-up, and account recovery flows.
-
-- [Customize the domain name]({{base_path}}/guides/branding/configure-custom-domains/) <sup>`Paid subscription required`</sup>
-
-- [Customize email notifications]({{base_path}}/guides/branding/customize-email-templates/)
+{% include "../../../../includes/guides/branding/index.md" %}

en/identity-server/7.0.0/docs/guides/branding/index.md

@@ -1,11 +1 @@
-# Branding
-
-By default, your organization's business applications in {{ product_name }} are displayed to users with {{ product_name }} branding. However, you have the option to customize this by applying your own branding.
-
-- [Customize the user interfaces (UIs)]({{base_path}}/guides/branding/configure-ui-branding/) of the user login, sign-up, and account recovery flows.
-
-- [Customize layouts]({{base_path}}/guides/branding/add-custom-layouts/) of the user login, sign-up, and account recovery flows.
-
-- [Customize email notifications]({{base_path}}/guides/branding/customize-email-templates/)
-
-- [Localizations]({{base_path}}/guides/branding/localization/)
+{% include "../../../../../includes/guides/branding/index.md" %}

en/identity-server/next/docs/guides/branding/index.md

@@ -1,9 +1 @@
-# Branding
-
-By default, your organization's business applications in {{ product_name }} are displayed to users with {{ product_name }} branding. However, you have the option to customize this by applying your own branding.
-
-- [Customize the user interfaces (UIs)]({{base_path}}/guides/branding/configure-ui-branding/) of the user login, sign-up, and account recovery flows.
-
-- [Customize email notifications]({{base_path}}/guides/branding/customize-email-templates/)
-
-- [Localizations]({{base_path}}/guides/branding/localization/)
+{% include "../../../../../includes/guides/branding/index.md" %}

en/identity-server/next/mkdocs.yml

@@ -581,6 +581,7 @@ nav:
           - Customize branding:
             - Branding: guides/branding/index.md
             - Configure UI branding: guides/branding/configure-ui-branding.md
+            - Customize layouts: guides/branding/add-custom-layouts.md
             - Customize email templates: guides/branding/customize-email-templates.md
             - Localization support: guides/branding/localization.md
           - Extend with actions:

en/includes/guides/branding/add-custom-layouts.md

@@ -137,6 +137,27 @@ To create the basic custom layout resources:
                 └── carbon.super
     ```
 
+    {% if product_name == "Asgardeo" or (product_name == "WSO2 Identity Server" and is_version != "7.0.0") %}
+
+    !!! note "Application-specific layouts"
+        To add application-specific custom layouts, create a folder called `apps` under the organization folder (carbon.super). Within the `apps` folder, create a folder for each application and name it with the UUID of the application.
+
+        The structure will look as follows.
+
+        ```
+        └── extensions
+            └── layouts
+                └── custom
+                    └── carbon.super
+                        └── apps
+                            └── <UUID_OF_APP>
+        ```
+
+
+        Follow the next steps of the guide, but apply them to the `UUID_OF_APP` folder instead of `carbon.super`.
+
+    {% endif %}
+
 3. Navigate to the `webapps/authenticationendpoint/includes/layouts/centered` folder, copy the `body.html` file, and add it to the created `carbon.super` folder.
 
 4. Create the following files and the folder inside the `carbon.super` folder:

en/includes/guides/branding/configure-ui-branding.md

@@ -1,20 +1,77 @@
 # Configure UI branding
 
-You can customize the user interfaces (UIs) presented to your users during the login, sign-up, and account recovery flows, and on the My Account portal according to the theming guidelines of your organization.
+{{product_name}} allows you to customize the user interfaces (UIs) displayed to your users during login, sign-up, account recovery, and self-service.
+
+{% if product_name == "Asgardeo" or (product_name == "WSO2 Identity Server" and is_version != "7.0.0") %}
+
+Customizations take effect at two levels:
+
+- **Organization-wide Branding**: This functions as the default branding and applies to all applications in an organization.
+- **Application-specific Branding**: Each application can have its own branding. This overrides the organization-wide branding applied by default to the application.
+
+By branding these interfaces, your users will experience a familiar and consistent look and feel that aligns with your organizational or application-specific themes.
+
+!!! note "UI Branding for B2B applications"
+
+    If you have implemented [B2B organizations]({{base_path}}/guides/organization-management/), the behavior of each branding levels will work as follows:
+
+    **For organization-specific branding**:
+
+    - You may configure separate UI branding for each organization. 
+    - If you have not configured UI branding for your organization, the UI branding of your immediate parent  organization will be applied to the organization. If your parent organization has no branding, the  grand-parent organization's branding will apply. This will continue all the way until the root organization.  If the root organization has no branding, the default {{product_name}} branding will apply.
+     
+    **For application-specific branding**:
+
+    - If you configure application-specific branding, it will override the organization’s branding for that  application.
+    - If no application-specific branding is set, the UI branding of the organization will be applied. If the  organization has no branding, the application-specific branding of the immediate parent's organization will  apply. This will continue all the way until the root organization. If the root organization has no branding, the default {{product_name}} branding will apply.
+
+
+    ![{{ product_name }} branding path resolver]({{base_path}}/assets/img/guides/branding/generic-app-branding-resolver-path.png)
+
+!!! note
+    See the complete list of [UI branding options](#ui-branding-preferences) currently available in {{ product_name }}.
+
+{% else %}
 
 !!! note "UI Branding for B2B applications"
-    If you have created [organizations]({{base_path}}/guides/organization-management/manage-organizations/),note that you can configure separate UI branding for your organizations. If you have not configured UI branding for your organization, the UI branding of your root organization will be applied to the organization.
+    If you have created [organizations]({{base_path}}/guides/organization-management/manage-organizations/), note that you can configure separate UI branding for your organizations. If you have not configured UI branding for your organization, the UI branding of your immediate parent organization will be applied to the organization. If your parent organization has no branding, the grand-parent organization's branding will apply. This will continue all the way until the root organization. If the root organization has no branding, the default {{product_name}} branding will apply.
 
 By branding these interfaces, users will get a familiar and consistent user experience.
 
 !!! note
     See the complete list of [UI branding options](#ui-branding-preferences) currently available in {{ product_name }}.
 
+{% endif %}
+
 ![{{ product_name }} branding example]({{base_path}}/assets/img/guides/branding/branding-example.png)
 
 ## Update branding
 
-Follow the steps given below to configure the branding preferences for your organization.
+Follow the steps given below to configure branding preferences:
+
+{% if product_name == "Asgardeo" or (product_name == "WSO2 Identity Server" and is_version != "7.0.0") %}
+
+1. On the {{ product_name }}, go to **Branding** > **Styles & Text**.
+
+2. In the top right corner, select either **Organization** for organization-wide branding or **Application** and choose an application for application-specific branding.
+
+    ![{{ product_name }} Console - Branding UI]({{base_path}}/assets/img/guides/branding/branding-console-ui.png){: width="800" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+
+    !!! note
+
+        You may also navigate to application branding by going to the **General** tab of your application and under **Branding**, selecting **Go to Application Branding**.
+
+2. Update the [UI branding options](#ui-branding-preferences) in the **General**, **Design**, **Advanced**, and **Text** tabs.
+
+    !!! note
+        - Text branding is currently not available for application-specific branding. You can still configure text branding at the organization level, and it will apply to all applications unless overridden by application-specific branding in other areas.
+        - If you leave any of the branding preferences empty, {{ product_name }} defaults will be used.
+        - The real-time preview will show you a sample view as you update the values.
+
+3. Click **Save & Publish** to publish your branding configurations.
+
+{% else %}
 
 1. On the {{ product_name }}, go to **Branding** > **Styles & Text**.
 
@@ -28,6 +85,8 @@ Follow the steps given below to configure the branding preferences for your orga
 
 3. Click **Save & Publish** to publish your branding configurations.
 
+{% endif %}
+
 The email templates of the organization will be automatically updated according to your branding preferences if the preferences are in the published state. See [Customize email templates]({{base_path}}/guides/branding/customize-email-templates/#configure-email-templates) for more information.
 
 {{ powered_by_note }}
@@ -50,9 +109,18 @@ When disabled, {{ product_name }}'s default branding will apply to the interface
 
 If you want to revert your branding preferences, scroll down to the **Danger Zone** and click **Revert to default**.
 
+{% if product_name == "Asgardeo" or (product_name == "WSO2 Identity Server" and is_version != "7.0.0") %}
+
+!!! warning
+    Note that this permanently removes all the branding options that you have saved and the branding of the next available level (such as organization branding or {{ product_name }} defaults) will be applied to your organization or application.
+
+{% else %}
+
 !!! warning
     Note that this permanently removes all the branding options that you have saved and the {{ product_name }} defaults will immediately apply.
 
+{% endif %}
+
 {{ asgardeo_help }}
 
 ## UI branding preferences
@@ -78,6 +146,10 @@ Listed below are general branding preferences you can apply to the interfaces.
 
 Listed below are the design changes you can apply to the user registration interface, login interfaces and My Account portal.
 
+!!! Note
+
+    My Account branding can only be configured at the organization level.
+
 #### Layout variations
 
 Select one of the available layouts for your user registration and login interfaces. {{ product_name }} uses the **Centered** layout by default.
@@ -192,7 +264,7 @@ The following design preferences apply to the theme you select. You can configur
        <tr>
           <td><b>Inverted Surface Background Color</b></td>
           <td>
-             The inverted variation of the background color used in surface elements like the     application header in the My Account portal.
+             The inverted variation of the background color used in surface elements like the application header in the My Account portal.
           </td>
        </tr>
     </table>
@@ -589,9 +661,11 @@ These placeholders provide flexibility in constructing URLs that adapt to differ
 1. Constructing a URL with the complete locale tag:
 
     === "URL format"
+
         `https://example.com/{{locale}}/page`
 
     === "Sample"
+
         Assume `ja-JP` is selected as the locale: `https://example.com/ja-JP/page`
 
 2. Inserting the country code into the URL:
@@ -674,5 +748,13 @@ Listed below are the text branding preferences you can apply to the screens in y
    </tr>
 </table>
 
+{% if product_name == "Asgardeo" or (product_name == "WSO2 Identity Server" and is_version != "7.0.0") %}
+!!! note
+    - Adding custom fields to the text preferences is not supported.
+    - Text branding is currently not available for application-specific branding.
+
+{% else %}
 !!! note
     Adding custom fields to the text preferences is not supported.
+
+{% endif %}

en/includes/guides/branding/index.md

@@ -1,11 +1,21 @@
 # Branding
 
-By default, the business applications of your organization in {{ product_name }} are presented to your users with {{ product_name }} branding. You have the option of using your own branding as follows:
+By default, your organization's business applications in {{ product_name }} are displayed to users with {{ product_name }} branding. However, you have the option to customize this by applying your own branding.
 
 - [Customize the user interfaces (UIs)]({{base_path}}/guides/branding/configure-ui-branding/) of the user login, sign-up, and account recovery flows.
 
-{{customize_domain_name}}
+{% if product_name == "WSO2 Identity Server" %}
+
+- [Customize layouts]({{base_path}}/guides/branding/add-custom-layouts/) of the user login, sign-up, and account recovery flows.
+
+{% endif %}
+
+{% if product_name == "Asgardeo" %}
+- [Branding AI]({{base_path}}/guides/branding/ai-branding/)
+- [Customize the domain name]({{base_path}}/guides/branding/configure-custom-domains/) <sup>`Paid subscription required`</sup>
+
+{% endif %}
 
 - [Customize email notifications]({{base_path}}/guides/branding/customize-email-templates/)
 
-{{configure_email_provider}}
+- [Localizations]({{base_path}}/guides/branding/localization/)