The DocuNECT Web allows for the following looks and feel changes to be made:

•Themes - There are a number of color themes that are provided with the application, however, you can develop your own color themes to match your corporate palette.

•Customer Login Page - You can develop a custom login page to blend the user experience with your existing web look and feel.

•Custom Menu - The menu can be changed to change the menu structure and items.

•Data Tables - Data tables have HTML before and after snippets to change the appearance of forms.

•Dashboard - You can change the user experience by developing static or dynamic dashboards at the system, role, user and cabinet levels. Refer to Configuring Dashboards

Themes

DocuNECT has predefined themes that can be changed in the Settings page of the specific web instance. However, you can change the web theme to match your corporate color scheme:

To create a custom color theme, copy of the existing CSS themes in the following folder. Once added, this will then appear in the

The color themes are cached by the IIS web server, so once added you will need to restart the web server to make sure the new theme is displayed in the Settings screen.

Template instructions

Template - dark color theme, where top menu bar has White text color. Replace $color[n] with #htmlcolor.*/

    $color1 (color #1: menu dark gradient, buttons gradient, border colors, headers text colors, jquery overrides)

        Dark color. Must support white text displayed on it.

    $color2 (color #2: menu light gradient, buttons bar bgr, footer bgr)

        Dark color, but a little lighter than $color1.

    $color3 (color #3: menu drop down, row hover, buttons, message box)

        Light color. Must support black text on it.

    $color4 (color #4: hover menu drop down, row selection, jquery overrides)

        Should not be very light. Must support white text on it.

        This can be the same as $color2.       

Custom Menus

To switch to the custom menu, go to the Settings page. In the Settings option, switch the Menu Type to Custom, and enter the Custom Standard HTML, and/or the Custom Responsive HTML markup.

Once that you switched to Menu Type = Custom, at least one of the Custom Standard HTML or Custom Responsive HTML must be completed (any of them, or both), otherwise the page won't validate.

Let's fill the Custom Standard HTML with a simple script like the one from w3schools (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp):

Note, replace the <DOCUNECTWEB> text with your website location.

Menu Scripts and Stylesheet

To allow the look and feel of the custom menu to be controlled, use the following files already installed in the DocuNECT Web instance folder.

/css/customHeaderStandard.css  - This contains css styles to handle the above HTML markup for testing purpose, taken from the w3schools article. You can replace the file content with your custom styles.

/css/customHeaderResponsive.css – This is empty by default and allows you to add your styles the responsive menu for use on devices (tables, phones etc).

/scripts/customHeader.js - This script contains 2 methods:

omyFunction() : The function called when clicking on the icon from the above HTML markup, which changes the style of the menu to a vertical display. This is provided as an example and can be changed to meet the requirements of the implementation.

odocument ready function: If the Custom menu is used, it hides the custom menu Standard or Responsive containers. In case there is no content have been written at server-side. This is provided as an example and can be changed to meet the requirements of the implementation.

HTML Containers

The containers for custom menu Standard and Responsive are added in the following pages:

Home/Default.aspx

MasterPages/Default.master

Retrieve/frames.aspx

As server-side controls:

A data-customheader custom property, to be easily identified.

They are populated with the provided scripts, only if the Menu Type is configured as Custom. If the Menu Type is Default, the scripts are still saved into the database, but they are not used to populate the custom header containers.

These controls must not be removed from these pages, however their position in the page can be changed if necessary.

Copyright © 2024 Portford Solutions Group, Inc.