Add devportal theming documentations

en/docs/assets/css/config-catalog.css

@@ -240,6 +240,15 @@ html .md-typeset .superfences-tabs>label {
     border-bottom: 0.05rem dashed var(--md-primary-fg-color--light);
 }
 
+.md-typeset a {
+    color: #3498DB;
+    text-decoration: none;
+}
+
+.md-typeset a:hover {
+    color: #1A4C6D; 
+  }
+
 .md-typeset .superfences-tabs {
     display: flex;
     position: relative;

en/docs/devportal/theming-devportal-api-level.md

@@ -0,0 +1,131 @@
+# Customize Developer Portal Manually for your Organization
+
+Developer portal allows you to customize the user interfaces(UIs)in organization level as well as in API level. with this you can ensure that your pages not only look great but also align perfectly with your brand's identity.
+
+Customization take place at two levels:
+
+- Org Level : This functions as the default branding and applies to all APIs in an organization.
+- API Level : Each API can have its own branding. This overrides the organizational level branding applied by default to the organization.
+
+## Prerequisites
+
+- If you're signing in to the Bijira Console for the first time, create an organization:
+    1. Go to [https://console.bijira.dev/](https://console.bijira.dev/) and sign in using your preferred method.
+    2. Enter a unique organization name. For example, `TestingOrg`.
+    3. Read and accept the privacy policy and terms of use.
+    4. Click **Create**.
+
+This creates the organization and opens the **Project Home** page of the default project created for you.
+
+## Get into `Developer Portal` tab
+
+Go though the below steps to get the `Developer Portal` tab.
+
+- Close the project tab selected by default. Then the `Organization` tab will be selected.
+- Go to sidebar and click the dropdown near the username and select `Settings`.
+- Select `Developer Portal` tab.
+
+## Theme your Devportal in API Level
+
+Go through the following steps to customize the theme of the Devportal in the API level.
+
+1. Select `API Level` tab.
+
+### HTML
+
+The `HTML` tab will show the the read only view reference to the HTML structure of APIs in your organization. To edit the content of this page go to [Customize API Landing Page content](#customize-api-landing-page-content).
+
+### Org level CSS
+
+This tab will shows the reference to main CSS from the the organizational level theme settings.
+
+### CSS
+
+Here you can adjust appearance of the API Overview page by changing the css styles.
+
+![API Level CSS](../assets/img/devportal/api-level-css.png)
+
+1. Replace the following sections in the CSS.You can see the changes in the preview.
+
+    ```CSS
+    .key-benefit-item h3 {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--main-text-color);
+    margin-bottom: 0.625rem;
+    }
+
+    .key-benefit-item p {
+    font-size: 0.75rem;
+    color: var(--primary-main-color);
+    margin-bottom: 1.25rem;
+    line-height: 2;
+    }
+
+    ```
+
+    ![API Level CSS Preview](../assets/img/devportal/api-level-css-preview.png)
+
+2. Click **Publish to Developer Portal** to publish the CSS changes.
+
+### Customize API Landing Page content
+
+To customize the content of an API go through the following steps.
+
+1. Select a **Project** in your organization.
+2. Select an **API** to do the customization.
+
+    ![Select an API](../assets/img/devportal/select-an-api.png)
+
+3. Click **Documents** under **Develop** from the sidebar.
+4. Go to **API Landing Page** tab.
+5. Select **HTML** tab. 
+6. Customize the content by changing the html given. You can see the finalized details in the preview.
+
+!!! info "Try This in Preview"
+
+    Here is a sample HTML code. You can paste it and see the changes in the preview.
+
+    ```html
+    <div class="col-lg-11 container-fluid api-overview" name="Overview">
+        <div class="row api-overview-content">
+            <div class="row text-start">
+                <h1 class="overview-title">Overview</h1>
+            </div>
+            <div class="col-lg-8 api-content-text">
+                <div>
+                    <p class="intro-text-des">
+                        The Reading List API enables developers to integrate reading list functionality into their applications. This includes operations such as adding, updating, deleting, and retrieving books or articles in a user's personal list. The API supports authentication, tagging, sorting, and filtering to help users manage their reading goals effectively.
+                    </p>
+                </div>
+                <div>
+                    <h5 class="section-title">Key Capabilities</h5>
+                </div>
+                <ul class="requirement-list">
+                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span> Create and manage personalized reading lists for each user.</li>
+                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span> Add metadata such as title, author, genre, and reading status.</li>
+                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span> Mark items as "read", "currently reading", or "to-read".</li>
+                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span> Search and filter items by keywords, tags, or status.</li>
+                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span> RESTful design with predictable URL patterns and JSON responses.</li>
+                </ul>
+            </div>
+            <div class="col-lg-4 api-sidebar">
+                <div>
+                    <h5 class="section-title">Use this API to:</h5>
+                </div>
+                <ul class="api-list">
+                    <li>Authenticate users and associate them with unique reading lists.</li>
+                    <li>Add or remove books and articles from a list using POST/DELETE methods.</li>
+                    <li>Fetch full or filtered reading lists using GET queries with parameters.</li>
+                    <li>Update the read status, notes, or tags of a reading item.</li>
+                </ul>
+                <div>
+                    <button type="button" class="common-btn-outlined">Explore API Docs</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    ```
+
+    ![API Level content changes](../assets/img/devportal/api-level-content-changes.png)
+

en/docs/devportal/theming-devportal-org-level.md

@@ -0,0 +1,137 @@
+# Customize Developer Portal Manually for your Organization
+
+Developer portal allows you to customize the user interfaces(UIs)in organization level as well as in API level. with this you can ensure that your pages not only look great but also align perfectly with your brand's identity.
+
+Customization take place at two levels:
+
+- Org Level : This functions as the default branding and applies to all APIs in an organization.
+- API Level : Each API can have its own branding. This overrides the organizational level branding applied by default to the organization.
+
+## Prerequisites
+
+- If you're signing in to the Bijira Console for the first time, create an organization:
+    1. Go to [https://console.bijira.dev/](https://console.bijira.dev/) and sign in using your preferred method.
+    2. Enter a unique organization name. For example, `TestingOrg`.
+    3. Read and accept the privacy policy and terms of use.
+    4. Click **Create**.
+
+This creates the organization and opens the **Project Home** page of the default project created for you.
+
+## Get into `Developer Portal` tab
+
+Go though the below steps to get the `Developer Portal` tab.
+
+- Close the project tab selected by default. Then the `Organization` tab will be selected.
+- Go to sidebar and click the dropdown near the username and select `Settings`.
+- Select `Developer Portal` tab.
+
+## Theme your Devportal in Org Level
+
+Go through the following steps to customize the theme of the Devportal in the organization level.
+
+### Theme Settings
+
+1. Select `Org Level` tab.
+2. Select `Theme Settings` tab. Here, you can manage and customize theme colors for your organization.
+3. Select the colors below from the palette. A preview can be shown.
+
+    | Field Name         | Color                    |
+    |--------------------|--------------------------|
+    | Background         | #f8ff84                |
+    | Primary - Main     | #3e9529                |
+    | Secondary - Main   | #8d21c4                |
+    | Text- Main         | #1f1fcd                |
+    | Gradient- Main     | linear-gradient(135deg, #cbd340 0%, #79d93f 100%) |
+
+    ![Customized theme preview](../assets/img/devportal/customized_theming.png)
+
+4. Expand the dropdown for `Typography` and select the font (e.g., Arial Black).
+
+    ![Customized font](../assets/img/devportal/customized_font.png)
+
+5. If you want to save these changes as a draft, select  `Save As Draft`.
+
+6. If it perfectly aligns with your organization's unique identity, click `Publish to Devportal`.
+
+    ![Publish to Devportal](../assets/img/devportal/publish_to_devportal.png)
+
+7. Go to `Developer portal` to see the changes.
+
+    ![View Devportal](../assets/img/devportal/view_devportal.png)
+
+### HTML
+
+1. Select `HTML` tab. You can edit the HTML structure of pages.
+2. paste the below html code for `hero-section` .
+
+    ``` html
+    <section class="hero-section">
+        <div class="container-fluid">
+            <div class="hero-content hero">
+                <div class="row h-100">
+                    <!-- Left Content -->
+                    <div class="col-xl-9 col-lg-6 col-md-12 text-lg-start d-flex flex-column justify-content-center">
+                        <div class="hero-left-content">
+                            <h1 class="hero-title">
+                                Empower your development with our <span class="span-highlight"> APIs </span>
+                                to craft intuitive and robust applications
+                            </h1>
+                            <p class="hero-description">
+                                Use our APIs to build amazing enterprise and consumer applications. Browse our API catalog,
+                                subscribe, and get going in minutes.
+                            </p>
+                            <div class="hero-buttons d-flex gap-3">
+                                <a href="{{baseUrl}}/apis" class="common-btn-primary common-btn-secondary">Browse our APIs →</a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Right Content -->
+                    <div class="col-xl-3 col-lg-6 col-12 d-flex justify-content-end align-items-end">
+                        <div class="hero-image-container">
+                            <div id="heroImage" class="me-0">
+                                <img class="hero-banner-image d-none" src="https://raw.githubusercontent.com/wso2/docs-bijira/refs/heads/main/en/devportal-theming/hero.svg">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    ```
+
+3. The changes can be seen in the preview section.
+
+    ![Change with HTML](../assets/img/devportal/change_with_html.png)
+
+### CSS
+
+1. Select `CSS` tab. You can modify CSS styles to adjust the appearance of the pages.
+2. Paste the below code for `.hero-title` .
+
+    ``` CSS
+     .hero-title{
+        font-size: 2rem;
+        font-weight: 1000;
+        color: var(--primary-dark-color);
+        margin-bottom: 5rem;
+        line-height: 2;
+     }
+3. The changes can be seen in the preview section.
+
+    ![Change with CSS](../assets/img/devportal/change_with_css.png)
+
+### Referenced CSS
+
+This section shows the reference for the main CSS from the theme settings you assigned at the beginning.
+
+![Referenced CSS](../assets/img/devportal/referenced_css.png)
+
+### Assets
+
+01. The Logo of the devportal can be changed by clicking `Choosing File` under Devportal Logo.
+
+    ![Upload Devportal Logo](../assets/img/devportal/devportal_logo_upload.png)
+
+02. After adding the image you can see the finalized changes in the preview.
+
+    ![Uploaded Logo](../assets/img/devportal/uploaded_logo.png)

en/docs/devportal/theming-devportal-with-ai.md

@@ -0,0 +1,50 @@
+# Theming Developer Portal with AI for your Organization
+
+AI-powered branding simplifies the process of customizing your organization's Developer portal. By leveraging AI Branding, you can ensure that your pages not only look great but also align perfectly with your brand's identity.
+
+## Prerequisites
+
+- If you're signing in to the Bijira Console for the first time, create an organization:
+    1. Go to [https://console.bijira.dev/](https://console.bijira.dev/) and sign in using your preferred method.
+    2. Enter a unique organization name. For example, `TestingOrg`.
+    3. Read and accept the privacy policy and terms of use.
+    4. Click **Create**.
+
+This creates the organization and opens the **Project Home** page of the default project created for you.
+
+## Get into `Developer Portal` tab
+
+Go though the below steps to get the `Developer Portal` tab.
+
+- Close the project tab selected by default. Then the `Organization` tab will be selected.
+- Go to sidebar and click the dropdown near the username and select `Settings`.
+- Select `Developer Portal` tab.
+
+## Theme your Devportal with AI
+
+Go through the following steps to customize the theme of the Devportal with AI.
+
+1. Click on `Theme with AI`.
+
+    ![Theme with AI button](../assets/img/devportal/theming_ai_button.png)
+
+2. Enter the website URL  you'd like to use as the basis for branding.
+
+    ![AI Theme URL](../assets/img/devportal/ai_theme_url.png)
+
+3. Click enter to automate branding for your organization based on the website you provided. The system will then process the website and start generating the branding theme. You can see the result in the preview section.
+
+    ![Devportal Preview](../assets/img/devportal/devportal_preview.png)
+
+4. If you want to save those changes was a draft you can select `Save As Draft`.
+5. If it perfectly align with your organization's unique identity, you can click `Publish to Devportal`.
+
+    ![Publish to Devportal](../assets/img/devportal/publish_to_devportal.png)
+
+6. Go to `Developer portal` to see the changes.
+
+    ![View Devportal](../assets/img/devportal/view_devportal.png)
+
+    The finalized view will be as follows:
+
+    ![Finalized Devportal](../assets/img/devportal/finalized_preview.png)

en/mkdocs.yml

@@ -117,7 +117,12 @@ nav:
     - Govern API Proxy: governance/govern-api-proxy.md
   - Administer:
     - Create API Subscription Plans: administer/settings/create-api-subscription-plans.md
-
+  - Developer Portal:
+    - Theming Developer Portal:
+      - Theming with AI: devportal/theming-devportal-with-ai.md
+      - Theming Manually:
+        - Theme in Organizational Level: devportal/theming-devportal-org-level.md
+        - Theme in API Level: devportal/theming-devportal-api-level.md
 
 # Extensions
 markdown_extensions: