STEP THREE: Gift Registry Software Settings and Customization Now the real fun begins. In this section, we will discuss the various settings of the gift registry software 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 screen ( see example ), the first thing to look at is the background color. By default the background color is white, which in HTML hex Triplet code, is "FFFFFF". 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. Just to get started, the best thing to do is leave the background as white (FFFFFF). You may also use color names such as "white", "blue", etc. Setting up Your Company Logo 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 button in the toolbar. It looks like this: NOTE: If you intend to setup a custom HTML header, there is no need to upload a company logo. The header will automatically replace a logo anyway. Now that you are on the Company Logo screen, you can upload your own image 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 computer to find the image you want 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 the correct image (and its name appears in the form field), click "Change Logo". This will upload your image file and set it as the logo for your gift registry system. Back on the gift registry settings screen, 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. If you change this field, be sure to click the "Save" button in the toolbar of the gift registry settings screen. You may also click the "Printer-Friendly Logo" tab and upload a black and white or grayscale image of your logo for use on the printer friendly registry list page. This page is often brought into a retail store as a reference to a specific registry or wish list. The operation of the Printer-Friendly Logo section is identical to the Company Logo section. 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! If you wish to change the image at any time, just go back to the Company Logo screen, find the new image file and upload that. It will automatically replace the currently defined logo. Setting up Gift Registry Wallpaper. To upload your own background wallpaper to further customize the gift registry software, go back to the registry settings screen and click on the Registry Wallpaper icon in the toolbar. It looks like this: The Wallpaper Management window will appear and look like this: Once you are on the Registry Wallpaper screen, you will see that it looks very much like the Company Logo screen 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 image you would like to use. Once you have selected a wallpaper image (and its name appears in the form field), click "Change Wallpaper". This will upload your wallpaper selection and set it as the background of all gift registry software pages. Again, go back to the Create New Gift Registry form to see the results. Setting up gift registry event types. To make changes to the default list of event types for gift registries, click the Events button in the toolbar: On the events edit screen, you will see the default list of 12 event types. When someone creates a new registry, they will select their event type from this list. To make changes to the list, click the trash can icon to delete an event type or type a new event type into the form field at the top of the list and click "Add". To change the sort order, enter alphanumeric codes composed of numbers and/or letters. Sorting is from A to Z and 0 to 9. So, for example, a sort code of A01 would appear at the top of the list and a sort code of Z09 would appear at the bottom of the list. Setting up "How Did You Hear About Us" options When someone creates a new registry, you may optionally ask them to tell you how they heard about your website. There are 3 options for the "How Did You Hear About Us" setting: The options are "Do Not Show", "Show as freeform text field", and "Show as List". "Do Not Show" hides the option from the registrant. "Show as freeform text field" allows the registrant to type anything they wish into the field. "Show as List" allows you to preset a list of possible choices for the registrant to choose from. If you select this last option, you can setup the list with any number of options you wish. To set the list, click the "Hear About" button in the toolbar. On the "How Did You Hear About Us" options screen, you will see the default list of choices: To make changes to the list, click the trash can icon to delete an option or type a new option into the form field at the top of the list and click "Add". To change the sort order, enter alphanumeric codes composed of numbers and/or letters. Sorting is from A to Z and 0 to 9. So, for example, a sort code of A01 would appear at the top of the list and a sort code of Z09 would appear at the bottom of the list. 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 signs 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 the "Save" button 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 custom 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 gift 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, 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 gift registry software. NOTE: It is best to set the width 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 accomplished by creating a small HTML page that will appear at the top of your gift registry pages. Here is an example of a well done header appearing at the top of the Create New Gift Registry page. This header contains a functional toolbar with links to the various portions of this merchant's web site along with an email signup form, a search form, and other functionality. To create a 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 "Save" button in the toolbar. Now, if you visit the "Create New Gift Registry" form from step 1, you should see your custom header at the top. 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 be shown instead. NOTE: If you include links to style sheets, graphics, javascript files, or other included files in your header, you MUST provide the full URL to the location of the file on the internet. In other words, ALL links to images, style sheets, javascript files and other included files MUST begin with http://. The <body> tag All pages throughout the software 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 footers are created and setup in exactly the same way as the header. Here is an example of a well done footer: This footer contains an HTML form as well as various links and graphics. Also note that the "Create Registry" button has been customized using "styles" contained in the custom HTML header. NOTE: If you include links to style sheets, graphics, javascript files, or other included files in your footer, you MUST provide the full URL to the location of the file on the internet. In other words, ALL links to images, style sheets, javascript files and other included files MUST begin with http://. Advanced Customization: Cascading Style Sheets Using Cascading Style Sheets (CSS), you can affect the look of virtually every element throughout the gift registry software including the text font, text color, form input fields, submit buttons and more. Each of the elements on a gift registry 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 screen. Then, you will see a Sample Style Sheet icon. Click it. Here you will see a duplicate of the style sheet used for the gift registry software. 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 using a link tag 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"> NOTE: If you include links to style sheets, javascript files, or other included files in your head tag code, you MUST provide the full URL to the location of the file on the internet. In other words, ALL links to style sheets, javascript files and other included files in the head tag code MUST begin with http://. Setting up a Favicon to Appear in the Address Bar of the Browser Using your own favicon is really very easy and can be done by adding a single line of code to the "Head Tag Code" section of each application where you want the favicon to appear in the address bar of the browser. Just add the following line of code to the "Head Tag Code" section of the settings page for each application: <link href="http://www.YourSiteDomain.com/favicon.ico" rel="SHORTCUT ICON"> Be sure to replace www.YourSiteDomain.com with the URL of your website and make sure that the favicon is located in the root folder of the site. What is a favicon? A favicon, also known as a shortcut icon, Web site icon, URL icon, tab icon or bookmark icon, is a file containing a small icon, usually 16×±6 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon. Creating a custom sub-domain (URL) for Registry Pages The default URL for Registry Valet pages such as the New Registry Page, Registry Search page and all others is https://apps.customcart.com/Pagename.cfm (where pagename.cfm is the name of the page within the gift registry software). You can setup your own custom URL using a sub-domain. A sub-domain is your URL with a word plus a period just before the main part of URL itself. For example, if your site's URL is http://www.MySite.com, then a custom subdomain for the gift registry system might be http://registry.MySite.com. This completely replaces the "apps.agenne.com" default. To setup a custom sub-domain, contact Agenne Support. You will need to contact your domain registrar (such as GoDaddy, Network Solutions, or wherever your domain name is registered) to create the sub-domain and point it to one of our servers. When you contact Agenne Support, we can tell you the IP address to which your instance of Registry Valet is assigned. You will then give this IP address to your domain registrar so that they can properly point the sub-domain to Agenne servers. Finally, you will need to update the links on your site that point to Registry Valet so that they use the new sub-domain. Completely Customized Gift Registry Pages But what if you want to do more than just customize the look of the existing page layouts? Registry Valet is so customizable that, if you want to design your own form pages, menus, informational pages and so forth, our software can accommodate your needs. Each page of the software is a template carried within the application's framework. As such, we can take your designs and plug our code into them so that your gift registry is customized to look any way you wish. This kind of customization takes a bit longer and we must do it for you and we do charge for this service. Contact us to get a price quote. iFrames Many developers are tempted to use iframes in order to completely control the user experience in customizing our software. This is not a good idea because some browsers won't correctly carry over the browser variables 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