the care and maintenance of j5 mac new look. naming conventions each graphic and include item is...
TRANSCRIPT
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 <clickable to home>2. Text identifier of company and contract area3. Navigation to contact, CMS, eNews and site map4. ISO graphic5. Link to C-SNAP
12 3
4
5
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 <br class=”clear”> before all left divs except for the first.
Boxed Sections - Customizing
1. The <h3> 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 <more> class applied to the <a> 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.<div class="left noborder”>
1
3
2
4
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 <clickable to contract home>2. Text identifier of company and contract area3. Text identifier of contract covered states4. Navigation to contact, CMS, eNews and site map5. Search area with links to search options and tips6. 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.
12
3
45
6
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 <ul> controlled by CSS. Each top level item is followed by empty span tags <span></span>. 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
<body class=“policy”> to highlight the Policy tab
<body class=“fees”> to highlight the Fees tab
<body class=“training”> to highlight the Training tab
<body class=“departments”> to highlight the Departments tab
<body class=“publications”> to highlight the Policy tab
<body class=“resources”> to highlight the Resources tab
<body class=“faq”> to highlight the FAQs tab
<body class=“forms”> to highlight the Forms tab
<body class=“misc”> for pages that do not need a tab highlighted. You can also leave the class off for these pages.
<body class=“license”> 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
highlighting2. The list is a definition list <dl>, with
each item a definition description <dd><h1>Spotlight</h1><dl><dd><a href="http://www.wpsmedicare.com /j5macpartb/publications/news/archived/2010_0625_preservation.shtml" ">2010 Medicare Physician Fee Schedule Informational Update</a></dd></dl>
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 <span> tags contained in the <a> 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 <a> tags, they should appear right before the closing </a> tag.
Graphic Identifiers - ApplyingType of File Class name Span
PDF Pdf (not required) Adobe Portable Document format
External External (external file)
Media Media Media file
Zip Zip (not required) Zip file
Excel Excel (not required) Excel file
MP3 Audio (not required) Audio file
Text Text Text file
<a class="external" href="http://www.cms.gov/ICD10" target="_blank">ICD-10 Transition<span> (external link)</span></a>
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 <ul> 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<div id="content" class="cms"><!--#include virtual="../../../_includes/ leftnav_j5b_resources.txt" -->
In leftnav_j5b_resources.txt:<li><a id="cms" href="http://medicaretest/ j5macpartb/resources/cms_resources">CMS/ External Links</a></li>
In j5b.css.cms #leftnav #cms{
background-image: url(../_images/menugrad_j5b.png);
color:#063d5b;}
Tables
Use the Table Header <th> tag for header rows. To use the colored background on the training pages,
add class=“odd” to the row.<tr class=“odd”><td>Info</td></tr>
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.
<input class="submit" type="button" value="Submit Request" onclick="submitRegForm(wpsFormTo);" alt="submit button" tabindex="16" accesskey="s"> <input type="reset" class="reset" name="reset this form" value="Reset" alt="reset button" tabindex="17" accesskey="r">
Creating a New Page
1. Change the doctitle to match the content2. Look at the body class to ensure that it highlights the
correct top tab3. Look at the content class to ensure that it highlights
the correct left navigation4. 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