Appearance of Booknetic

Appearance Customization in Booknetic

The Appearance Module in Booknetic allows businesses to customize the visual layout and design of their booking panel. This ensures that the booking experience aligns with the brand identity and provides a seamless user experience. With predefined themes, extensive customization options, and Custom CSS support, businesses have full control over how their booking system looks and feels.

Accessing the Appearance Module

Navigate to Booknetic in WordPress Dashboard

Go to the Booknetic plugin in your WordPress admin panel.

• Click on Appearance from the list on the left side to open the customization options.

1. Overview of Appearance Settings
   • The module provides predefined themes and customization tools to modify colors and the style of the booking panel.

Changes are reflected in real-time, allowing businesses to preview modifications before applying them.

Choosing a Predefined Theme

Booknetic offers seven built-in themes, each with a distinct color scheme:

• Default
• Brown
• Red
• Green
• Blue
• Purple
• Pink

How to Apply a Theme

1. Open the Appearance Module in the Booknetic dashboard.
2. Select a predefined theme from the available options.
3. Click Choose to apply the theme instantly.

Using a predefined theme provides a quick and effortless way to customize the booking panel without requiring manual adjustments.

Creating a Custom Theme

For businesses that require a fully personalized booking panel, Booknetic allows users to create and edit custom themes.

Steps to Create a Custom Theme

1. Click “Create New Style”
   • This opens the theme editor, where colors and styles can be customized.

1. Define Style Attributes

   For a fully personalized look, businesses can create a Custom Style and modify individual elements of the booking panel.

   Available Customization Options

   • Style Name – Assign a custom name to your appearance settings.
   • Panel Height – Adjust the height of the booking panel for better display.
   • Font Family – Select a font that matches your website’s typography.
   • Panel Background – Customize the background color of the booking panel.
   • Primary BG / Text Color – Define the primary color used for buttons, text, and key elements.
   • Completed Steps BG / Label Color – Set the color for steps that have already been completed.
   • Active Steps BG / Label Color – Define the color of the current active step in the booking process.
   • Other Steps BG / Label Color – Adjust colors for steps that have not been completed yet.
   • Title Color – Customize the color of titles and headings in the booking panel.
   • Border Color – Set a custom border color for the elements inside the booking panel to match your design.
   • Price Color – Modify the text color used for service prices.
   • Hide Steps – Hide the steps for this particular appearance, this will not affect other designs.

Advanced Customization with Custom CSS

For businesses that require deeper customization, Booknetic allows users to apply Custom CSS. This enables full control over design elements beyond the built-in appearance settings.

How to Use Custom CSS

1. Locate the Custom CSS section.
2. Add your custom CSS code to modify specific design elements.
3. Save the changes, and the new styles will apply instantly.

With Custom CSS, businesses can create a truly unique booking panel that integrates seamlessly with their website’s overall design.

1. Save and Apply the New Style
   • Once satisfied with the design, click Save.
   • The newly created theme will appear in the custom themes list.
   • Click Choose to activate the custom style.

Creating a custom theme ensures that the booking panel remains consistent with brand guidelines while maintaining an intuitive user experience.

Editing and Managing Custom Themes

Booknetic allows businesses to edit, update, and delete custom themes as needed.

Editing an Existing Theme

• Select the custom style from the list.
• Make changes to colors, fonts, or button styles.
• Click Save to apply updates immediately.

Deleting a Custom Theme

• Navigate to the custom themes list.
• Select the style to be removed.
• Click Delete to permanently remove it.
• Note: The currently active theme cannot be deleted. To remove it, first switch to another style.