From 88d834fdf766db34054941f437439f8fb0b24cef Mon Sep 17 00:00:00 2001
From: Stefan Pejcic <stefan@pejcic.rs>
Date: Sun, 25 Aug 2024 16:44:23 +0200
Subject: [PATCH] Update customizing-openpanel-user-interface.md

---
 .../customizing-openpanel-user-interface.md   | 83 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/articles/dev-experience/customizing-openpanel-user-interface.md b/documentation/docs/articles/dev-experience/customizing-openpanel-user-interface.md
index 91f93779..1df60814 100644
--- a/documentation/docs/articles/dev-experience/customizing-openpanel-user-interface.md
+++ b/documentation/docs/articles/dev-experience/customizing-openpanel-user-interface.md
@@ -13,7 +13,6 @@ To customize OpenPanel, you have the following options:
 - Customize any page.
 - Customize login pages.
 - Add custom CSS or JS code to the interface.
-- Create custom functionality and pages in the interface.
 
 
 
@@ -25,6 +24,7 @@ Once enabled, the feature becomes instantly available to all users, appearing in
 
 
 
+
 ## Set pre-installed services for user
 
 OpenPanel uses [docker images](https://dev.openpanel.com/images/) as the base for each hosting plan. Based on the docker image, different services can be set per plan/user. For examples, we provide 2 docker iamges, one that has nginx pre-installed and another that uses apache. By creating a custom docker image, you can set in that image what to be pre-installed when you create a new user, for exmaple, set mariadb instead of mysql or install php ioncube loader extension.
@@ -36,6 +36,7 @@ To add a custom service pre-installed for users:
 - [Create a new user on that plan](/docs/admin/users/openpanel/#create-users)
 
 
+
 ## Localize the interface
 
 OpenPanel is localization ready and can easily be translated into any language.
@@ -55,6 +56,9 @@ To translate OpenPanel to another language follow these steps:
 3. Translate the `messages.pot` file
 4. Send a [pull request](https://github.com/stefanpejcic/openpanel-translations/pulls)
 
+
+
+
 ## Set custom branding and logo
 
 Custom brand name and logo can be set from [OpenAdmnin > Settings > OpenPanel](/docs/admin/settings/openpanel/#branding) page.
@@ -62,9 +66,29 @@ Custom brand name and logo can be set from [OpenAdmnin > Settings > OpenPanel](/
 To set a custom name visible in the OpenPanel sidebar and on login pages, enter the desired name in the "Brand name" option. Alternatively, to display a logo instead, provide the URL in the "Logo image" field and save the changes.
 
 
+
+
 ## Set a custom color scheme
 
-To set a custom color-scheme for OpenPanel interface, edit the 
+To set a custom color-scheme for OpenPanel interface, edit the `/etc/openpanel/openpanel/custom_code/custom.css` file and in it set your preferred color scheme.
+
+```bash
+nano /etc/openpanel/openpanel/custom_code/custom.css
+```
+
+Set the custom css code, save and restart openpanel to apply changes:
+
+```bash
+cd /root && docker compose up -d openpanel
+```
+
+Example:
+
+![custom_css_code](https://i.postimg.cc/YprhHZhg/2024-06-18-15-04.png)
+
+
+
+
 
 ## Replace How-to articles with your knowledge base
 
@@ -122,6 +146,59 @@ For example, to edit the sidebar and hide the OpenPanel logo, follow these steps
 
 ## Customize login page
 
+
+OpenPanel login page template code is located at `/usr/local/panel/templates/user/login.html` inside the docker container.
+
+To edit the login page:
+
+1. Create a new folder/file locally for your modified code.
+   ```bash
+   mkdir /root/custom_template/
+   ```
+2. Copy the existing template code.
+   ```bash
+   docker cp openpanel:/usr/local/panel/templates/user/login.html /root/custom_template/login.html
+   ```
+3. Edit the code.
+
+4. Configure OpenPanel to use your template.
+   Edit the `/root/docker-compose.yml` file and in it setyour file to overwrite the original template:
+   ```bash
+   nano /root/docker-compose.yml
+   ```
+   and in the file under [openpanel > volumes](https://github.com/stefanpejcic/openpanel-configuration/blob/180c781bfb7122c354fd339fbee43c1ce6ec017f/docker/compose/new-docker-compose.yml#L31) set local path and original:
+   ```bash
+   - /root/custom_theme/login.html:/usr/local/panel/templates/user/login.html
+   ```
+6. Restart OpenPanel to apply the new login template.
+   ```bash
+   cd /root && docker compose up -d openpanel
+   ```
+
+
 ## Add custom CSS or JS code
 
-## Create custom pages
+To add custom CSS code to the OpenPanel interface, edit the file `/etc/openpanel/openpanel/custom_code/custom.css`:
+
+```bash
+nano /etc/openpanel/openpanel/custom_code/custom.css
+```
+
+To add custom JavaScript code to the OpenPanel interface, edit the file `/etc/openpanel/openpanel/custom_code/custom.js`:
+
+```bash
+nano /etc/openpanel/openpanel/custom_code/custom.js
+```
+
+To insert custom code within the `<head>` tag of the OpenPanel interface, modify the content of the file located at `/etc/openpanel/openpanel/custom_code/in_header.html` and include your custom code within it:
+
+```bash
+nano /etc/openpanel/openpanel/custom_code/in_header.html
+```
+
+To insert custom code within the `<footer>` tag of the OpenPanel interface, modify the content of the file located at `/etc/openpanel/openpanel/custom_code/in_footer.html` and include your custom code within it:
+
+```bash
+nano /etc/openpanel/openpanel/custom_code/in_footer.html
+```
+