Switching a course to the Generate/Climb Template

Switching a course to the Generate/Climb Template

This article is intended for a Developer or Tech Support Rep to update a client to the generate (aka Climb) template. This will involve creating a new entry into tblUXSkin, updating the SkinId in tblTrainingCourse for each course that is going to the new module, and a walk-through of css & file changes.

1. Open the S3 bucket and download the entire 'generate' folder located in comevo-prod/skins/_generate-template to your desktop.


2. Navigate to the clients current skin folder, located in comevo-prod/skins/%client%/skin. Download the entire rocket folder.


3. Open both the generate and rocket folders from above. Navigate to the images folder. Copy 'logo.png' and 'placeholder.jpg' from the rocket folder to the generate folder. Rename 'splash.jpg' to 'bg.jpg', and copy it over from rocket to generate. There should now be three images in the generate folder.


4. Navigate to the style folder in each download. In the rocket folder, open 'colors-rocket.css'. In the generate folder, open 'style.css'.


5. Copy the main color hex code from colors-rocket.css to your clipboard. Go to style.css, hit Ctrl + h. Find: #CF102D , Replace: #%mainColorHex%. Scroll down to the footer color on line 89. Also paste the primary color into the hex code.


6. Go to https://html-color.codes/hex/ or http://paletton.com/ and enter the primary color. Choose a slighly lighter/brighter color. Generally, two tones from the end on html-color is a good fit. Enter this as the primary alt color.


7. Copy the secondary color from colors-rocket.css to your clipboard. Go to style.css, hit Ctrl + h. Find #999 & #BABBBC, Replace #%secondaryColorHex% . Create alt second color in using same method as step 6 above.


8. Create the parallax-background:after filter on line 50. Each one of these needs to be styled based on the client's background image and color scheme. Generally, we are going to add a grey filter over the image, but in some cases (ie: NAU) the image is already greyscaled so we added a light blue filter to fit color scheme. Here are some examples of parallax background filters, choose one of the grey filters as a default and come back to check it after skin has been posted:

  • background-color: rgba(43,43,43,0.65); - grey filter. demo_prospects
  • background-color: #7e7e7e; - demo_pdx grey filter
  • background-color: #999; - grey filter for pasadena
  • background-color: rgba(0, 52, 102, 0.5); - blue filter over nau

 

9. Save the style.css file and close out of it. Drag the entire generate folder into the clients skins/ folder in the s3 bucket. Go to each file you uploaded, and make sure the permissions match the image below.

Capture7.JPG

10. Create a new database entry in tblUXSkin. SkinId = Auto Increment, TemplateId = 4, SkinPath = %client%/generate/default, UXPageLayoutGroup = NULL, SkinName = %Client% generate default. After submitting, take note of the new SkinId


11. Navigate to tblTrainingCourse and update the SkinId for each course you are switching to the new module. You only need to update the current training course instance for each module.


12. The skin should now be live. Navigate to the training course and enter through the entire course to make sure everything is working. If the parallax background filter doesn't look right, you can now edit it with the Chrome Dev Tools to pick a better fit.


13. After you have confirmed everything is working, assign the case back to the customer care rep who had opened the case, put the status to pending customer care, and write your resolution.

    • Related Articles

    • Switching from Rocket to III Template

      Dev walk-through to switch an orientation from the Rocket template, to the "flare" iii template. In a nutshell, this involves the creation of a new row in tblUXSkin, to associate the SkinId with the row in tblTrainingCourse, and some ...

    • How to Copy a Module into the "Demo" Handle

      Step by step walk through to copy a live site (course) into the Demo Handle. Must Haves: Organization Unit Handle, Organization Unit ID Module ID that will be copied to "Demo", Training Course ID for current instance of training course The "Demo" ...

    • How to Set up an iQuanda/edQuestion site- Check for updates

      Steps needed to set up edQuestion for a client Add entry to tblSite in databae iQuanda using handle (aka “name”) and make note of site ID Add tag to C:\WebSites\iquanda\App_Data\Sites.xml Set Site ID attribute to new ID Set Site name attribute to ...

    • How To Add a Module To Select List in Manage Users

      In the Manage Users section of the Management Console, There is a "Send email invite to" select list for modules. In order for a module to show up here, you need to do the following. In the Manage Users section of the Management Console, There is a ...

    • Comevo Staff Meeting - Human Resources - June 17, 2021

      Staff Meeting Agenda Question of the Day -  Do you collect anything? Comevo Update - Leslie Employee Spotlight Comevo Learning Hosted by Human Resources What role does  Human Resources play in Comevo in general? Questions for  Human Resources. ...