Collapsible Skin The collapsible skin option displays the catalogs and categories in a collapsible format enabling enhanced navigation on Qnet. Categories can be expanded to view all of the sub categories of a catalog. The category list will continue to display the category tree after the user selects a specific category. If multiple catalogs are available to a user, the additional catalogs will display in the left side bar area; the user will not need to return to the welcome page to select a different catalog. Selected catalog displays that catalogs categories. Categories can be expanded or collapsed. Additional catalogs display. Customize the background and mouse-over colors. Set the indentation pixel by category. Customize text size and colors. The collapsible view also allows three options for viewing the list of items. The user selects their preferred view by clicking on the icon in the header. The selected option will display for that user until another view is selected. Grid View List View Entry View 1
The grid view displays the items in a grid pattern with images on the top of the item information. The list view displays the items in a horizontal format with images at the left of the item ID and description. The entry view displays the items in a horizontal format. The images do not display. If the item does not require the user to view the item details screen, the user can enter order quantities for multiple items and add to cart at one time. Setup The option to enable the new collapsible skin is in the Distributor Setup area of Qnet. Note: Only sites that are set up to use the sub category skin can use the collapsible skin. The Collapsible Category is accessed from e- Quantum by going to Help>Web Sites>Distributor Logon. Select the Collapsible Category button from the list of options. The collapsible option can be enabled by client by selecting the client in the drop down. To enable all clients, the Select Client option can be set to Default. If the Select Cost Center Option is set to Default, all cost centers for the selected client will use the collapsible view settings. 2
To enable the site check the box for Enable Collapsible Sub Menu. Note: The client must be uploaded from e-quantum before the Collapsible View is activated. In e-quantum, go to Qnet>Export Internet Data to export the clients that have been switched to the collapsible view. The customizable areas are listed in the column on the left. When a selection is made from the left column, the customization options display on the right side of the screen for the selected area. A save button is on the upper right hand of the each screen. Save the changes to each screen before continuing to the next option. 3
Click on the color field to select a color from the color chart or enter the HEX value. The field will display the color that is chosen. Button: Add to Cart and Button: Show Detail Options allow changing the Add to Cart and the Show Details Buttons. Background color - the main color of the button. Border-top-color color on the corners of the button. Color - color of the text. Font-weight weight of the text Mouseover-color color of text when cursor is placed over the button. Catalog Level Options allow changing of the colors, fonts and indentations of the catalog titles. All displayed catalogs will use the settings. 4
Background color - fills the entire area behind the catalog title including the padding. Border-bottom - adds a line to the bottom of the catalog titles. This field accepts CSS format line type, line width and line color. Example: solid 4px #919191 Color - color of the catalog title font. Font-family name of the catalog title font. Font-size size of the catalog title. Font-style style used for the catalog titles: normal, italic or oblique. Font-weight weight of the catalog titles: normal, bold, bolder or lighter. Mouseover-bgcolor background color of the catalog when the cursor is placed over the title. Mouseover-color text color of the catalog title when the cursor is placed over the title. Padding - allows for space on the top, bottom, left or right of the catalog title. 5
Category Column Settings control the collapsible image for the categories. The default for the image is an arrow. A collapsed category displays a right arrow; the expanded category displays a down arrow. An image can be uploaded to replace the default image. Use the Browse option to locate the image, Upload File option replaces the default image. The image height and width options allow sizing of the image. Padding settings add space to the top, bottom, left or right of the image. Category Level 1, 2 and 3 Settings control the text for the categories. Settings on Level 1 allow for a border to be placed at the bottom of the category and the alignment of the text. All of the category levels allow customization of the font and padding of the text. 6
Background color - fills the entire area behind the catalog title including the padding. Border-bottom - adds a line to the bottom of the catalog titles. This field accepts CSS format line type, line width and line color. Example: solid 4px #919191 Color - color of the catalog title font. Font-family name of the catalog title font. Font-size size of the catalog title. Mouseover-bgcolor background color of the catalog when the cursor is placed over the title. Mouseover-color text color of the catalog title when the cursor is placed over the title. Padding - allows for space on the top, bottom, left or right of the catalog title. Text-top-offset Vertical-align aligns the text of the category with the top, middle or bottom of the collapse/expand image. 7
Category Title Settings control the category title of the selected category. The text displays at the top of the item page. Background-color: background color of the category title area. Color: color of the text of the category title. Font-family: font family used for the category title. Font-size: font size for the category title. Font-style: font style of the text for the category title. Font-weight: font weight of the text for the category title: normal, bold, bolder or lighter. Height: adjusts the height of the category title area. Padding: adjusts the space at the top of the text top, bottom, right and left of the category title. Entry View The Entry View allows the display of the items in a horizontal format without images. The user can enter quantities for multiple items before adding to cart. Entry View page settings allow customization of the item list. 8
Background-color: background color of the item list. Border-bottom: adds a line to the bottom of the items. This field accepts CSS format line color, line type and line width. Example: #000000 solid 1px. Font-color: color of the text on the item list. Font-family: font family used for the item list. Font-size: font size of the item list. Height: adjusts the space of the area for the item. Padding-top: adjusts the space at the top of the text in the item list. Entry View Headings The Entry View Headings page customizes the heading section (Qty, Price, Item ID and Description) for the entry view. Heading > 9
Background-color: background color of the heading section. Color: color of the text on the header. Font-family: font family used for the header. Font-size: font size of the text on the header. Font-weight: font weight of the text on the header: normal, bold, bolder or lighter. Height: adjusts the vertical space of the area for the header. Padding-bottom: adjusts the space between the bottom of the text and the bottom of the header area. Padding-top: adjusts the space between the top of the text and the top of the header area. Grid View The Grid View displays the items in a grid pattern. Grid View page settings allow customization of the item list. 10
Background-color: background color of the item list. Border-bottom: adds a line to the bottom of the items. This field accepts CSS format line color, line width and line type. Example: #000000 1px solid Border-right: adds a line to the bottom of the items. This field accepts CSS format line color, line width and line type. Example: #000000 1px dotted. Font-color: color of the text on the item list. Font-family: font family used for the item list. Font-size: font size of the item list. Item Detail Popup When an image or item ID is clicked the item detail window pops up. The colors background colors and border colors can be customized. 11
Background-color: background color of the window. Border-bottom-color: line color on the bottom edge of the window. Border-left-color: color in the top and bottom corners on the left side of the window. Border-right-color: color in the top and bottom corners on the right side of the window. Border-top-color: line color on the top edge of the window. Font-family: font style used for the item description under the image. Item Detail Popup Add Area The Item Detail Popup Add to Cart Area customizes the bottom right section of the popup window. Background-color: color of the pop-up add to cart area. Border-left: style of line on the left side of the pop-up add to cart area. Color: color of the quantity and price. 12
Font-family: font style of the quantity and price Font-size: font size of the quantity. Item Detail Popup Tab Active and Not Active Item detail screen tabs are used on the popup window when the user clicks on the item image or the item ID to view the details. Background-color: color of the tab. Border-color: color bordering the tab. Font-color: color of text. Item List Navigation The Item List Navigation customizes the navigation bar at the top of the item list. 13
Background-color: color of the navigation bar. Color: color of the text on the navigation bar. Current-page-color: color of the current page. Font-family: font on the text of the navigation bar. Font-style: style of the text on the navigation bar: normal, italic or oblique. Font-weight: weight of the text on the navigation bar: normal, bold, bolder or lighter. Padding: padding for the page numbers on the navigation bar. Width: percent value of the width of the navigation bar. Items in Cart Color: color of the items in shopping cart text. Font-family: font family of the items in shopping cart text. Font-size: font size of the items in shopping cart text. Font-style: font style of the items in shopping cart text: normal, italic or oblique. Font-Weight: font weight of the items in shopping cart text: bold, normal, bolder or lighter. 14
List View The list view displays the items in a horizontal pattern. The customization allows changing the font, color and size of the text. The border below the text can be customized by color, width and type. Background-color: background color of the item list. Border-bottom: adds a line to the bottom of the items. This field accepts CSS format line color, line width and line type. Example: #000000 1px dotted Font-color: font color of the item text and quantity. Font-family: font family of the item text and quantity. Font-size: font size of the item ID, price and quantity. 15
Search and Search Advanced Background-color: background color of the search box. Color: color of the text in the advanced search section. Font-family: font style of the Search in: text. Height: height of the search box. Padding: pixels of padding on the top, right, bottom and left of the box. 16