Config

Configure custom color schemes, define a platform login, and upload documentation files and style sheets.

Table of Contents

Custom Styles:

1. What color scheme changes are supported on my platform deployment?
2. What style sheets do I use to update the color scheme of my platform deployment?
3. What is less.js and what are the benefits?
4. How do I download the custom.less template?
5. What is a sprite?
6. How do I modify sprite colors?
7. How do I upload my custom.less file after I have updated it?
8. After I update my custom.less file, how do I apply the changes to my platform deployment?
9. How do I rebuild my color scheme styles after I have uploaded the custom.less script?
10. How do I make my style and sprite file changes visible on my platform deployment after I regenerate styles?
11. How do I configure a custom footer?
12. How do I configure a custom logo?

Logins:

1. How does login configuration work?
2. Does the platform provide a default login?
3. What is a Target Host?
4. What login page integration modes are supported?
5. How do I enable and customize a platform login?
6. How do I disable a platform login?

Resources:

1. What is a Resource?
2. How do I upload style sheets to the platform?
3. How do I upload Sprite files to the platform?
4. How do I upload content to the platform?
5. How do I upload the API and Online Help content style sheet to the platform?

Custom Styles:

What color scheme changes are supported on my platform deployment?

You can change the platform color scheme of css styles that pertain to site background color, left and top navigation, text content area, pop-up dialog elements, horizontal rules, text color of input fields, default link colors, etc. Color scheme updates are performed by updating the custom.less and parameter.css style sheets. Click here to view a sample of the custom.less template here.

Back to top

What style sheets do I use to update the color scheme of my platform deployment?

The platform includes a custom.less style sheet template that you can download and update based on your requirements.

• All of the variables and sprite file references in custom.less are configured with default variables that represent the look and feel of a default platform installation.
• All custom.less style sheet variables are commented out. For site elements you would like to customize, you must uncomment the element and customize the variables.
• The custom.less file also references variable in parameters.css style sheet which defines the standard colors for the site.
• Color management for icons is accomplished by modifying the Adobe illustrator side production file that includes the sprite icon files.

Back to top

What is less.js and what are the benefits?

The custom.less style sheet is implemented with LESS which is a dynamic stylesheet language that extends the static CSS by adding a dynamic behavior in the CSS.

• LESS.JS is a CSS pre-processor that allows you to write your own styles using the LESS pre-processor language and save them in a .LESS file.
• LESS.JS will compile the file into pure CSS. LESS variables are defined with an @ sign and Variable assignment is done with a colon (:). After you update the custom.less style sheet and rebuild, the values of the variables are inserted into the output CSS document.
• LESS helps reduce the size of the CSS and allows you to quickly and easily make changes to the platform color scheme and sprite files by updating one custom.less file and then rebuilding the complete set of site stylesheets.

Back to top

How do I download the custom.less template?

The Administration > Config > Custom Styles section includes a Download button that allows you to download the custom.less template.

To download the custom.less template:

1. Navigate to Administration > Config > Custom Styles.
2. In the Styles Customization section, click Download. A download dialog box displays.
3. Select the Save File option and click OK.
4. A custom.less template will look similar to the following: custom.less sample

Back to top

What is a sprite?

The platform UI includes a series of standard icons that accommodate quick filters, help, menu navigation names, window titles, etc. These standard icons cannot be changed, but when a UI customization is performed the color of the icon can be changed.

• A sprite is a two-dimensional image that is used to change the color of the standard icons on the platform when a UI customization is performed.
• When developing your UI customization design, in addition to deciding what colors you want to use on your site, you must also decide what icons and "contrasts" are needed before moving forward with the customization tasks. This task should be part of your site UI design process.
• The platform provides a set of sprite files with the default theme. You can view how the sprite files are specified in the custom.less file. Each one is commented with " // path to the image file" and lists a URL that represents the path of the file.
• Note that sprite files should always be uploaded after you have uploaded and regenerated your style sheets.

Figure. Upload sprite files to \images folder via Administration > Config > Resources (Resources > File Manager)

Back to top

How do I modify sprite colors?

During the UI design phase of your platform deployment your brand standards and colors are selected. The site includes a series of icons. The icon design is fixed and part of the site design, but the icon color and contrast can be changed. The general process for modifying icon colors involves the following steps:

