The Care and Maintenance of J5 MAC New Look

Naming Conventions  Each graphic and include item is named by function_contract area_secondary identifier. Example:  bg_j5b_top is the top part of the background for J5 MAC Part B  leftnav_j5b_faq is the left navigation include for the FAQ area of J5 MAC Part B

Neutral Page Header  The header consists of: 1. Graphic encompassing four contract areas 2. Text identifier of company and contract area 3. Navigation to contact, CMS, eNews and site map 4. ISO graphic 5. Link to C-SNAP

Alert Box  The home splash page and each contract splash page has an alert box.  The background is controlled through the div “alertbox”  The content is controlled through an include file  alert_home.txt controls the alert for the home page  Updating the Alert  Update the alert_###.txt to change the alert for that contract area.  Hiding the alert  Add the class “hide” to the alertfull div  Add a paragraph with the “hide” class around the include file.  Important: You need to hide both the box and the include file.

Boxed Sections

Boxed Sections - Components  The boxed sections have three components.  The first is a div with the id “boxed”. This container holds all of the boxed elements and ends after the last boxed section.  The boxed sections have the class of “left” or “right”, depending on which side you want them to appear on.  If you want the tops of the left and right divs to align, add before all left divs except for the first.

Boxed Sections - Customizing 1. The tag applied to the title moves the title into position as part of the border. 2. Images added to the left or right div will float to the top right. Images should be no larger than 48 x 48 pixels. 3. The class applied to the tag at the bottom of the box positions the text to the right and reduces the font size. 4. Add the class “highlight” to the left or right div to give the box a darker, stronger border. 5. If you want to use the boxes without the border, add the class “noborder” to the left or right div

Footer  The footer for each section is controlled through the include file footer_###.txt.  The Home link directs the user to the main home page  The Web Help link directs the user to the contract-specific help page  The Feedback link directs the user to the contract-specific feedback page  The About WPS link directs the user to the contract-specific About page  The Privacy Statement link directs the user to the contract-specific privacy information page  The Legal Disclaimer link directs the user to the contract-specific legal disclaimer page  The CMS logo directs the user to the CMS website

Internal Content

Header  The header consists of: 1. Graphic identifier of states 2. Text identifier of company and contract area 3. Text identifier of contract covered states 4. Navigation to contact, CMS, eNews and site map 5. Search area with links to search options and tips 6. Top navigation  There are three header files defined for each contract area  Use header_###.txt for files root level files (index.shtml, privacy.shtml, etc.  Use header_###_lev1.txt for files one level deep  Use header_###_lev2.txt for files two levels deep  User header_###_lev3.txt for files three levels deep  If you do not use the correct file, the header graphics will not display

Breadcrumb  The breadcrumb is added dynamically through breadcrumbs.js in the _includes directory. The page name is set through the document title.

Top Navigation  The top navigation is an unordered list controlled by CSS.  Each top level item is followed by empty span tags. The empty span tags hold the right side of the tab.  Each top level item has a unique ID that is used to highlight the tab on that area’s pages.  These id’s are also placed as a class in the body tag, so that when they match, the tab is highlighted.  It is very important that the identifiers are used exactly as defined

Allowed Identifiers for Top Tabs to highlight the Policy tab to highlight the Fees tab to highlight the Training tab to highlight the Departments tab to highlight the Policy tab to highlight the Resources tab to highlight the FAQs tab to highlight the Forms tab for pages that do not need a tab highlighted. You can also leave the class off for these pages. for AMA license pages

Right Links on Splash Pages  The right link menu on the spash page is controlled through the include file rightsplash_###.txt. 1. The header areas use the h1 tag for highlighting 2. The list is a definition list, with each item a definition description Spotlight 2010 Medicare Physician Fee Schedule Informational Update 1 2

Graphic Identifiers  Graphic file-type identifiers are included in the CSS and automatically apply the graphic to the item. Apply the class to the “a” tag to call the graphic.  Some file types are identified by the extension and do not require the class.  In order to meet accessibility requirements, the type of file is identified within tags contained in the tag.  Important: there cannot be any space between the filename and the closing quote or the CSS will not identify the file.  The span tags must be contained within the tags, they should appear right before the closing tag.

Graphic Identifiers - Applying Type of FileClass nameSpan PDFPdf (not required)Adobe Portable Document format External (external file) Media Media file ZipZip (not required)Zip file ExcelExcel (not required)Excel file MP3Audio (not required)Audio file Text Text file ICD-10 Transition (external link)

Status Area  The status boxes on the splash page are controlled through the include file status_###.txt.  To update the status of any area, update the appropriate include file.

Left Navigation  The left navigation is an unordered list controlled by CSS.  Each item has a unique ID that is used to highlight the tab on that area’s pages.  These id’s are also placed as a class in the content div tag, so that when they match, the item is highlighted.  It is very important that the identifiers are used exactly as defined.  For each page, make sure that the correct include file is called for that area

Left Navigation - Example  In shtml file  In leftnav_j5b_resources.txt: CMS/ External Links  In j5b.css.cms #leftnav #cms { background-image: url(../_images/menugrad_j5b.png); color:#063d5b; }

Tables  Use the Table Header tag for header rows.  To use the colored background on the training pages, add class=“odd” to the row. Info

Buttons  Buttons have been defined in two sizes.  The smaller size is used for cancel, reset and search.  The larger size is for submit and longer content.  In order to use the buttons, apply the class” submit” for the larger button or “reset” for the smaller button.

Creating a New Page 1. Change the doctitle to match the content 2. Look at the body class to ensure that it highlights the correct top tab 3. Look at the content class to ensure that it highlights the correct left navigation 4. Look at the include file for the left navigation to ensure that the correct file is called. 5. Check paths to the root folder so that the css and include files can be found. 6. Look at the include file for the header to ensure that it is appropriate for your file location. 7. Edit the page header and contents.

Copying a File  If you are copying a file from one contract area to another  Search and replace – find j5a and replace with j5b  Double-check paths to root  Double-check header include file level  Save to new location