Changing the Tab Strip Menu:
Path, from the left navigation menu: ['Customization' section] > Skin Setup > Tab Strip
Within the header on your website, as well as a header graphic of some sort, there is also a set of tabbed menu buttons which link through to the static pages on your site, and these menu tabs are customizable, both in terms of style and color (so you can really tie these buttons in to your desired site design). You can access this customization section by clicking the link labeled 'Tab Strip' within the Skin Setup menu.
Selecting this option will load the Tab Strip customization screen, above the Skin Setup navigation menu:
Fig. 2.5.1.3.1: The "Tab Strip" 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 Tab Strip is the set of buttons running across the upper part of your pages. These tabbed menu buttons link through to the 'static' pages on your site: Home / Special Offers / FREE / etc. The Tab Strip is shown in the diagram below:
Fig. 2.5.1.3.2: The Tab Strip, 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 'Tab Strip' section, we can now take a look at the type of customization open to us:
Header Menu Style
The Spoken Network Partner Administration System affords you a choice of Tabbed Header Menus which can be displayed along the base of your Header Panel, and which can be used to navigate to the 'Special Pages' of your website. To change your selected Header Menu, you first need to click the "Change this Style" button;
At the top of the preview screen, you will see the Header Menu currently in use upon your site. You can now select one of two options:
| • | You can keep the existing selection by clicking the "Keep this Style" button, or; |
| • | You can choose a new Header Menu by clicking the "Use this Style" button immediately adjacent to the Header Menu you wish to use. |
Selecting either of the two options registers your choice of Header Menu and then returns you to the preview screen. You will note that the new Header Menu chosen is now displayed accordingly.
Header Menu Colors
You also have the option to change the colors of the header menu elements, specifically, the colors of the following four elements:
Inactive Tab
This is the "NOT selected" tab color - the tab in its 'resting state'. This color is what will be seen most of the time (on most of the buttons) and so really needs to tie in well with your overall color scheme.
Inactive Tab Text
This is the color of the text (on the face of each tabbed button) as it sits, unselected (or in a 'resting state').
Active Tab
As you move your mouse over the menu tabs, they change color - a highlight to indicate that you will select that particular button if you left-click it whilst it is highlighted. This color is also the color of the tab button when it has been selected (and the customer is viewing the Special Page in question).
Active Tab Text
As with the tab highlight, above, the Active Tab Text color is the color of the button's text label as the mouse passes over the button. The text in its 'highlighted' state. This color is also the color of the text when the tabbed menu button has been selected (and the customer is viewing the Special Page in question).
To change any of the colors for above four elements, you just need to click on the color picker button corresponding to each option 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.
Fig. 2.5.1.3.3: The Color Picker window
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.3.4: 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).