• To change icon color and contrast, a series of sprite files that define the color contrast for platform icons must be updated by modifying the Adobe Illustrator production file provided by SOA Software.
• The process involves selecting the Artboard that includes the icon you want to modify, changing the icon color, and saving the Artboard to a PNG file. The PNG file(s) must then be uploaded to the /resources/theme/default/styles/images folder via Administration > Config > Resources to be updated in your platform UI.
• For detailed instructions on how to modify sprite files, click here.
• If you save a sprite file to filename that is not referenced in the custom.less file, edit the custom.less file and update the path to reflect the new filename. For example, if a particular icon was gray and you wanted it changed to orange, you might save your Artwork to a new filename that reflected the color change or you could develop a naming convention using numbers, etc. The following example is an excerpt from a custom.less file that illustrates a sprite file URL reference.
  
  // path to the image file of 18px sprites of leftnav navigation items that reflect the current section of "subject" details
  // @leftnav-active-icons: @icon-active-18px: url("images/sprites_18_color.png");
• If you updated a style sheet, use the Rebuild Styles option to regenerate the styles before uploading any new sprite files. Note that this function rebuilds all the folders in the /resources/theme/default/styles directory. Because of this, new sprite files must be uploaded after the site styles are regenerated.
• If you add a new Artboard to the Adobe illustrator production file, or save an existing Artboard as a different name, you must upload the updated sprite files to platform via the Administration > Config > Resources section and save them in the /resources/theme/default/style/images folder. This step should be performed after the Rebuild Styles option is used.
• After styles are regenerated and sprite files are uploaded, clear the browser cache and refresh the screen to view the changes.
• For information on uploading Sprite files to the platform, see How do I upload Sprite files to the platform?

Back to top

How do I upload my custom.less file after I have updated it?

The Administration > Config > Custom Styles section includes a Download button that allows you to download the custom.less template.

To upload the custom.less template:

1. Navigate to Administration > Config > Custom Styles.
2. In the Styles Customization section, click Upload. A File to Upload dialog box displays.
3. Click Browse to target and select a file, the Upload. After the file has been successfully uploaded the "Platform style sheets have been successfully regenerated using custom.less" confirmation message displays. This indicates that the style sheets were automatically rebuilt when the custom.less file was uploaded. The custom.less file is uploaded to the \resources\less directory.

Back to top

After I update my custom.less file, how do I apply the changes to my platform deployment?

After you update your custom.less file, you can apply the changes to the platform deployment by uploading the style sheet. After the style sheet is uploaded, the site automatically rebuilds the site style sheets and the changes are reflected on the site. See How do I upload my custom.less file after I have updated it? for more information.

If the style sheet and sprite file changes are not visible immediately after the style sheet rebuild process is complete, refresh the browser cache.

Note: It is recommended that you make a backup of the default custom.less file before overwriting it with your updated version.

Back to top

How do I rebuild my color scheme styles after I have uploaded the custom.less script?

The Administration > Config > Custom Styles section includes a Rebuild Styles option that allows you to Initiate a rebuild of the platform style sheets. This option is primarily used when a platform update is installed that includes style sheet changes. This option is primarily used when a site update is performed where style sheet changes were made.

For example, if an update was applied to the site and the update included new additions to the UI that required style sheet changes; this would mean that the style sheets were not active immediately after the update was completed. In this case, the Rebuild Styles option would complete update process by regenerating the style sheets.

To rebuild site style sheets:

1. Navigate to Administration > Config > Custom Styles.
2. In the Styles Customization section, click Rebuild Styles. The rebuild process takes approximately one minute. After style sheets have been rebuilt, the "Platform style sheets have been successfully regenerated using custom.less" confirmation message displays.
3. After the style sheets are regenerated, clear the browser cache and refresh the screen to view the changes.

Back to top

How do I make my style and sprite file changes visible on my platform deployment after I regenerate styles?

In most cases, after you regenerate styles and upload your sprite files you must clear the browser cache and refresh the screen to view the changes.

Back to top

How do I configure a custom footer?

The footer customization process includes the following steps:

1. Footer customization is done with an HTML file that acts as a template. The HTML file is uploaded to the /resources/templates/footer with the name footer.htm.
2. Links in the footer.htm file can have a class attribute with values "ext" or "dialog." When a link has a class "ext," clicking on the link will open a popup window. When the link has a class "dialog," clicking on the link will open the href in a dialog window.
3. A footer can be uploaded using the File Manager in the Site Administration > Config > Resources > Resources section. An uploaded footer becomes effective within five minutes if the page is refreshed after five minutes.
4. If the footer.htm file requires additional styles, you can add them to custom.less.

Back to top

How do I configure a custom logo?

The process of adding a custom logo to the platform includes configuring your logo to comply with the logo file requirements (listed below), and uploading it to the platform.

