Elite Custom JS and CSS module for Perfex CRM

Here is an example of how to configure the Elite Custom JS and CSS module for Perfex CRM:

Custom CSS

To configure custom CSS, navigate to Settings > Elite Custom JS and CSS > Custom CSS. In the Custom CSS field, add the following code:

.perfex-table th {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.perfex-table td {
  border-bottom: 1px solid #ccc;
}

.perfex-table tr:hover {
  background-color: #f9f9f9;
}

This code adds a simple styling to the tables in Perfex CRM.

Custom JS

To configure custom JS, navigate to Settings > Elite Custom JS and CSS > Custom JS. In the Custom JS field, add the following code:

$(document).ready(function() {
  // Add a button to the top of the page
  var button = $('<button>Click me!</button>');
  button.appendTo('#header');
  button.on('click', function() {
    alert('You clicked the button!');
  });
});

This code adds a button to the top of the page and triggers an alert when clicked.

Load Order

To configure the load order of custom CSS and JS, navigate to Settings > Elite Custom JS and CSS > Load Order. In the Load Order field, select the following options:

• Load Custom CSS: After
• Load Custom JS: After

This ensures that the custom CSS is loaded after the default Perfex CRM styles, and the custom JS is loaded after the page has finished loading.

Enable/Disable

To enable or disable the Elite Custom JS and CSS module, navigate to Settings > Elite Custom JS and CSS > Enable/Disable. In the Enable/Disable field, select the following options:

• Enable Custom CSS: Yes
• Enable Custom JS: Yes

This enables both the custom CSS and JS modules.

Here are the features of the Elite Custom JS and CSS module for Perfex CRM:

1. Easy to set up and use: The module is easy to configure and use, even for users without extensive technical expertise.

2. Supports multiple custom JavaScripts and CSSs: Users can add multiple custom JavaScript codes and CSS codes into client and admin areas, including Web to Lead forms.

3. Supports services codes: The module allows adding codes for services such as Google Analytics, Google Tag Manager, and Facebook Pixel.

4. Add custom JavaScript and CSS code: Users can add any custom JavaScript or CSS code.

5. Beautify code: The module provides a beautiful editor to make code easier to read and manage.

6. Fullscreen mode: Users can switch to fullscreen mode for easier code writing and editing.

7. Search and sort snippets: The module includes a search function and a sortable list to help users easily find and manage their JavaScript and CSS snippets.

8. Active/deactivate JavaScript and CSS codes: Users can activate or deactivate individual JavaScript and CSS code snippets as needed.

9. Developer-friendly: The module is designed with developers in mind, with features such as customizable shortcuts and code beautification.

10. Search functionality: Users can search by name or description for easy snippet management.

11. Code snippet listing: The module includes a list of all added JavaScript and CSS code snippets, with active/deactivate options.

12. Create new code snippet: Users can create a new JavaScript or CSS snippet by clicking the create button.

13. Search and sort CSS snippets: The module includes a search function and a sortable list for CSS snippets, allowing users to easily manage and find their CSS code snippets.

14. Fullscreen mode for CSS code writing: Users can switch to fullscreen mode for easier code writing and editing for CSS snippets.

15. Active/deactivate CSS codes: Users can activate or deactivate individual CSS code snippets as needed.

Please let me know if you'd like me to summarize this information in a more condensed format.