Changing the Banner Ads on your web pages:
Path, from the left navigation menu: ['Customization' section] > Skin Setup > Banner Ads
The header-portion of your web-pages is 'prime real estate' and as such is the ideal place for positioning adverts (be they graphical or Adsense). The Spoken Network Administration system allows you to insert either graphical or Adsense (or both, or neither!) adverts in this position. You can change the banner advert options on your web-pages using the link labeled "Banner Ads" within the Skin Setup menu. Selecting this option will load the Banner Ads customization screen, above the Skin Setup navigation menu:
Fig. 2.5.1.4.1: The "Banner Ads" 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. At the top of your page template there are two advertisement placements which may each be filled with either a graphical banner advertisement, or an Adsense advert impression as preferred. If required, you can even use a combination of both a graphical banner and Adsense ad together. The banners/Adsense ads are located at the top of every page, immediately below the Header Panel, as shown in the below screenshot:
Fig. 2.5.1.4.2: The Banner Advert placements, 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 'Banner Ads' section, we can now take a look at the types of customization open to us.
First of all, you need to decide what would you like to have in the banner-ad space on your website.
And that's exactly what the system will ask you: "What would you like in the banner-ad space?"
And you can choose from several options:
1) Full size graphic banner
If you want to add a full size graphic banner in the banner-ad space, you can click on the Image drop-down and select the needed banner from the list. The Image drop-down feature remembers all of the images that you have previously uploaded, so if you have uploaded the banner before, you can just choose it from the drop-down instead of uploading it again. If it's a new banner that you have not previously uploaded, you can add it by:
| 1. | Clicking the button labeled "Browse". |
| 2. | Browsing to the graphic file you have chosen for your banner advert. |
| 3. | Selecting the file and clicking the "Open" button (or by simply double-clicking the chosen graphic file). |
Note; The dimensions of the full-sized advert should be 750 pixels (wide) x 70 pixels (tall).
The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview" or "Full Screen Preview" buttons your banner graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).
You can also notice a "URL" box below the "Browse" button. In this box you will need to specify the URL to which the customer should be taken upon clicking your banner advert. This could be a specific title page, or a page on a completely different site - you can specify any URL (or mailto:) you might want.
2) Two graphic banners
Alternatively, you can add two graphic banners in the banner-ad space.
For the "Left Image" you can click on the drop-down list and select the needed banner from the list. The image drop-down feature remembers all of the images that you have previously uploaded, so if you have uploaded the banner before, you can just choose it from the drop-down instead of uploading it again. If it's a new banner that you have not previously uploaded, you can add it by:
1. Clicking the button labeled "Browse".
2. Browsing to the graphic file you have chosen for your banner advert.
3. Selecting the file and clicking the "Open" button (or by simply double-clicking the chosen graphic file).
Note; The dimensions of each half-sized advert should be 388 pixels (wide) x 70 pixels (tall).
The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview" or "Full Screen Preview" buttons your banner graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).
You will notice a "URL" box below the "Browse" button. In this box you need to specify the URL to which the customer should be taken upon clicking your banner advert. This could be a specific title page, or a page on a completely different site - you can specify any URL (or 'mailto:', to launch an email composition) you might want.
The same settings apply for the "Right Image". Click on the drop-down list and select the needed banner from the list. The image drop-down feature remembers all of the images that you have previously uploaded, so if you have uploaded the banner before, you can just choose it from the drop-down instead of uploading it again. If it's a new banner that you have not previously uploaded, you can add it by:
1. Clicking the button labeled "Browse".
2. Browsing to the graphic file you have chosen for your banner advert.
3. Selecting the file and clicking the "Open" button (or by simply double-clicking the chosen graphic file).
The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview"or "Full Screen Preview" or buttons your banner graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).
Again, you will notice the "URL" box below the "Browse" button. In this box you need to specify the URL to which the customer should be taken upon clicking your banner advert. This could be a specific title page, or a page on a completely different site - you can specify any URL (or mailto:) you might want.
3) Single Adsense box
Another option is to use a single, full-width Adsense box in the banner-ad space. Since you already added your Google Account ID in the "Adsense Panel" section, there is no need to add it again here. However, you can customize the style of your Adsense box.
Background
You can choose the exact color you want as your background for the Adsense box. 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 Adsense box 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 Adsense 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, and so your Adsense advertising.
Link Font
The Link Font refers to the 'title' of your individual Adsense ads, immediately above the descriptive text. This setting allows you to change the color of the link text by clicking on the color picker button and select a color from the color picker. The color sample right next to the color picker button will update to reflect your color choice.
Text Font
As with the Link Font color selection above, so you can modify the color of the Text Font. 'Text Font' refers to the descriptive text in the individual Adsense ads, below the Ad title. You can change the color of the descriptive text by clicking 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 this text.
URL Font
By URL font, this section refers to the URL listed at the bottom of each Adsense ad. You can easily change the color of this URL link by clicking on the color picker button and select a color from the color picker - the color sample adjacent to the color picker button will show the color you have currently specified for the URL's.
4) Graphic on the left, Adsense on the right
A fourth option is to use a graphic on the left and an Adsense box on the right of the space.
For the "Left Image" you can click on the drop-down list and select the desired banner from the list (if shown). The image drop-down feature remembers all of the images that you have previously uploaded, so if you have uploaded the banner before, you can just choose it from the drop-down instead of uploading it again.
If it's a new banner that you have not previously uploaded, you can add it by:
1. Clicking the button labeled "Browse".
2. Browsing to the graphic file you have chosen for your banner advert.
3. Selecting the file and clicking the "Open" button (or by simply double-clicking the chosen graphic file).
Note: The dimensions of this graphical banner advert should be 388 pixels (wide) x 70 pixels (tall).
The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview" or "Full Screen Preview" buttons your banner graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).
You will notice a "URL" box below the "Browse" button. In this box you should specify the URL to which the customer should be taken upon clicking your banner advert. This could be a specific title page, or a page on a completely different site - you can specify any URL (or mailto:) you might want.
For the "right AdSense box" you can customize the elements below:
Background
You can choose the exact color you want as your background for the Adsense box. 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 Adsense box 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 Adsense 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, and so your Adsense advertising.
Link Font
The Link Font refers to the 'title' of your individual Adsense ads, immediately above the descriptive text. This setting allows you to change the color of the link text by clicking on the color picker button and select a color from the color picker. The color sample right next to the color picker button will update to reflect your color choice.
Text Font
As with the Link Font color selection above, so you can modify the color of the Text Font. 'Text Font' refers to the descriptive text in the individual Adsense ads, below the Ad title. You can change the color of the descriptive text by clicking 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 this text.
URL Font
By URL font, this section refers to the URL listed at the bottom of each Adsense ad. You can easily change the color of this URL link by clicking on the color picker button and select a color from the color picker - the color sample adjacent to the color picker button will show the color you have currently specified for the URL's.
5) Adsense on the left, Graphic on the right
The fifth option is to use an Adsense box on the left and a graphic on the right of the banner-ad space.
For the "Right Image" you can click on the drop-down list and select the needed banner from the list. The image drop-down feature remembers all of the images that you have previously uploaded, so if you have uploaded the banner before, you can just choose it from the drop-down instead of uploading it again. If it's a new banner that you have not previously uploaded, you can add it by:
1. Clicking the button labeled "Browse".
2. Browsing to the graphic file you have chosen for your banner advert.
3. Selecting the file and clicking the "Open" button (or by simply double-clicking the chosen graphic file).
The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview" or "Full Screen Preview" buttons your banner graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).
You will notice again a "URL" box below the "Browse" button. In this box you must specify the URL to which the customer should be taken upon clicking your banner advert. This could be a specific title page, or a page on a completely different site - you can specify any URL (or mailto:) you might want.
For the "left Adsense box" you can customize the elements below:
Background
You can choose the exact color you want as your background for the Adsense box. 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 Adsense box 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 Adsense 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, and so your Adsense advertising.
Link Font
The Link Font refers to the 'title' of your individual Adsense ads, immediately above the descriptive text. This setting allows you to change the color of the link text by clicking on the color picker button and select a color from the color picker. The color sample right next to the color picker button will update to reflect your color choice.
Text Font
As with the Link Font color selection above, so you can modify the color of the Text Font. 'Text Font' refers to the descriptive text in the individual Adsense ads, below the Ad title. You can change the color of the descriptive text by clicking 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 this text.
URL Font
By URL font, this section refers to the URL listed at the bottom of each Adsense ad. You can easily change the color of this URL link by clicking on the color picker button and select a color from the color picker - the color sample adjacent to the color picker button will show the color you have currently specified for the URL's.
5) No banner ads at all
Finally, you can of course choose to have no banner adverts or Adsense ads either. If this is your preference you won't end up with a large 'blank' space - the page will close up this gap automatically.
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.4.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).