Docstoc

RPX Checkfree Demo Users Manual

Document Sample
RPX Checkfree Demo Users Manual Powered By Docstoc
					                                                              RPX Bill Pay Demo User’s Manual


RPX Bill Pay Demo
User’s Manual


INTRODUCTION

This manual will guide you through the process of editing the branding.css file in order
to alter the functionality of the demo.

In the file you will find different id names that look like the following:

       body{
       }

In each of these tags you will see different attributes that can be altered in order to
change parts of the demo. These attributes look like the following:

       Font-family: Arial, Helvetica, sans-serif;

 Continue to the next section for detailed steps on how to edit these attributes according
to your needs.



ATTRIBUTES

   1. Fonts
       a. Font-family: Arial, Helvetica, sans-serif;
          This attribute sets the font that will be displayed in the browser.
          It is best to select at least two to three fonts as some computers may not
          have the first specified font. To get a full list of default browser fonts visit
          http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.
       b. Font-size:12px;
          This attribute sets the size of the font.
          Remember to keep the px after the number for proper display.
       c. Font-weight:bold;
          This attribute will set the font weight
          The options for this attribute are either bold or normal
       d. Color: #000000;
               This attribute sets the color of the font.
               The number represents a color. These colors are called hex colors.
               For a listing of hex colors visit
               http://www.december.com/html/spec/colorsafe.html.
                                                        RPX Bill Pay Demo User’s Manual


2. Body
   These attributes control the background color, default font color, default font
   family, default font size.
      a. Background-color:#ffffff;
           This sets the background color for the site. Again using the hex colors.
           For a listing of hex colors visit
           http://www.december.com/html/spec/colorsafe.html.
3. #container
   These attributes control the content area of the demo and how it will be displayed
   in the browser window. The following are the only areas that will need to be
   changed at any given time.
      a. Margin: 0 auto;
           This controls the alignment of the content in the browser window.
           The setting “0 auto” will set the content to center in the browser.
           The setting “0” will set the content to left justify in the browser.
      b. Border:solid 2px #002569;
           This attribute controls the border of the content area.
           Solid simply means a solid line. The 2px sets the width of the border
           The #002569 is the hex color that sets the color of the border.
           In the branding.css file you may see it displayed in this manner
           /*border:solid 2px #002569;*/
           The /* and */ hide the tag in order to save the information but not display it.
           In order to display the hidden tag, simply remove the /* from the beginning
           and the */ from the end.
      c. Background-color:#DDDDDD;
           This attribute sets the background color of the content area.
           For a listing of hex colors visit
           http://www.december.com/html/spec/colorsafe.html.
4. #logo
   These attributes set the logo image, width, height and location. In order to
   change the logo, you must first save the desired image in the images folder and
   title it logo.gif. Be sure to note the height and width of your image as this will be
   needed to display properly.
      a. Width: 218px;
           This attribute sets the width for the logo image. Change according to
           specifications of the logo image you have saved.
      b. Height: 54px;
           This attribute sets the height for the logo image. Change according to
           specifications of the logo image you have saved.
                                                       RPX Bill Pay Demo User’s Manual


     c. Background: transparent url(images/logo.gif) 0 0 no-repeat;
        This attribute sets the logo image. If you are unable to save your logo image
        as logo.gif, make sure you save you logo image to the images folder and
        make note of the image name. To change the logo image you would change
        the following: (images/logonamehere.gif).
     d. Margin: 0;
        This attribute sets the margin top, left, bottom and right for logo placement..
     e. Float:left;
        This attribute controls the placement of the logo either left justified or
        centered. In order to center the logo this attribute will need to be hidden or
        commented out. To do this add a /* to the beginning of the attribute and a */
        to the end of the attribute. Example: /*float:left;*/
5. #avlBal
   This attribute controls the visibility of the account balance on the home page.
     a. Display:none;
        This tag turns the visibility of the account balance to hidden
        In order to turn the visibility to shown simply hide or comment out the tag.
        To do this add a /* to the beginning of the attribute and a */ to the end of the
        attribute. Example: /*display:none;*/
6. #custServ
   This attribute controls the visibility of the Customer Service number in the footer.
     a. Display:none;
        This tag turns the visibility of the customer service number to hidden
        In order to turn the visibility to shown simply hide or comment out the tag.
        To do this add a /* to the beginning of the attribute and a */ to the end of the
        attribute. Example: /*display:none;*/
