STEP THREE: Registry Settings and Customization In order to fully use this tutorial, you will first need to sign up for your free trial of Registry Valet. 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 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 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 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 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. Custom HTML Header and Footer But, suppose you want something more elaborate at the top of your 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. Also notice the yellow and white striped background wallpaper. We will discuss uploading wallpaper shortly. In addition, the HTML header file (or page because it is a complete html page itself) can contain a cascading style sheet to override the styles which are applied to the text, form fields, and buttons on the registry pages. Cascading Style Sheets Using CSS, you can affect the look of virtually every element on your registry pages including the text font, text color, form input fields, submit buttons and more. 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 and then just include that code in your custom HTML header. (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 and type its 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. After you have typed this into the "Header URL" field on the registry settings form and checked the "Show Custom Header" checkbox, 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. Custom HTML page footers are created and setup in exactly the same way. 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. Setting up page wallpaper. To upload your own backgruond wallpaper to further customize your 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 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. If you are also using Agenne View, you may skip this section as the link is automatic. When a bride or other registrant logs in to their registry (covered in the next step), one of the menu options available 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 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 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). Back to Step 2 (Generate "Add to Registry" HTML button code) | Continue to Final Step (Search and Login pages)