Modifying the Breadcrumb Trail Options:
Path, from the left navigation menu: ['Customization' section] > Skin Setup > Breadcrumb Trail
A Breadcrumb trail is an easy-to-follow structured link showing where on the web-site you are, in relation to the home page, at any given time. This type of 'signpost' is in the format: home>category>subcategory>etc. A customer, on your audio-book site, can quickly navigate back through the structured link by clicking on a page/section within it - particularly useful for your customers when they are browsing multiple levels of categories... they can quickly select the top level category if they get lost when navigating the categories within the site.
You can access this customization section by clicking the link labeled 'Breadcrumb Trail' within the Skin Setup menu. Selecting this option loads the Breadcrumb Trail customization screen, above the Skin Setup navigation menu:
Fig. 2.5.1.5.1: The "Breadcrumb Trail" link & customization screen:
Exactly what part of the page am I customizing here?
Firstly, we need to clarify the specific area within the page template that these modifications affect. The breadcrumb trail is the structured link immediately below the Header Panel (and beneath the banner adverts) and immediately above the Main Panel. The image below illustrates the position of the breadcrumb trail within the page template:
Fig. 2.5.1.5.2: The Breadcrumb Trail, affected by changes in this section:
What are the customization options available to me?
Knowing the specific part of the website page template that is affected by your customizations within the 'breadcrumb trail' section, we can now take a look at the types of customization open to us:
Copy Settings From...
This feature spans a number of the customization screens. Essentially, what 'Copy Settings From...' enables you to do is pick up the styles (Fonts, Colors, Sizes) on any of your other listed menu/text boxes/panels and replicate those styles across the current customization screen.
Put another way, if you have spent time setting up a particularly nice font with the exact coloring/sizing you've been looking for, to tie in with your header graphic, then you can apply these same font, size/coloring settings to a new customization section to save time, using this feature.
It presents a lot better if you have a common styling repeated throughout the site, rather than a 'mish-mash' of different styles. If the customization you require has already been successfully made to, say, your 'New Releases' then you can select 'New Releases' from the drop-down selector, then click on the "Copy" button, and 'hey presto!' the same color/style settings are adopted by the customization page you're currently working on.
This feature enables you to spend a good deal of time getting your site style right, before very quickly and easily replicating this look and feel across all the page elements in the Skin Setup section.
Show Breadcrumb Trail (checkbox)
Exactly as the name suggests, this checkbox allows you to turn the breadcrumb feature on or off according to your preference. Checking the box will display the breadcrumb trail on all of your site's pages.
Font (Typeface and Size)
In this drop-down box, you can select your required font from the list. This will affect the whole breadcrumb trail and should of course compliment your overall site design. The drop-down box below the font selection drop-down is the font size box. Select the 'point-size' you require the breadcrumb trail to be and it will be displayed in this box. You can also make the breadcrumb trail text bold and/or italic by selecting the appropriate option.
Inactive
The 'inactive' portion of the breadcrumb trail is the last part of the trail (i.e. the current page that the customer is viewing at any time). Because the customer is already on that page, the breadcrumb trail does not present the last portion of the breadcrumb trail as a hyperlink (it would be pointless presenting a link to the page you're already on!). Thus, the portion of the breadcrumb trail is denoted 'inactive'.
To choose the text color you wish to use for the Inactive portion of the breadcrumb trail, you just need to click on the color picker button and a Color Picker window will pop-up. Then select the desired color and the color sample next to the color picker button will automatically update by way of confirmation of your selection. As mentioned before, you can type the hexadecimal value straight into this box if preferred.
Links
The 'links' within the breadcrumb trail are those pages through which you passed in arriving at the current page. So, for example, were you to browse through the 'History' category, then select the 'Native American' sub-category and finally you selected an audio-book title, you would be presented with the following link: Home>History>Native American>Audio-Book Title. The first three parts of the breadcrumb trail are the pages through which you passed in arriving at the audio-book title description page. These are the 'link' portions of the trail, and these are the portions of the breadcrumb trail to which the color setting changes in this field will apply.
To choose the text color you wish to use for the links portion(s) of the breadcrumb trail, you just need to click on the color picker button and a Color Picker window will pop-up. Then select the desired color and the color sample next to the color picker button will update to confirm your selection. As mentioned before, you can type the hexadecimal value straight into this box if preferred.
Link Hover
The 'hover' color refers to the color to which 'link' text should change as the mouse pointer passes over it. So, when the customer moves his/her mouse over the different links within the breadcrumb trail, the text changes to this 'highlight' color, indicating that they are currently over a link that can be selected.
To change the link hover color, click on the color picker button and select a color from the color picker. The color sample next to the color picker button will change to show the color you have currently specified. As mentioned before, you can type the hexadecimal value straight into this box if preferred.
Canceling, Previewing and Applying my changes
It is important to note that the four buttons at the bottom of the preview screen are the same for every other option within the 'Skin Setup' menu. Their functions are as follows:
"Preview" Button: This button allows you to load your website in the preview screen. This is a great way to visualize how different colors, fonts and layouts will work together coherently on the page (or not, if you've chosen a poor mix of styles!). This button does NOT make changes to your 'live' site - it is only for use as a visual 'proof' of your proposed changes. Please note that all changes made to your site - even those in other customization sections - will be previewed on pressing this button.
"Full Screen Preview" Button: This button allows you to load a new pop-up window illustrating, in full preview mode, exactly how the changes you have just made will look when your page is made live.
"Close" Button: This button will close the "Skin Setup" page without saving any changes you may have just made. If, for example, you change your mind, you can simply abandon your proposed changes by clicking the "Close" button. Only clicking the "Apply Changes" button (details of which are below) will you commit your changes.
"Apply Changes" Button: This button saves any changes you might have made to any of the skin setup sections. When you click on the button, you will be presented two options/buttons, "Cancel" and "Generate Site", as seen below:
Fig. 2.5.1.5.3: The "Cancel" and "Generate Site" options that appear after clicking on the "Apply Changes" button:
If you click on the "Cancel" button, the system will reload the previous version of your website in preview mode, without making any changes to the website.
Instead, if you click on the "Generate Site" button, the system will save your proposed changes and then will display the website in full screen preview mode. For clarity, this button will make live all the changes you have made since you last pressed the "Generate Site" button. Your customers will see all of the changes you have made immediately.
Tip:
It is highly recommended that you make full use of the "Preview" and "Full Screen Preview" buttons to ensure that the changes you have proposed appear exactly as you want, BEFORE committing the changes to the 'live' site (although you can of course edit the site again, and recommit additional changes, should you need to correct an error).