• If you would like to assign your own custom logo name, perform the "To customize your logo filename" step first, then upload the logo following the "To upload your logo file" step.
• If you will be using the default logo filename (atmologo.png), perform the "To upload your logo file" step only.

Logo File Requirements

Your logo must comply with the following requirements:

• Width should be no more than 400px.
• Height should be no more than 50px.
• Background must be transparent.
• File format should be PNG.
• You can use the default filename (atmologo.png) or you can customize the logo name in the custom.less style sheet.

To customize your logo filename:

1. Go to Admin > Config > Custom Styles.
2. Click Download to download a new custom_template.less file and rename it to custom.less.
3. Load the custom .less file into an HTML editor and change the filename for this entry: @logo-img: url("images/<image_name>.png"); to the new logo filename.
4. In the Custom Styles section, click Upload to upload the updated custom.less file. Note that the upload process automatically rebuilds the style sheets (i.e., executes the Rebuild Styles function).

To upload your logo file:

1. Go to Admin > Config > Custom Styles and click Rebuild Styles to ensure that all the proper style folders are generated. Note: If you specified a custom logo name in custom.less and already uploaded the style sheet the rebuild step is not required.
2. Go to Resources > Resources > File Manager and drill down in the "Theme" folder until it looks like the following:
   
   
3. Click New Directory and name it "images." The screen will look like this when you are done:
   
   
   
4. Click into the \images folder and upload your logo file. Note that the logo must comply with the stated logo requirements.
5. If for some reason the new logo does not display try refreshing your browser cache and/or go to Admin > Config > Custom Styles and click Rebuild Styles.

Back to top

Logins:

How does login configuration work?

As part of the initial platform setup, a Site Administrator installs and a series of domains that represent an enterprises login requirements for the platform:

• Supported domain types for the platform login include Facebook, OpenID Identity Provider (e.g., Google), LDAP, and CA SiteMinder.
• The platform installation also includes a default platform domain that is automatically enabled when a new user account is created.

After the login domains are installed, they must be enabled and customized with a Target Host (virtual host name) and Logo/Avatar (Login Button), and external login screen display Mode (i.e., Popup/Main). The Site Administration > Config > Logins section includes a login management interface where Site Administrators can perform these tasks.

The screen is organized as follows:

Domain Type	Description
Domain	A read-only field that displays the domain name as defined when the domain was configured using the Add Domain Wizard. The domain name cannot be modified.
Title	A read-only field that displays the description of the domain as defined when the domain was configured using the Add Domain Wizard. You can change the description in the Site Administration > Domains section using the Modify function.
Enable	A checkbox that allows you to enable or disable use of the domain.
Target Host	A text box that allows you to enter a virtual host name for a domain. See What is a Target Host?
Logo / Avatar	An Upload button that allows you to select a logo that will invoke the login page for the associated domain.
Mode	Mode allows you to select how the login page associated with a domain will be integrated. Two options are supported: Popup - Displays the external login page as a popup Main - Displays the external login page in the platform home page instead of a popup. Note: Mode options are not configurable for the default login page.

Back to top

Does the platform provide a default login?

When the platform is installed, a default login domain is automatically created and can be viewed and managed by the Site Administrator in the Site Administration > Config > Logins section.

• The default login domain is enabled by default.
• A new user can log in using the default login domain by clicking the Login/Signup on the platform Top Navigation and entering their email and password on the default Login page.

Back to top

What is a Target Host?

Site Administrators can specify different URLs for logging into the platform based on roles (Administrator, Developer, User, etc.), or for a Backdoor Login if one of your domain configurations is down. This is accomplished by specifying a virtual host address for each login domain referred to as a Target Host (e.g., <role>.<company>.com).

The recommended approach is to develop a login plan for each role that covers different types of login scenarios.

• For example, if your site uses CA SiteMinder exclusively for logins, and the CA SiteMinder login is down for some reason, you will need a backdoor login to investigate the problem.
• In this scenario you could configure the platform default login Target Host so that only the Site Administrator can log in using email and password credentials.
• You could also configure an alternate Facebook (using the Facebook Connector domain) or Google login (using the OpenID Relying Provider domain) and specify a Target Host for backdoor logins.

Back to top

What login page integration modes are supported?

The platform allows you to select how the login page associated with a domain will be integrated. The integration method is selected via the Mode option on the Site Administration > Config > Logins page for a specific domain. Two options are supported:

• Popup - Displays the external login page as a popup.
• Main - Displays the external login page in the platform home page instead of a popup.

Note: Mode options are not configurable for the default login page.

Back to top

How do I enable and customize a platform login?

