Design and Interface Customization

When customizing the design and interface of your Crown App, certain skills and tools are required. You will need a basic understanding of front-end development, including CSS and JavaScript, to make design adjustments.

For Non-Developers

If you don’t have a developer or the necessary expertise to handle front-end customizations, don’t worry! Our team is more than happy to help you with these changes. We can assist you in modifying the design to fit your needs, ensuring a seamless experience for you and your users. Contact Support to view our offer.

For Developers

If you are a developer, it’s important to note that directly editing the CSS and JavaScript files can cause issues. When updates are released for Crown, your custom changes may be overwritten, which means all your hard work could be lost.

The recommended solution is to create a child plugin. This allows you to safely add custom styles and JavaScript without the risk of losing your changes during an update.

To insert your custom CSS and JavaScript, use the following action hooks provided by our developer team:

crown_head
crown_footer These hooks is for adding custom styles & scripts of your App. This is typically where JavaScript and tracking scripts are added, to ensure they load after the page content.

Adding Custom CSS to the Head Section from the Plugin Directory:

To add custom CSS from the plugin directory, use the plugin_dir_url() function to get the plugin’s URL and append the path to your CSS file.

function custom_add_css_to_head() {
    echo '<link rel="stylesheet" type="text/css" href="' . plugin_dir_url( __FILE__ ) . 'css/custom-style.css">';
}
add_action('crown_head', 'custom_add_css_to_head');

Explanation:

plugin_dir_url( __FILE__ )Retrieves the URL of the plugin directory, allowing you to reference your CSS file.
The function hooks into crown_head to add the CSS to the head section of the App.

Adding Custom JavaScript to the Footer from the Plugin Directory:

Similarly, for custom JavaScript, use plugin_dir_url() to add the JavaScript file to the footer.

function custom_add_js_to_footer() {
    echo '<script src="' . plugin_dir_url( __FILE__ ) . 'js/custom-script.js"></script>';
}
add_action('crown_footer', 'custom_add_js_to_footer');

Explanation:

Again, plugin_dir_url( __FILE__ ) provides the URL for the plugin’s directory, allowing you to load the JavaScript file.
The script is hooked to crown_footer to ensure it is added to the footer section.

Important Notes:

Ensure your CSS and JavaScript files are placed in the correct subfolders inside your plugin directory (e.g., css and js).

By using these hooks in your custom plugin, your modifications will remain intact even after updates, providing a safe and efficient way to customize your app design and functionality.

Conclusion

Customizing your App’s design requires a combination of front-end skills, but with the proper approach, you can safely make adjustments without losing your changes during updates. If you’re not comfortable with code, our team is here to assist you. For developers, always use a child plugin and the appropriate action hooks to ensure the longevity of your customizations.