Changing the appearance of the Recommended Panel:
Path, from the left navigation menu: ['Customization' section] > Skin Setup > Recommended Panel
As well as new titles (automatically presented within the New Releases Panel) the Partner Administration system allows you to include a "Recommended Panel" showing those titles that Spoken Network recommends. You can change the appearance of the Recommended Panel on your web-pages using the link labeled "Recommended Panel" within the Skin Setup menu. Selecting this option will load the Recommended Panel customization screen, above the Skin Setup navigation menu:
Fig. 2.5.1.11.1: The "Recommended Panel" 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 Recommended Panel is a boxed out list of those titles which have been picked out especially for recommendation to customers of the Spoken Network Partner channel. These titles will be those with special promotional status. The panel can be placed either left or right of screen, and an example of one such placement is shown below :
Fig. 2.5.1.11.2: The Recommended Panel, 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 'Recommends Panel' 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 - in this case, the Recommended Panel - 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 'Category List Panel' then you can select 'Category List' 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.
Shape
You also have the option to choose the shape of the Recommended Panel border - specifically, whether you want square or rounded corners. To do this, you just need to check the appropriate radio button for either of the two options.
Background
You can also choose the exact color you want as your background for the Recommended Panel. You just need to click on the color picker button and a Color Picker window will pop-up. Then select the desired color and it will appear in the box situated on the left of the color picker button, along with the code or name of that specific color. Alternatively, you can type the Hexadecimal color value (if known) directly into the text box. Again, the color of the box will update immediately to confirm your color selection.
Border
The border for the Recommended Panel can be any color and/or line thickness you choose. To change the border 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 update to reflect your color choice. As mentioned before, you can type the hexadecimal value straight into this box if preferred. To adjust the thickness of the border around the Recommended Panel, you can specify how many pixels wide the border is. This can be useful when you wish to pick out this panel from other panels - a slightly thicker border around a panel can create added emphasis, and draw the customer's eye to this panel.
Number of Titles to Display
You also have the option to choose how many titles you want to display in the Recommended Panel. To do this, you just need to select the desired number (from 1 to 8) from the drop-down box.
Header Font (& size, color & bold/italic)
This setting affects the 'heading' text at the very top of the Recommended Panel (by default, the text reads "Recommended").
You can specify your preferred font by selecting it from the drop-down list, and then you can choose a preferred point-size by selecting it from the appropriate drop-down list as well.
To change the color of this header text, you need to 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 what color is currently selected for the header text.
You can also set your Header text to Bold and/or Italics by checking the appropriate box beneath the drop-down font selector.
Title Font (& size, color & bold/italic)
Exactly the same options can be specified for the Title text as for the Header text above. For each of the titles listed within the Recommended Panel there are two different links: The 'title' link and the "More Info" text-link. Both of these links, when clicked, will take the customer directly to that specific audio-book's information page. These two links are affected by the changes made here to 'Title Font'.
The first option you can change here is the font itself: Select your preferred font from the drop-down font selector then, next, you can specify a preferred point-size by selecting it from the appropriate drop-down list as well. You can also set your Link text to Bold and/or Italics by checking the appropriate box beneath the drop-down font selector.
Finally, you can change the color of the link text itself by clicking on the color picker button and selecting a color from the color picker. The color sample next to the color picker button will change to show what color is currently selected for the text.
Title Hover Color
The title hover color affects the color to which the ‘title’ and ‘more info’ link text momentarily changes as the customer's mouse passes over the link. This acts as a highlight, and indicates to the user that they are about to select the highlighted title/details, should they proceed to click this link with their mouse. To change the title hover color, click on the color picker button and select a color from the color picker. The color sample adjacent to the color picker button will change to show the color you have currently specified.
Author/Price Font (& size, color & bold/italic)
This setting affects the author and price text displayed in the Recommended Panel.
You can specify your preferred font by selecting it from the drop-down list, and then you can choose a preferred point-size by selecting it from the appropriate drop-down list as well.
To change the color of the author/price text, you need to 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 what color is currently selected for the header text.
You can also set the author/price text to Bold and/or Italics by checking the appropriate box beneath the drop-down font selector.
Description Font (& size, color & bold/italic)
This setting affects the 'audio-book description' text for each title listed in the Recommended Panel.
You can specify your preferred font by selecting it from the drop-down list, then you can choose
a preferred point-size by selecting it from the appropriate drop-down list as well. You can also set your Description text to Bold and/or Italics by checking the appropriate box beneath the drop-down font selector.
To change the color of this description text, you need to 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 what color is currently selected for the description text.
Separator
Between the header text of the Recommended Panel and the title listed here, you will see a horizontal line - the Separator. This line can either be set as a different color to the background (and so appearing as a distinct line under the header text) or as the same color as the background (not appearing at all against the background color). To change the color, again click on the color picker button and select a color from the color picker, and see your selected color indicated by the color sample, next to the color picker button. As well as specifying a color, you can also dictate the width of this line by simply selecting a value, in pixels, from the drop-down menu. The higher the pixel-width, the thicker the line.
Image Border
This setting affects the image border for the title listed in the Recommended Panel. To change the image border 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 update to reflect your color choice. As mentioned before, you can type the hexadecimal value straight into this box if preferred. To adjust the thickness of the border around the image from the Recommended Panel, you can specify how many pixels wide the border is by selecting the preferred value from the drop-down list.
Want to reposition this panel?
You can reposition this panel, but not in this part of the Skin Setup section. To reposition panels, you need to use the "Panel Positions" option, also within the Skin Setup section.
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.11.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).