If Developing the Entire Style Begin with Step 1

http://www.umassmed.edu/uploadedFiles/zzz/CSS_Framework/documentation/ Styles Tasks 2. Style Tasks

If developing the entire style – begin with Step 1 If only creating the working folders – start at Step 3

1. Make sure we have everything A. PSD files or sliced images  Rollover images in all states (regular, hover, visited) B. Visual Guide  All classes shown  H1-H6  User Defined styles (ex table.content, h4bar1, h4bar2, etc)  Links, all states (regular, hover, visited) o A o Leftnav o Topnav o Topnav persistent  Selectors (block, quote, ul, ol) C. Does this new style have a different footer?

2. Gather and Create Images A. If working with a PSD or AI file  Slice into web images B. Apply naming convention for images (look through framework for image names, use the same naming convention where possible (i.e. BG_2col.gif which is the 2 column background or BG_3col.gif for the 3 column background) C. Upload images in next step

3. Set Up CSS Files in CMS A. Make sure you have the current CSS files  Download and unzip the current CSS Framework ZIP file to your local - http://www.umassmed.edu/cssframework/download.aspx

1 of 21 pages Styles Tasks updated 11-5-2008

B. In DEV, QA and PROD Create a new folder [folder title is your style name] under Root -> Styles (for Umnet sites, skip this step)

C. Edit folder properties (on PROD only): permissions – remove everyone group (for Umnet sites, skip this step)

 Make sure Allow this object to inherit is unchecked  Click the delete icon  Click the Everyone group  You will need to turn this back on when the style goes live

D. Upload Files: in workarea library, upload .css files 4. Find the files you copied to your local from the CSS Framework ZIP file 5. Do not copy files from another style unless working on a color version

 Log into the CMS on DEV, QA and PROD  Click on the Library button, make sure to choose files in the dropdown  Edu sites – navigate to Root -> Styles -> (new folder you just created) o Umnet sites – copy to Root -> UMnet site name -> Styles  Files to upload are Title in Workarea Library 1. content1col.css Content 1 column 2. content2col.css Content 2 column 3. content3col.css Content 3 column 4. wBlogs.css Widget Blog 5. wCalendar.css Widget Calendar 6. wForums.css Widget Forum 7. wWiki.css Widget Wiki  Make sure filenames match what is above, it cannot change in anyway o Ex. content1col(2).css will not work  check folder path in library, your local will need to match this folder structure o Edu sites – filepath will look similar to: /uploadedFiles/Styles/(new folder you just created)/ Umnet sites – filepath will look similar to: /uploadedFiles/(umnetsite root folder name)/Styles/

B. Upload images: images for style from your local (to DEV, QA and PROD)  Stay in the Library, choose images from the dropdown  Upload any images that you may need for this style o Ex. backgrounds, menu bullets, headings, layout imagery o Banners should be uploaded elsewhere  Make sure filenames do not get numbers appended o Ex. BG_col1(2).gif will not work  check folder path, your local will need to match this folder structure o Edu sites – filepath will look similar to: /uploadedImages/Styles/(new folder you just created)/ Umnet sites – filepath will look similar to: /uploadedImages/(umnetsite root folder name)/Styles/

C. Upload Banner  If a microsite is already created, upload the banner to the microsite. o Otherwise, upload the banner to the Style Working Models area later in Step 6E

D. Go to Content: now to add style content [this will change for Phase II ]  Go to Framework Style folder o EDU sites Root -> Styles -> Framework o in UMnet – need to create this content . open CMS for EDU and use the files as a guide for creating the content on UMnet  copy 7 pieces of content o navigate to Root -> Styles -> Framework o Hover over Action, click Move/Copy o Choose COPY and check ‘publish copied content’ o Set folder to your new folder o Select content to copy 1. Content 1 Column Style 2. Content 2 Column Style 3. Content 3 Column Style 4. Widget Blog Style 5. Widget Calendar Style 6. Widget Forum Style 7. Widget Wiki Style  NOTE: This will take a while, do not click anything else while this process is running. If the process errors, check which content was copied and copy remaining content.

E. Once complete, Edit each piece of content to associate metadata  Go to your new Style folder o EDU sites Root -> Styles -> (new folder you just created) o in UMnet Root -> UMnet site name -> Styles  Set Metadata ‘style sheet file’ to appropriate css files for your style

6. Smartform creation (skip to next step if no new smartform is needed) A. Create the smart form  Go to Settings -> configuration -> Smartform Configuration  Click the add smart form icon  Give it a meaningful title, Save o It will open in design mode  design smartform as needed, Save  Create xslt if needed o Place on DEV in xmlFiles folder and VSS o If xslt was created, click Edit icon on smart form . Set a description . Associate the xslt if one was created, Save B. Associate the smart form to a folder  Go to Content, click on the smartform folder (on EDU, edit zzz -> IS QA Site -> Smart forms)  View properties  Edit  Click the Smart Forms tab  Click the drop down and choose the new smartform  Click add to the right  Save C. Create 1 footer using that smartform

7. Set up Local for Style development If you not doing the style development, skip to Step 6 A. Download CSS Framework ZIP from the CSS Framework site B. Set up your Home Directory  Style file paths are relative so you must either use your webroot or change you default home directory o To change your default home directory, use IIS Manager  From the Start menu, point to Administrative Tools, and then click Internet Information Services (IIS) Manager.  from the Run dialog box, type inetmgr, and click OK

 right click Default Web Site, chose properties  click home directory tab and update the local path  click apply  change this back at any time to work on other projects

C. On your local, create folder structure to match that of DEV, QA and PROD  For EDU: In your web root, make sure you have folders : (inside will be \IntranetCMS\)  \InternetCMS\uploadedfiles\graphics  \InternetCMS\uploadedfiles\Styles\modules  \InternetCMS\uploadedfiles\Styles\XXX (your new style name)  \InternetCMS\uploadedimages\Styles\XXX (your new style name)

o Uploadedfiles . FOLDER: /Styles/modules/ (only need to do this the first time)  Copy from VSS modules folder  VSS: VSS_WEB - $/EKTRON/STYLES WWW/modules . FOLDER: /Styles/Your Style/ o (create new style folder – will match DEV, QA and PROD folder name)  Copy ZIPPED framework files to your local folder  Make sure to use ZIPPED files, do not copy another style unless you are developing a color version o Uploadedimages . FOLDER: /Graphics/ o Copy this folder from PROD and its subfolders . FOLDER: /Styles/Your Style/ o (create new style folder – will match DEV, QA and PROD folder name)  Copy any images for style to this folder

 For UMnet: In your web root, make sure you have folders example: \MAMHTransformationCMS\uploadedfiles\MAMHTransformation\Styles o UMnet folder name . uploadedfiles o UMnet folder name  /Styles/modules/ (only need to do this the first time)  Copy from VSS modules folder  VSS: VSS_WEB - $/EKTRON/STYLES WWW/modules  Copy ZIPPED framework files to your local folder  Make sure to use ZIPPED files, do not copy another style . Uploadedimages o UMnet folder name  /Styles/  Copy any images for style to this folder  Optional: upload a mock banner

D. Create a sample page to use to view style while developing  From the framework ZIP, copy the files from the folder HTMLmock_ups to you local webroot

E. Edit your local HTM file, update the LINK tag with the appropriate url path to the 3 column css file  EDU like: /uploadedfiled/Styles/yourstylename/content3col.css  UMnet like /uploadedfiled/umnetfoldername/Styles/content3col.css

F. Edit your local .css files:  Open all css files for editing: search and replace, search for: /uploadedFiles/Styles/framework o EDU sites, replace with /uploadedFiles/Styles/(new folder you just created)/ o UMnet sites, replace with /uploadedFiles/(umnetsite root folder name)/Styles/

G. Choose a basic modular header style from  http://www.umassmed.edu/uploadedFiles/zzz/CSS_Framework/documentation/ModularHeaders.doc  Copy the code  Paste in the appropriate place on layout.css, and/or the topnav css files

H. View your local HTML files in a browser  All should show the basic framework style  If not, make sure all css files are in place and all links and imports have been updated  Your html page should render like the image on the right below If you do not have the header styles in place, it will render like the image on the left below

I. You can now begin developing the style

8. Create WORKING MODEL Site Structure (IS QA site) [will change in Phase II] This is for EDU only. This is important for maintenance and testing. A. Create new folder in zzz -> IS QA Site -> Styles Working Models in DEV, QA and PROD,  Name folder your new style name (example: “Style 7” or “Aurura”)

B. Edit folder properties  Set style property to: uploadedFiles/Styles/(new folder you just created)/UD.css o NOTE: The ud.css file will be used when viewing content in the Content Designer Copy properties from layout and color and add to update ud.css  Make sure all metadata is available on folder o Title o Header Graphic o Description o Widget Blog o Widget Calendar o Widget Calendar - Event List o Widget Content o Widget Collection o Widget content o Widget ListSummary (all of the widget list summary metadata pieces) o Intro content o Leftnav content o Leftnav o Topnav o Topnav Persistent o Style o Form ID o Forum ID C. Copy Content: Navigate to “Framework” folder zzz -> IS QA Site -> Styles Working Models -> Framework  Click Action, move/copy content  Choose Copy, check ‘publish copied content’  Set folder to your new folder  Select content to copy o Content 1 column Landing Page o Content 2 column Landing Page o Content 3 column Landing Page o Widget Blog Landing Content o Widget Calendar Landing Content o Widget Forum Landing Content o Widget Wiki Landing Content  This process takes a while – do not click anything until this is finished

D. Edit folder properties again: Once complete, navigate to your new folder  edit the folder properties on your new folder o breadcrumb tab . Make sure Inherit is unchecked . Create or edit breadcrumb o Title: Your Style Name o Point to “Content 3 Column Landing Page” in your folder E. Upload banner for testing  Go to the Library  Navigate to zzz -> IS QA Site -> Styles Working Models -> (your new folder)

F. Create Leftnav Menu No longer using this is important to be able to test the working model easily  Click on your folder  New Menu o Title: Yourstylename Menu o Advanced setting – type in description field ‘Yourstylename Menu’ if you want this to show as a Heading on the top of your menu o Save  Hover over your new menu title  Click add  Choose content item, next  Check all content in your folder  Click add  Edit menu item titles as you wish  Remember what you titled this menu as it is harder to find in the upgrade, sorted by title

G. Edit content ‘Content 3 Column Landing Page’ setting appropriate metadata  Title  Description  Header Graphic (can change if using a specific one)  Footer - choose footer from IS QA site smartforms folder  Widget Calendar - Event List – keep as is o or point to “Event List widget” in IS QA smartform folder  Widget ListSummary – o Clear, change – point to this style’s folder in Style Working Folder o We want to show links to all content in this folder for testing  Widget Collection – keep as is  Widget content – keep as is  Intro content o Optional: Choose content in IS QA Site -> Included content  Leftnav content– keep as is  Style o Choose your 3 column style  Leftnav o Clear – should be blank  Topnav o Clear – should be blank  Topnav persistent o Clear – should be blank  Add Alias o Alias tab, add alias: zzz/ISQA/your style name/filename o Example: zzz/ISQA/style5/index - this is important for keeping these pages out of our search (zzz folder is excluded from search) - Also, this is important to be able to test the working model easily - Names must be consistent

H. Edit all other content  Change the style metadata on the other pieces of content in your new folder you only need to reset the style metadata, all else will inherit from ‘Content 3 Column Landing Page’  Make sure widget metadata is correct (ex Widget Forum is set to 5238, Widget Blog is 5236)  set appropriate style o Blog -> widget blog o Calendar -> widget calendar o Forum -> widget forum o Wiki -> widget wiki o 1 column -> content 1 column o 2 column -> content 2 column o NOTE: Do not add additional content pages like special case styles as this will cause maintenance issues down the road. Trying to keep number of files and filenames consistent. If there are special cases for a homepage or a 1 column styles, just use 1 column as above. There should never be more than 7 pieces of content here. What we don’t want is: . homepage . faux 3 columns . sample 2, etc  Add alias - /zzz/ISQA/your style name/filename - this is important for keeping these pages out of our search (zzz folder is excluded from search) - Also, this is important to be able to test the working model easily - Names must be consistent Examples  zzz/ISQA/yourstyle/index  zzz/ISQA/yourstyle/1col  zzz/ISQA/yourstyle/2col  zzz/ISQA/yourstyle/3col  zzz/ISQA/yourstyle/blog  zzz/ISQA/yourstyle/calendar  zzz/ISQA/yourstyle/forum  zzz/ISQA/yourstyle/wiki  zzz/ISQA/yourstyle/form

9. Test Links (for viewing and documentation) A. Content Designer display Login into workarea (do for DEV, QA and PROD) to view content and make sure ud.css is rendering properly B. Web page display Type aliases in browser – should all render fine in default framework style C. If need be, Editors can now begin adding content and pages while CSS developer develops on local comptuer  For editors to begin o Set folder property styles to appropriate ud.css o Set styles on landing pages within editor’s new micosite

10. Begin Style development If you not doing the style development, you are now done A. Make sure folder structure on local matches that of DEV, QA and PROD  All filepaths and filenames must be the same B. You can now begin CSS development on your local

11. Move to DEV A. Once development complete on local  Create file deploy for style files o Add to file deploy from your local: . 1col.css new . 2col.css new . 3col.css new . Layout.css new . navLeft_508.css new . navTop_horiz_508.css new . navTopPersist_horiz_508.css new . color.css new . UD.css new . Content1col.css overwrite . Content2col.css overwrite . Content3col.css overwrite . wBlogs.css overwrite . wCalendar.css overwrite . wForums.css overwrite . wWiki.css overwrite . the xslt file for the footer if one was created . note: This automatically overwrites the 7 files that were uploaded on DEV via CMS library, make sure Step 3 is complete – those 7 files should be tagged as “overwrite” while the other 8 are tagged as “new”

B. View DEV test links in browser C. Fix any issues that appear on DEV (fix on DEV css files, not local)  Once fixed, then move fixes to local and test again on local and on DEV D. Copy files to VSS  Navigate to Ektron -> Style Framework -> (Styles inside, or Styles WWW or Styles UMnet)  Create a new project, your style name  Copy files to this new folder

12. Move to QA (after accepted on DEV) A. Push file deploy to QA (of css files) B. Use QA test links to view in browser (test your own work here)  Should be no problems at this point C. Internal testing (use another developer to test)  Create test plan  Email QA test links to someone else to test as well o Let them know what they should be looking for o Will need to test all 7 styles, make sure all styles exist (1 column, 2 column, 3 column, blogs, calendar, …) o Need to test WYSIWYG styles as well – these styles should match what is on the web site D. Fix any issues that are relevant  Undo file deploy  Check files out of VSS  Update files on DEV  Redeploy to QA E. Once Internal testing is complete, send QA test links to project manager F. Prepare Change control  Note: Change control must go out at least 3 days before deploy to PROD  List all files  List test links for QA and PROD  Schedule time with Karen McHugh for file deploy date  Attach change control via email o Email to [email protected] o cc: Leslie (Cosgrove) Rutter, Tony Wareck, Karen McHugh and the project manager o Subject follows this wording - CC: New Style - Style Name o Paste top portion of change control into email body

13. UAT A. User Acceptance is coordinated by the PM on the project, this is here just for documentation B. If updates are needed, PM will send along  Reverse file deploy  From VSS, check out needed files  Complete updates as needed on DEV  Push file deploy to QA  From VSS, keep checked out until File Deploy has gone to PROD or file deploy will not work

14. Move to PROD (after accepted on QA) A. Submit change control  Make sure change control has gone out 3 days before move to PROD B. Finalize file deploy  From VSS, keep checked out until File Deploy has gone to PROD or file deploy will not work C. Edit folder properties on your style folder  Add permissions for everyone group on PROD or permissions to a particular user group

15. Style Guides Can be done anytime Style Guide A. Update visual style guide (included in CSS Framework site - documentation – “7. Style Guide Template”)  This is a word doc which you will export to PDF  Modify Style formatting in Word (do not make changes to the text itself) o Open the style formatting window o Modify the styles that are in use (click once on text to see which style it is using) o Make changes to text if style formatting is not working for you  When complete, export to PDF B. Upload visual style guide to workarea on PROD only root -> Styles -> (your new folder) C. Add to VSS

User Defined Guide D. Update user defined style guide (included in CSS Framework site - documentation – “8. User Defined Styles”)  this is to help CMS editors see a visually representation of the style if they view the style content page. They can only view this in the workarea.  This is a word doc which you will export to PDF  Modify any images as necessary to style (do not make changes to the text itself)  Add instructions as necessary for this style  Add any additional instructions  Size of banner  Other imagery used  Metadata to use?  When complete, export to PDF E. Upload user defined style guide to workarea on PROD only root -> Styles -> (your new folder) F. Add to VSS

G. Edit Style Content on PROD only (3 column style and 2 column style)  Add link on Style content pages to PDFs you just uploaded  for an example, view in workarea content Styles -> Framework -> Content 3 Column style

16. Style Instructions (After styles are complete) A. Create image of style  Screen shot of finished styles for 2 and 3 column o In photoshop, crop off browser o Save as jpg o Upload jpg, on PROD only, to workarea Root -> Styles -> (your new folder) B. Add thumbnail image to style content  Edit style content, on PROD only o Edit 3 column style and 2 column style  Add thumbnail image to style content so cms editor can preview the style o for an example, view in workarea content Styles -> Framework -> Content 3 Column style  Update link to point to the 2 PDFs you uploaded o Style guide and User Defined guide