7. #shell
   These attributes control the interior content area of the demo and how it will be
   displayed in the browser window. The following are the only areas that will need
   to be changed at any given time.
     a. Border:solid 2px #002569;
        This attribute controls the border of the content area.
        Solid simply means a solid line. The 2px sets the width of the border
        The #002569 is the hex color that sets the color of the border.
        In the branding.css file you may see it displayed in this manner
        /*border:solid 2px #002569;*/
        The /* and */ hide the tag in order to save the information but not display it.
        In order to display the hidden tag, simply remove the /* from the beginning
        and the */ from the end.
                                                        RPX Bill Pay Demo User’s Manual


     b. Background-color:#FFF;
         This attribute sets the background color of the content area.
         For a listing of hex colors visit
         http://www.december.com/html/spec/colorsafe.html.
8. #header
   This tag sets header Background and Font Colors, Size and margins.
     a. Height:80px;
         This sets the height for the header.
         If you are utilizing the header text option make sure to hide or comment out
         the height tag. To do this add a /* to the beginning of the attribute and a */ to
         the end of the attribute. Example: /*height:80px;*/.
     b. Background-color:#FFFFFF;
         This sets the background color of the header.
         For a listing of hex colors visit
         http://www.december.com/html/spec/colorsafe.html.
9. #header_nonav
   This tag is for the pages that contain no navigation bar. The important attribute in
   this tag is the margin-bottom.
     a. Height:80px;
         This sets the height for the header.
         If you are utilizing the header text option make sure to hide or comment out
         the height tag. To do this add a /* to the beginning of the attribute and a */ to
         the end of the attribute. Example: /*height:80px;*/.
     b. Background-color:#FFFFFF;
         This sets the background color of the header.
         For a listing of hex colors visit
         http://www.december.com/html/spec/colorsafe.html.
     c. Margin-bottom:15px;
         This controls the space between the header and the main content area.
         There should be no need to change this.
10. #top_menu
   This sets header navigation (Help | Signout) color, placement and font weight.
     a. Color:#000;
         This attribute sets the text color for the navigation.
         For a listing of hex colors visit
         http://www.december.com/html/spec/colorsafe.html.
                                                        RPX Bill Pay Demo User’s Manual


     b. margin: 53px 14px 14px 14px;
        This sets the position of the navigation.
        To change the position the numbers are in this order:
        Top Left Bottom Right.
     c. font-weight: bold;
        This sets the font weight. To unbold set to normal.
        Example: font-weight:normal;
11. #top_menu a
   This sets the header navigation link color and text decoration.
     a. Color: #000;
        This attribute sets the text color for the links in the header navigation.
        For a listing of hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
     b. Text-decoration:underline;
        This attribute underlines the header navigation link text. In order to remove
        underline, set value to none.
        Example: text-decoration:none;
12. #top_menu a:hover
   This tag sets the hover or mouseover state of the link. Specifically the font color
   and text decoration.
     a. Color: #000;
        This attribute sets the text color for the hover state of the links in the header
        navigation.
        For a listing of hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
     b. Text-decoration:underline;
        This attribute underlines the header navigation link text. In order to remove
        underline, set value to none.
        Example: text-decoration:none;
13. #paymentCenter
   This tag sets the visibility of the Payment Center Button in the main navigation.
     a. display:none;
        This tag turns the visibility of the Payment Center Button to hidden
        In order to turn the visibility to shown simply hide or comment out the tag.
        To do this add a /* to the beginning of the attribute and a */ to the end of the
        attribute. Example: /*display:none;*/
                                                        RPX Bill Pay Demo User’s Manual


14. #addBill
    This tag sets the visibility of the Add A Bill button in the main navigation.
     a. display:none;
         This tag turns the visibility of the Add A Bill Button to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
15. #billHistory
    This tag sets the visibility of the Bill History button in the main navigation.
     a. display:none;
         This tag turns the visibility of the Bill History Button to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
16. #manageBills
    This tag sets the visibility of the Manage My Bills button in the main navigation.
     a. display:none;
         This tag turns the visibility of the Manage My Bills Button to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
17. #myAccounts
    This tag sets the visibility of the My Accounts button in the main navigation.
     a. display:none;
         This tag turns the visibility of the My Accounts Button to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
18. #myProfile
    This tag sets the visibility of the My Profile button in the main navigation.
     a. display:none;
         This tag turns the visibility of the My Profile Button to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
                                                      RPX Bill Pay Demo User’s Manual


19. #main_nav
   This tag sets the positioning and width of the main navigation. When changing
   the header or logo size. The top and left values will need to be changed to
   display properly.
     a. Top: 90px;
        This sets the amount of space from the top of the browser window to the top
        of the the navigation.
     b. Left:263px;
        This sets the amount of space from the left of the browser window to the left
        of the navigation.
