1.Wide Layout
First, make sure you have a wide layout/template where the mainzone is at least 560px wide. Preferably around 600. Typically this is a template will have a left zone for a nav and a mainzone, omitting the right zone. This is necessary for most CMS5 systems to look good.
2. Make Sure the site is 100% Ready for Upgrade
Make sure there are no customizations to systems which will be lost after upgrade. When you upgrade you will be reverting system pages back to default, this is how you get the CMS5 systems to show up. If there are customizations to these CMS4 systems which will be lost by doing this, you have to make sure you have a plan to add these back in post-upgrade and revert. If you are confident they customizations which you can do yourself to the CMS5 systems after you upgrade and revert, fire away. If not, ask Jake to make sure. He will either tell you it is something you can do or something he has to do. If the former, make sure you ask him how if you're not certain of the process. If the latter, ask him if he has time a few minutes to help you handle those after you run the upgrade and revert the system pages. If not, find out when he will be available and schedule the upgrade for then. You can also discuss this with Chooch, as some of these customizations may be things the client no longer uses or needs, or that the new systems have built in or a better way of handling, in which case you don't have to worry about them.
3. Flip That Switch!
Once that is all squared away, ask Chooch to press the upgrade button. He will know what to do (DaiShu checkbox and save in the project settings admin page in CMS4). Once he says he has done this, refresh and the site will now be on CMS5.
4. Get Those 5 Systems Set
Your job now is to quickly revert all system pages to default. This means each unique system page, not every single system page. An example of this is the video center. You don't need to revert each video page to default, just one video page, as this will apply to all others. Be careful with systems like the Events system where there are many system pages which are easily missed (like the signup pages). The best way to handle this is to go into the site map and ctrl+click on every system page, and one by one, revert all of them at once.
5. Style/Color Them 5 Systems
Next you gotta get those systems looking right for the sites design and colors.
First, for the systems which exist on the site, copy their corresponding folders from here: (W:\__ Default CMS Files\CMS5 Upgrade Files) into a new folder named "Upgrade Files" in the clients W drive folder.
Make a folder in the image manager on the site named "main-images"
Copy all images from each of these system folders into the main-images folder on the site. These are the default images the new systems use.
Copy all styles from these folders into the systems.css stylesheet on the site
6. QC/Test Them 5 Systems
Now that all system pages are reverted and the basic styles and images set, visit each one in preview, make sure they look right and test them. Any weirdness/broken stuff fix asap. If you're unsure how to fix them, ask me or Jake. Any error pages like a server error or the like, ask me or Jake. Add any customizations which are needed that used to be on CMS4 or the client has requested. Once this is all done, commit each page.
7. Recolor Time
Now that all the systems are working and styled, time to recolor them.
Use PS's color picker to find good colors on the design, and change the CSS colors to match the site for the various non-image colors in the systems.
NOTE: For the submit buttons in most of these systems, you'll need to edit the color ranges in the advanced mode of the css editor AND SAVE THEM in advanced mode, otherwise your changes will not be committed and some of your styles may be removed entirely. The CSS editor will nuke any styles it doesn't consider valid, and it doesn't have a full database of CSS3 attributes, so be careful with advanced stuff like color ranges.
Open up the necessary PSD's in the Upgrade Files folders and recolor the various layers to the sites colors, save out the necessary slices (not all of them are necessary) and upload with the same name as the existing default images to overwrite them. Refresh and check to see if your colors look good. Use the color picker in PS to get close to the colors on the site. On some layers you'll need to lighten the color as it is a PNG image which will make the color look different on the site when you have a white bg behind it. You can see what this will look like in PS by turning on the white BG at the bottom, just make sure to turn it off before you save out the images.
Some images may need to be custom created, such as when a client asks for the default physician image (for when there is no doc photo) to have the hospital logo. Make sure you handle all these; ask the marketing manager (bree or chooch) to make sure you got all of them.
TIP: Use the inspect tool in your browser to find the name of the specific images you need to actually recolor. Not all of the slices in the PSD's need to be saved out, just a few.
8. QC Colors
Now that you've got your new images set and your CSS colors done, test the system as if you were a user and make sure that when things are dropping down, loading etc all colors are good. Pay close attention to those dropdowns like in the physician name and specialty ajax grids and those 1px seperators.
9. QC Formatting
Some systems have their size of elements set with percentages, like one the physician detail page. Make sure these are displaying aesthetically; to get it looking right you may need to adjust percentages.
Some systems also have many tokens showing info from the DB. Sometimes these will need to be reformatted to show each value vertical rather than horizontal, for example. Check the physician and events detail pages to make sure they look sexay.
10. Overall QC and Second Pair of Eyes
Now do an overall QC paying attention to how everything fits in to the design and make sure everything looks muy beuno. Once done, get a second pair of eyes, myself or Chooch preferably, to look over things briefly. Handle anything that needs to be handled.