Customization

Xera is designed to be highly customizable, allowing you to tailor the client area to match your brand and specific requirements. This section provides detailed instructions on how to customize various aspects of Xera, from themes and templates to custom pages and email templates.

1. Themes and Templates:

   • Selecting a Theme:
     • Xera comes with several pre-designed themes. To select a theme, navigate to the Themes section in the admin area. Preview the available themes and choose the one that best fits your brand.
   • Customizing Themes:
     • Once a theme is selected, you can customize it further by editing the HTML, CSS, and JavaScript files. These files are located in the templates directory.
     • To make changes, open the relevant file in a text editor and modify the code as needed. For example, to change the color scheme, you can edit the CSS files to use your brand's colors.
   • Adding Custom CSS:
     • If you prefer not to edit the existing theme files directly, you can add custom CSS to override the default styles. Create a new CSS file in the templates directory and include it in your theme by adding a link to it in the header section of your theme's main HTML file.

2. Custom Pages and Navigation:

   • Adding Custom Pages:
     • To add a custom page, create a new PHP file in the root directory or a subdirectory within templates. For example, if you want to create an "About Us" page, you might create a file called about.php.
     • Populate this file with the necessary HTML and PHP code to display the content you want on the page.
   • Updating Navigation:
     • To include your custom page in the site's navigation, you'll need to edit the navigation template file. This file is typically located in templates/includes/navbar.php or a similar directory.
     • Add a new list item in the navigation menu with a link to your custom page. For example:

       <li><a href="about.php">About Us</a></li>

   • Customizing Existing Pages:
     • You can also customize existing pages by editing the corresponding PHP files in the templates directory. Make changes to the layout, content, or functionality as needed to better suit your requirements.

3. Email Templates:

   • Locating Email Templates:
     • Email templates are located in the templates/emails directory. Each template corresponds to a different type of email notification, such as welcome emails, invoice notifications, and support ticket updates.
   • Editing Email Templates:
     • Open the relevant email template file in a text editor. These files are typically HTML files with placeholders for dynamic content.
     • Customize the email content to match your branding and communication style. You can add your logo, change the text, and modify the layout as needed.
   • Dynamic Placeholders:
     • Email templates often include placeholders for dynamic content, such as {client_name}, {invoice_amount}, or {ticket_id}. Ensure these placeholders are correctly placed within your template to display the relevant information when the email is sent.

4. Language Files:

   • Localization:
     • Xera supports multiple languages, allowing you to provide a localized experience for your clients. Language files are located in the languages directory.
   • Editing Language Files:
     • Each language file is a PHP file that contains an array of key-value pairs, where the key is the identifier for a specific piece of text, and the value is the translated text.
     • To edit a language file, open it in a text editor and update the values as needed. For example:

       'welcome_message' => 'Welcome to our hosting service!',

   • Adding New Languages:
     • To add a new language, create a copy of an existing language file and rename it to match the new language. Update the array values with the translated text. Then, add the new language to the list of available languages in the admin settings.

5. Custom Scripts:

   • Adding JavaScript:
     • You can add custom JavaScript to enhance the functionality of your client area. Create a new JavaScript file in the templates/js directory and include it in your theme by adding a script tag to the footer or header of your theme's main HTML file.
   • Using jQuery:
     • Xera includes jQuery by default, making it easy to add interactive elements to your pages. Use jQuery to create dynamic features such as form validation, AJAX requests, and interactive UI components.

6. Advanced Customization:

   • Hooks and API Integration:
     • Xera provides hooks and API integration points that allow you to extend its functionality. Use these hooks to run custom code at specific points in the application's workflow, such as when a new account is created or an invoice is paid.
   • Custom Modules:
     • If you need to add significant new functionality to Xera, consider creating a custom module. Modules are self-contained packages that add new features to the application. Follow Xera's module development guidelines to create and integrate your custom module.

By leveraging these customization options, you can tailor Xera to meet the specific needs of your hosting business, providing a unique and branded experience for your clients. The next section will cover troubleshooting common issues and tips for maintaining your Xera installation.