1. Navigate to Site Administration > Config > Logins. The Configure screen displays a listing of domains that have been added to the platform.
2. To enable the domain, click the checkbox in the "Enable" column.
3. If you would like configure a virtual host for the domain, enter it in the "Target Host" text box. See What is a Target Host? for more information.
4. In the Logo/Avatar column, click Upload and select the logo you would like to display for the Login button. See How do I upload and crop icons? for more information.
5. In the Mode column, click the radio button of the identity store integration method (Popup or Main) you would like to use for the current domain. See What login page integration modes are supported? for more information.
6. Click Save to commit your changes.

Back to top

How do I disable a platform login?

1. Navigate to Site Administration > Config > Logins. The Configure screen displays a listing of domains that have been added to the platform.
2. To disable the domain, uncheck the "Enable" column.
3. Click Save to commit your changes.

Back to top

Resources:

What is a Resource?

In the context of the Site Administration > Config > Resources section, a Resource is any type of publishing artifact used in the construction of the platform UI presentation. This includes css style sheets, images, sprite files, site copy, API documentation, and online help documentation.

Back to top

How do I upload style sheets to the platform?

When you upload a new custom.less file in the Custom Styles section the /resources/theme/default/style directory is automatically created and includes the site default style sheets (i.e., base.css, parameters.css, style.css, and supplement.css).

• These style sheets cannot be updated using the upload process because the styles are regenerated each time a new custom.less style sheet is uploaded.
• New styles that you would like to add to the platform can be added to the custom.less file. When the custom.less file is uploaded, the new styles will be added to the site as part of the rebuild process.
• If you would like to change the default style sheets, contact your Site Administrator.
  

Back to top

How do I upload Sprite files to the platform?

If you've updated one or more Sprite files, you can create an /images folder in the /resources/theme/default/style directory and upload them. Sprite files must be uploaded AFTER you have uploaded your custom.less file and have rebuilt the site styles (either automatically as part of the custom.less upload process or manually by executing the Rebuild function).

1. Navigate to Site Administration > Config > Resources.
2. In the Resources section click File Manager. Navigate to the /resources/theme/default/style directory. You will see the following default styles which were autogenerated as part of the custom.less upload process.
   
   
3. Click New Directory and assign the name "images."
4. Navigate to the /images directory.
5. Click Upload. The File Upload dialog box displays. Select the Sprite file you would like to upload and click Open.
6. Click Upload to upload the file to the selected directory. Repeat this process until all the Sprite files are uploaded.

Back to top

How do I upload content to the platform?

Content that can be uploaded to the platform includes API documentation, Online Help, Landing Page, Signup, and Support. Content will typically consist of HTML files, images that are referenced in the content, any custom styles sheets that support the content, and reference material (i.e., PDF's, diagrams, etc.) that are linked in the content.

• API Documentation Content - The /content/api directory includes folders for each API that is added to the platform. When you initially add your API using the Add a New API function this folder is automatically generated and an id name is automatically assigned as the folder name. API content is uploaded to this folder.
  
  
• Online Help Content - The /content/home/learnmore directory includes html and supporting graphic files that comprise the the platform Online Help.
  
  
  
• Landing Page Content - The /content/home/landing directory includes HTML and supporting files that comprise the platform home page, including images, content, css styles sheets, javascript files, and supplemental documents such as the Developer Agreements that are used as part of the platform signup process.
  
  
• Signup - The /content/home/signup directory includes an html that includes response content for various platform Signup scenarios.
  
  
• Support - The /content/home/support directory includes html and supporting graphic files that comprise the Support section of the platform.

To upload a file:

1. Navigate to Site Administration > Config > Resources.
2. In the Content section click File Manager.
3. Select the directory of the content area you would like to update (illustrated above).
   
   

   

4. Click Upload. The File Upload dialog box displays. Select the file you would like to upload and click Open.
5. To upload the file to the selected directory, click Upload . If you receive an overwrite message click OK.

Back to top

How do I upload the API and Online Help content style sheet to the platform?

The document.css style sheet contains all the custom styles for both API and Online Help documentation. It is located in the /content/style directory. If you make changes to the document.css file, you can upload it directly to the /content/style directory.

Note: This style sheet is not affected by the custom.less style sheet regeneration process and will not be changed or overwritten when a new custom.less file is uploaded.

To upload a document.css style sheet to the platform:

1. Navigate to Site Administration > Config > Resources.
2. In the Content section, click File Manager. Navigate to /content/style. You will see a directory similar to the following:
   
   
3. Click Upload. The File Upload dialog box displays. Select the document.css file and click Open.
4. To upload the file to the selected directory, click Upload . If you receive an overwrite message click OK.

Back to top