Follow

Editing a Web Skin

  1. Start out by logging into the Agile Ticketing admin application.
  2. Choose your organization from the tree in the left hand column and expand to show your organization's administration options.
  3. Expand the Web folder and click on the Skin option.
  4. Double click on the Skin that you want to edit.
  5. The Web Skin consists of several parts.
    • The Name of the skin.
    • The Text to show in the browser title bar.
    • The favicon to show in the browser.
    • The Default skin is used for API integration and AMS based order confirmations.
    • The Enable option can be used to enable/disable the skin to be chosen for Entry Points.
    • The JQuery UI Style is a style framework used for popup boxes and menus.  See the JQuery ThemRoller for examples of each style.
  6. The HTML Includes tab allows you to change html and javascript web assets. Several files can be chosen from the dropdown selection box.
    • 1-CustonScripts.js - Main client javascript file used to customize skin.
    • HeaderMenu.inc - File included at the top of all pages.  Logos and main menus are defined here.
    • Footer.inc - File included at the bottom of all pages.  Contact information and 1-CustomScript.js reference are defined here.
    • Other files can be created with specific filenames to insert at specific locations.  Contact Agile Support for help with this feature.
  7. The Include Images tab is used to upload and reference images in the HTML Include files.  Images can be imported and deleted.  For each image the relative shortcut is provided for referencing the image.
  8. The Style Sheet tab is used for editing the cascading style sheet for this skin.  Agile defines many default styles in a master .css file.  These values can be overridden in this client style sheet.
  9. The Style Images tab is used for uploading images referenced in the style sheet.  These images are placed in the same directory as the .css file.
  10. The Mobile tab is used to set the values for the mobile style.
    • The Header Logo is an image placed at the top of every page.
    • The Logo Link is used to link back to a page you specify by clicking on the logo image or a Home link in the footer. 
    • The JQuery UI Style is a style framework used for popup boxes and menus.  See the JQuery ThemRoller for examples of each style.
    • Color 1 is the background color for the header.
    • Color 2 is the main highlight color for text and background elements.
    • Color 3 is the secondary highlight color for text and background elements.
    • The Footer is text included at the bottom of every page.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments