STEP THREE: Gift Registry Software Settings and Customization Now the real fun begins. In this section, we will discuss the various settings of the Registry Valet application as well as customization of the gift registry pages. The first thing to do is go back to the main menu and click on the Registry Settings icon. It looks like this: Now that you are on the main settings page, the first thing to look at is the background color field. By default the background color is white which in HTML hex Triplet code is "FFFFFF". If you are unfamiliar with the hex triplet codes, it's ok, just refer to this color chart. There are many more colors available based upon mixing the three sets of two codes. You may experiment with these color codes if you wish. For now, just use one of the color options listed on the color chart page. Just to get started, the best thing to do is leave the background as white (FFFFFF). The quickest and easiest customization you can perform is to add your company logo to the top of the page. This is done using the company logo management system. Click on the Company Logo icon in the left menu. It looks like this: Now that you are on the Company Logo page, you can upload your own logo to adorn the top of your gift registry pages. The upload form looks like this: Notice the "Browse" button. This allows you to search on your own computer to find your company logo to upload. Click this button to bring up the "File Open" dialog box and use it to navigate to your company logo image on your computer. NOTE: The image file that you choose MUST be either a .jpg, .gif, or .png file. Although you may have your logo as a .bmp file, these will not render correctly in all browsers so it is important not to use them. Once you have selected your company logo (and its name appears in the form field), click "Update". This will upload your image file and set it as the logo for your git registry pages. Back on the registry settings page, you will see a drop-down box labeled "Logo Alignment". Using this dropdown box, you may choose to have your logo displayed either in the center or at the left edge of your gift registry pages. If you change this field, be sure to click "Update" at the bottom of the registry settings form. Now, go back to the "Create New Registry" page that we setup on the first step of this tutorial and you should see your logo at the top of the page! If you wish to change your logo at any time, just go back to the Company Logo page, find your new logo image file and upload that. It will automatically replace the currently defined logo. Setting up page wallpaper. To upload your own backgruond wallpaper to further customize your gift registry pages, go back to the registry settings page and click on the Registry Wallpaper icon in the left menu. It looks like this: Once you are on the Registry Wallpaper page, you will see that it looks very much like the Company Logo page with the addition of a "Show Wallpaper" checkbox. This will be checked by default. The purpose of the "Show Wallpaper" checkbox is to allow you to define background wallpaper, but choose to not show it in favor of using a background color instead. You may experiment with this setting to see how it works. For now, click the "Browse" button on the form to find a wallpaper you would like to use. Once you have selected a wallpaper image (and its name appears in the form field), click "Update". This will upload your wallpaper selection and set it as the background of all gift registry system pages. Again, go back to the Create New Registry page to see the results. Other Settings There are a few other settings that need explanation. The first, and most important, is the "Add Products Link URL" field. When a bride or other registrant logs in to their gift registry (covered in the next step), one of the menu options is "Add Additional Products to Your List". When this link is clicked, the main catalog page or catalog "home" page should appear to allow the registrant to browse through your catalog and add items to their gift registry. You must enter the full URL (including http://) into this field. Be sure to click "Update" after you have entered the URL. The "Page Alignment" field allows you to set the registry forms and pages in the center of the browser's view or at the left edge. This affects the location of the logo as well as page headers and footers. For example, if you set the page alignment to "Left" and the logo alignment to "Center", the logo will be properly aligned in the center of the page relative to the width of the registry pages and forms. To set the page width, that is, the width of the forms and other gift registry pages within the outer area where the wallpaper would be, for example, fill in the "Page Width" field with either a number representing the number of pixels (750 is a good starting point) or a percentage such as 75%. Experiment with this value to get different looks within the registry system. NOTE: It is best to set the width of the page to the same width as your custom headers and footers (if you are using them). Custom HTML Header and Footer But, suppose you want something more elaborate at the top of your gift registry pages such as a toolbar, site search field, company information, and so forth. This can be easily accomplished by creating a small HTML page that will appear at the top of your registry pages. Here is an example of a well done header appearing at the top of the Create New Registry page. (Click image to see the full page) This header contains a functional toolbar with links to the various portions of this client's web site as well as their company logo and other graphics. To create an HTML header file, you will need to use an HTML editor or contact your site designer to create it for you. Once you have the header file created, upload it to your web site, switch the "Show Custom HTML Header" dropdown from "No" to "Yes", and type your header's address (http://www.yourwebsiteURL.com/headerfilename.html) where "yourwebsiteURL is the actual URL of your site and headerfilename.html is the actual name of the header file as shown here in Registry Settings: After you have typed this into the "Header URL" field on the registry settings form and switched the "Show Custom HTML Header" dropdown from "No" to "Yes", click the "Update" button at the bottom of the registry settings form. Now, if you visit the "Create New Registry" form page from step 1, you should see your custom HTML header at the top of the page. Notice that the company logo that was previously uploaded no longer appears, but has been replaced with the custom header. If you were to uncheck the "Show Custom Header", the header would disappear and the logo would then be shown instead. The <body> tag All pages throughout the system include an HTML Body tag unless you specify a body tag within your custom header. If you do specify a body tag, then the system will suppress its own body tag. This can cause confusion since the background wallpaper is loaded by the body tag. If you specify your own body tag and try to upload wallpaper through the administrator, it will not appear on your gift registry pages. To solve the problem, either include a background specification in your own body tag or remove the body tag from your custom header. Custom HTML page footers are created and setup in exactly the same way as the header. Here is an example of a well done page footer: (Click image to see the full page) This footer contains an HTML form as well as various graphics. Also note that the "Create Registry" button has been customized using "styles" contained in the custom HTML header. Advanced Customization: Cascading Style Sheets Using Cascading Style Sheets (CSS), you can affect the look of virtually every element on your gift registry pages including the text font, text color, form input fields, submit buttons and more. Each of the elements on a Registry Valet page such as form field labels or buttons is assigned a unique style name. Using these style names, you can assign various attributes such as size, color, font family, and more. This is the power of CSS - the ability to change almost any element on many pages while keeping all of the style definitions in one centralized location. To add CSS to your custom HTML header, sign in to the administrator, click the code generator icon and you will see the CSS style names icon in the left menu. Click this icon to go to the CSS page. Then, you will see a Sample Style Sheet icon. Click it. Here you will see a duplicate of the style sheet used for Registry Valet. To override the settings, change the values within the sheet. Finally, upload your style sheet to your web site and enter its URL into the "Head Code" field on the Registry Settings screen as shown here: Note that the proper format for the Style Sheet reference URL is: <LINK REL="stylsheet" TYPE="text/css" HREF="http:/www.your_site_url.com/css/your_style_sheet_name.css"> iFrames Many developers are tempted to use iframes in order to completely control the user experience in customizing our applications. This is not a good idea because some browsers won't correctly carry over the browser variables from page to page within iFrames. Especially older versions of Internet Explorer As a result, the gift registry software will not function correctly. Always avoid using iframes when creating a custom design. Our applications allow maximum flexibility for design so you should not need to use iframes anyway. Back to Step 2 (Generate "Add to Registry" HTML button code) | Continue to Final Step (Going Live) Registry Valet FAQ