20. a.nav, a.nav:link, a.nav:visited
   These tags sets the button size, background color, font color, font family and font
   size or the main navigation.
     a. Padding:2px 7px;
        This sets the size of the button based on 2 pixels or px worth of space
        between the text and outside of the button on the top and bottom, and 7
        pixels or px of space on the left and right of the text.
     b. Background-color: #FFF;
        This sets the background color of the main navigation buttons.
        For a listing of hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
     c. Color:#484848;
        This sets the font color of the main navigation buttons.
21. #nav_bdr_lft
   This sets the border color and width for the extreme right main navigation button.
     a. Border-top: solid 1px #002569;
        border-left: solid 1px #002569;
        border-bottom: solid 1px #002569;
        These attributes set the top left and bottom border width and color. Change
        width by setting a new px value, change color by changing the hex color
        value. For a listing of hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
                                                    RPX Bill Pay Demo User’s Manual


22. #nav_bdr_lft_actv
   This sets the border color and width for the extreme right main navigation button
   when the page is active (selected page being viewed in browser).
     a. Border-top: solid 1px #002569;
        border-left: solid 1px #002569;
        border-bottom: solid 1px #002569;
        These attributes set the top left and bottom border width and color. Change
        width by setting a new px value, change color by changing the hex color
        value. For a listing of hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
     b. Color: #fff;
        This sets the text color for the extreme right main navigation button when
        the page is active (selected page being viewed in browser).
     c. Background: #90A0B7;
        This sets the background color for the extreme right main navigation button
        when the page is active (selected page being viewed in browser).
23. #nav_bdr_rt_actv
   This sets the border color and width for the main navigation buttons when the
   page is active (selected page being viewed in browser).
     a. border-bottom: solid 1px #002569;
        These attributes set the border width and color. Change width by setting a
        new px value, change color by changing the hex color value. For a listing of
        hex colors visit
        http://www.december.com/html/spec/colorsafe.html.
     b. Color: #fff;
        This sets the text color for the main navigation buttons when the page is
        active (selected page being viewed in browser).
     c. Background: #90A0B7;
        This sets the background color for the main navigation buttons when the
        page is active (selected page being viewed in browser).
24. a.nav:hover, a.nav:active
   These tags sets the background color and font color of the main navigation
   buttons on hover or mouseover state.
     a. Color: #fff;
        This sets the text color for the main navigation buttons on hover or
        mouseover state.
     b. Background: #90A0B7;
        This sets the background color for the main navigation buttons on hover or
        mouseover state.
                                                        RPX Bill Pay Demo User’s Manual


25. #accountName
    This tag sets the visibility of the account name option on the My Accounts page.
     a. display:none;
         This tag turns the visibility to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
26. #updateName
    This tag sets the visibility of the update name option on the My Accounts page.
     a. display:none;
         This tag turns the visibility to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
27. #bankAccount
    This tag sets the visibility of the bank account number on the My Accounts page.
     a. display:none;
         This tag turns the visibility to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
28. #status
    This tag sets the visibility of the status on the My Accounts page.
     a. display:none;
         This tag turns the visibility to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
29. #deleteAccount
    This tag sets the visibility of the delete account option on the My Accounts page.
     a. display:none;
         This tag turns the visibility to hidden
         In order to turn the visibility to shown simply hide or comment out the tag.
         To do this add a /* to the beginning of the attribute and a */ to the end of the
         attribute. Example: /*display:none;*/
                                                        RPX Bill Pay Demo User’s Manual


30. #addBankAccount
    This tag sets the visibility of the add an account option on the My Accounts page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
31. #movePayments
    This tag sets the visibility of the move payments option on the My Accounts
    page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
32. #viewInfo
    This tag sets the visibility of the view personal information option on the My
    Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
33. #updateInfo
    This tag sets the visibility of the update personal information option on the My
    Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
34. #changeUser
    This tag sets the visibility of the Change EPS Bill Payment user name and
    password option on the My Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
                                                        RPX Bill Pay Demo User’s Manual


35. #addUser
    This tag sets the visibility of the add an additional user option on the My Profile
    page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
36. #updateServiceFee
    This tag sets the visibility of the update service fee account option on the My
    Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
37. #viewPaymentPlan
    This tag sets the visibility of the view payment plan option on the My Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/
38. #cancelService
    This tag sets the visibility of the cancel service option on the My Profile page.
     a. display:none;
          This tag turns the visibility to hidden
          In order to turn the visibility to shown simply hide or comment out the tag.
          To do this add a /* to the beginning of the attribute and a */ to the end of the
          attribute. Example: /*display:none;*/

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:1/29/2013
language:English
pages:11