Page 39
7.8 Xtras Tab: An Introduction
Do more with your website using the "Xtras". ShutterBug Xtras let you add more text,
graphics, HTML snippets, and external files to your pages, allowing you to create more
than just Photo Albums and Journals. You can create media player albums, add music
to your pages, xtra text and image boxes, thumbnail rollovers, contact forms, page
counters, and much more.
If you are new to ShutterBug Xtras, we strongly recommend reading this page
before adding and editing any Xtras. After you have read this page, move on to the
more detailed instructions for adding specific Xtras, outlined in the next chapter -
ShutterBug Xtras: How To.
NOTE: Like the other elements in the Layout window, Xtras are added to the template
being used by the current page open in the viewer window. If you add an Xtra to a
page that shares the same template with other pages in your site, that Xtra will also be
added to those pages. If you want to have your pages unique with different Xtras on
each page, you'll either need to create a new template for each page, or modify an
existing template that is not being used by other pages. This will keep the page custom
and independent from the other pages in your site. This can easily be done by clicking
the '+' button in the template drawer. To learn more about page customization using
templates, please read the previous chapter, Ch. 6. Using Templates and Custom
Xtras Interface in Brief
Click the Xtras tab to reveal the options available for adding and editing Xtra boxes.
The interface is divided into two subsections: Properties and Borders. The editing
options under the Borders section are the same as the Border options for the other
elements, letting you add borders, inside margins, and background color or images to
the Xtra boxes. Therefore we will not cover Borders again. You can review how to use
the Border tools on The Text Tab page of this chapter. This page helps you get
acquainted with the Properties section of the Xtras interface, covering the types of
Xtras that can be added, how to use these Xtras, and what you would use them for.
When you are ready to add some specific Xtras, move on to the step-by-step
instructions in the next chapter.
───────────────────────────────────────
The Four Main Types of Xtras
1. External File - This type of Xtra allows you to add Xtras to your templates that are
based on external files. These files can be located in your Files folder in the Content
window or can be linked to external files located anywhere on the Internet.
The External File Xtra offers four different file types to choose from:
i) HTML Page: This is another .html page or html file that can be embedded into your
page. This external HTML can be any type of page and is a full HTML page; it is
completely independent of the pages that ShutterBug creates and it could be a page
that is located elsewhere on the Internet or a .html file that you've created and dropped
into your Files folder, such as a contact.html file. HTML page xtras are not viewable in
preview mode - use Preview in Browser to test this xtra.
ii) QuickTime File: This Xtra lets you add a QuickTime file to a template. ShutterBug
will automatically create the necessary code to insert the QuickTime file, which can be
a movie or a sound file. Some of the file formats that QuickTime supports include .mov,
.mp3, .aiff, .wav, and .mpg.
iii) Flash File: This Xtra lets you add a Flash file (.swf file) to a template. ShutterBug
will automatically create the necessary code to insert the Flash file into your page.
iv) 'Click' Image: This Xtra makes it possible to insert additional clickable images and
image rollovers into a template. Clicking on the image can navigate to another page in
your site, to an external website, or to an external file. An optional second image can
be specified so a 'roll over' effect can be created when the mouse hovers over the
image. The rollover image and click action are not viewable in preview mode - use
Preview in Browser to test this xtra.
2. Xtra Text - This type of Xtra allows you to add more text boxes to a template. The
text box Xtra uses the same font styles as your main text contents box. There are four
different font styles to choose from (Normal, Heading, Subheading, Alternate), which
can be edited under the Properties section of the Text tab in the Layout window.
3. HTML Snippet - This Xtra lets you add a snippet of HTML to a template. A snippet
is just a small piece of HTML code (such as a page counter) and is not a complete
HTML page like the "External File: HTML Page" is. If you are not experienced with
HTML code, you should use the External File option to add xtra HTML to your
templates.
4. Image/Graphic - This Xtra lets you add more graphics that can be layered in the
background, middle, or foreground of the page. The graphics can be a GIF, PNG, or
JPG image file. Transparency (images with transparent backgrounds) is supported
with GIF and PNG image files. This Xtra differs from regular background images in that
you can arrange the image layer behind the other elements on the page, on top of the
other elements, or in the middle of the elements.
───────────────────────────────────────
Adding, Renaming and Deleting Xtra Boxes: The Basics
To add an Xtra to your current page, click on the Xtras tab in the Layout window. If
you do not want the Xtra to be added to other pages that use the same
template, add a new template to keep the Xtra unique to your current page only.
Then follow these 7 quick steps:
1. Under the first section of the Properties interface - Check Item to Make Visible -
click the '+' button (at the bottom of the interface) to add an Xtra Box to your page. The
Xtra Box that you just added will appear in the list window as shown in the picture
below. By default, the Xtra is added to the top left of your page in the viewer window,
and is 100 pxs W x 100 pxs H.
2. To change the name of the Xtra Box label to something more descriptive, double-
click on the "Xtra Box" label in the list and type in the new name.
3. The two check boxes to the left of the Xtra Box label, are used to select whether
this Xtra will appear on the Main Page (this is the normal view of the page or thumbnail
view) or the Slideshow Page (this is the slideshow view of the page), or appear on
both. To make the Xtra appear with the thumbnail view of the page only, check the
Main Page check box and leave the Slideshow check box blank. To have the Xtra
appear with the slideshow view of the page only, check the Slideshow check box and
leave the Main Page check box blank. To have the Xtra appear in both the thumbnail
and slideshow views of your page, check both of the boxes.
4. To position the Xtra Box, click on it in the Layout viewer window and drag it to a new
position on the page. Select the grab handles to resize the box with your mouse.
Alternatively, you can select the box from the Xtras list and use the spin box controls
under the Position and Size section of the interface, to position and resize it. Note:
Some Xtras, such as the QuickTime Xtra, do not allow the width and height to be
changed as ShutterBug automatically defines these dimensions for you based on the
original file shown in the QuickTime player (size of the movie).
5. To specify the Xtra type, make sure you still have the Xtra selected. Go to the pop
up list located to the right of the Xtras list. Click the pop up button and select the
desired type from the list: External File, Xtra Text, HTML Snippet, or Image/Graphic.
Selecting the Xtra type, adding the desired file to the Xtra box, and specifying the
settings are covered in the next section below (Using Xtras).
6. To add more Xtra boxes, repeat Steps 1-5 above.
7. To delete an Xtra, simply select the Xtra in the List and then press the '-' button.
To specify the rest of the settings for the Xtra boxes, continue on to the following
section.
───────────────────────────────────────
Using Xtras
After you have added an Xtra Box, you will need to select the type of Xtra you want it to
be, add the file, text, or image to the Xtra box, and then specify the settings and
actions for the specific Xtra type. You can also go into the Borders section of the Xtras
interface and add borders, margins, a background color or image to your Xtra boxes,
in the same way you did for the other elements on your page. Each type and how to
use the corresponding options follows here:
1. External File
When to Use the External File Xtra:
Use this Xtra when you want to embed an external web page, contact form, QuickTime
or Flash file, MP3, MPG, AIFF, or WAV sound file, or a clickable image and/or rollover
image, into your page.
External File Xtras can use files that have been added to the Files folder in the Content
window or they can use files linked from other places on the Internet. You can either
type in the URL of a file located on the Internet, or select a file previously dropped into
your Files folder by clicking the Easy button. The External File Xtra offers a pop up list
that first lets you specify the kind of file to be used by this Xtra. There are four external
file types to choose from:
HTML page:
Use this Xtra to insert an external web page or an HTML file such as a contact form.
To insert or embed another HTML page into your ShutterBug page, select External
File as the Xtra type and then select HTML page as the external file type. Enter the
URL of the html page (i.e. http://www.domainname.com/index.html) into the
corresponding text input field as shown in the picture below, or click the Easy button to
select an .html file from your ShutterBug Files folder (i.e. contact form.html). There is
only one option for the HTML file - Show scroll bars. Checking this box will enable the
scroll bars so that the HTML file inside of the Xtra box can be scrolled if the content is
larger than the Xtra Box. Adjust the size of the box and move it to the desired position
on the page. You can add a colored border and/or margin to the Xtra box from within
the Borders interface.
QuickTime File:
A QuickTime file can be a video (.mov file) or a music/sound file such as
an .mp3, .mpg, .aiff, or .wav file. ShutterBug will automatically size the Xtra Box based
on the size of the QuickTime movie. To insert a QuickTime file into your page, select
External File as the Xtra type and then select QuickTime File as the external file type.
Enter the URL of the location of the file (i.e. http://www.domainname.com/
quicktimevideo.mov) into the corresponding text input field, or click the Easy button to
select a QuickTime file from your ShutterBug Files folder. There are three options for
the QuickTime file Xtra:
• Automatically Start playing movie - check this box to have the movie (or sound)
automatically start playing when the page is displayed.
• Show Movie Controller - check this box to display the movie controls on the bottom
of the movie player (play, pause, and progress slider).
• Hidden - check this box to make the QuickTime movie hidden on the page. This
feature is useful for playing sounds on a page without having to show the QuickTime
player and controls.
Move the box to the desired position on the page. ShutterBug will automatically size
the Xtra box to the same size as the QuickTime movie, meaning you cannot adjust the
size. You can add a colored border and/or margin to the Xtra box from within the
Borders interface.
Flash File:
This Xtra lets you insert a Flash file (.swf file) into your page. To insert a Flash file,
select External File as the Xtra type and then select Flash File as the external file type.
Enter the URL of the location of the file (i.e. http://www.domainname.com/flashfile.swf)
into the corresponding text input field, or click the Easy button to select a Flash file
from your ShutterBug Files folder. There are four options available for the Flash file
Xtra:
• Loop Movie - When this box is checked the Flash file will automatically rewind back
to the beginning and play the Flash animation over again.
• Show All - Click this button to make the entire movie visible in the specified area
without distortion, while maintaining the original aspect ratio of the movie. Borders
may appear on two sides of the movie.
• No Border - Click this button to scale the movie to fill the specified area, without
distortion, but possibly with some cropping, while maintaining the original aspect
ratio of the movie.
• Exact Fit - Clicking this button will make the entire movie visible in the specified
area without trying to preserve the original aspect ratio. Distortion may occur.
Adjust the size of the box and move it to the desired position on the page. You can add
a colored border and/or margin to the Xtra box from within the Borders interface.
'Click' Image:
This Xtra lets you add a clickable image to your page as well as an optional rollover
image. This is useful when you don't want to use your photo thumbnails for opening
embedded links, but would like to have some extra images that are clickable. To add a
clickable image to your page, select External File as the Xtra type and then select Click
Image as the external file type. Click the Easy button to select the desired image file
from your ShutterBug Files folder. There are two main options for this Xtra:
• Clicking image opens: This option specifies a URL or page to navigate to when the
image is clicked. Checking the Open in a New Window check box will open the URL/
page in a new browser window outside of your ShutterBug site.
• Rollover Image: This is an optional second image that will be displayed when the
mouse hovers over the Xtra.
Adjust the size of the box and move it to the desired position on the page. You can add
a colored border and/or margin to the Xtra box from within the Borders interface.
2. Xtra Text
When to Use the Xtra Text Box:
Use this Xtra when you want to add more text boxes to your page. The Xtra text box
has the same editing options as the Text Content box. You can select any of the same
four font styles that the Text Content element has. But remember, if you change any
of the font attributes for the Xtra text box, they will also change in the text
content box if they are being used there as well.
To add an Xtra Text box to your page, select Xtra Text from the pop up list as shown
in the picture below. A text input field will appear to the right of the pop up menu. Input
the xtra text. Note: using the tab key with text in an Xtra Text box, will not insert a
tabbed space, but rather a single space the same way the space bar works.
Select the font type, choose the text alignment, and link some of the text, if desired.
These editing options work exactly the same way as the options in the Page Text
Contents of the Content window. To edit the font styles, click on the Text tab, select the
font style, and then change the font type, size, color, line spacing and link colors.
Adjust the size of the box and move it to the desired position on the page. You can add
borders, margins, and a background color or image to the Xtra Text box from within
the Borders interface.
3. HTML Snippet
When to Use the Xtra HTML Snippet:
Use this Xtra when you want to add a snippet of custom HTML code to your page,
such as a page counter. This Xtra is for users who are experienced with HTML coding.
Incorrect HTML can render your page unviewable in some, or all, browsers. Using the
External File Xtra with a separate HTML page is a safer method.
To add an HTML Snippet to your page, select HTML Snippet from the pop up list. A
text input field will appear to the right of the pop up list. Input the desired HTML code.
Adjust the size of the box and move it to the desired position on the page. You can add
borders, margins, and a background color or image to the Xtra box from within the
Borders interface.
4. Image/Graphic
When to Use the Xtra Image Box:
The Image/Graphic Xtra is a special image box that lets you add layered graphics to
your page. Use this Xtra when you want to overlap graphics on the page or arrange
images behind, in between, or on top of other elements on the page.
To add an Image/Graphic Xtra to your page, select Image/Graphic from the pop up
list. Locate the image on your computer and drag and drop it into the image well. Then
from the Location pop up list (shown in the picture below), choose where you want the
Xtra Image to appear relative to the other objects on the page: Background, Middle or
Foreground. You will see the results in the Layout viewer window. If you want the text
content on your page to wrap around the Xtra Image box, check the Wraps Text
Contents check box; if you don't want the text to wrap around the Xtra Image box, just
leave this check box blank. Adjust the size of the box and move it to the desired
position on the page. You can add borders, margins, and a background color to the
Xtra box from within the Borders interface.
───────────────────────────────────────
Arrangement of Xtras and Elements on the Page
Xtra boxes are layered on your page in a certain order with respect to the other
elements on the page, as well as with respect to each other. The Xtra boxes are
layered with the other elements in the following order, from bottom up:
1. The Masthead, Footer, Text Content, Page Title, Navigation, Photo album, and
Slideshow elements are placed on the page first. In other words, these elements
are arranged on the bottom or first layer of the page.
2. The Xtra boxes are placed on the page second, arranged on top of the elements,
beginning with the first Xtra in the list and ending with the last Xtra in the list. For
example, the first Xtra box in the list (the top most Xtra) will get placed on top of the
elements and be the second layer; the second box in the list will get placed on top
of both the elements and the first box, and be the third layer on the page, and so
on.
Notes and Exceptions:
• Any Xtra that is placed in the Text Contents area will cause the text to wrap around
the Xtra. The Image/Graphic Xtra is an exception in that you can optionally turn text
wrapping on or off.
• All Xtras follow the ordered arrangement outlined above with the exception of the
Image/Graphic and External File - HTML Page Xtras. The Image/Graphic Xtra has
more advanced placement options, giving you the choice to place the Image Xtra
behind, in front, or in between the other elements and xtras on the page. When an
External File - HTML Page Xtra renders, it will appear on top or last on the page,
regardless of the order it appears in the Xtra box list.
Reordering Xtras on the Page
The Xtra Box list will let you move the position of each Xtra up and down in the list,
allowing you to change the layer positioning of each Xtra on the page. The up and
down arrow buttons below the list of Xtras, shown in the picture below, lets you reorder
the Xtras easily and quickly. Click on an Xtra to select it in the list; then press the up or
down button to move the selected Xtra up or down in the list, also moving its position
backward or forward on the page at the same time.
Selecting & Repositioning Overlapping Xtras
You can select an Xtra box by either clicking on it with your mouse from the viewer
window, or by clicking on it from within the Xtra box list. The corresponding editing
options for the selected Xtra will display on the right side of the Xtras tab interface.
When an element is covering or overlapping an Xtra box, ShutterBug will see the top
element first (or first layer) and not allow you to select and move the Xtra with your
mouse. In this case, you can select the desired box from the Xtras list on the tabbed
interface, or use the Tab key to cycle through all of the selectable objects on the page
until you get to the Xtra you want to select. You can then reposition the Xtra by holding
down the Option key on your keyboard, and click and drag the Xtra with your mouse,
to the new position on the page (Option + Mouse Click, then drag with mouse).
───────────────────────────────────────
For more detailed instructions on adding and editing specific Xtras, move on to
the step-by-step instructions covered in the next chapter -
Chapter 8. ShutterBug Xtras: How To.
───────────────────────────────────────
This completes the chapter on editing each element in the Layout window. If you've
just created a design you like while going through this chapter, and want to save it for
future use, add it to your Theme Library for safe storage. Go to the Preview window
and click the Select Theme button to open the Theme Library window. Select a folder
from the library's list and click the Add Current Theme button (located at the bottom of
the window). The theme will be added to your library instantly, ready and available for
use at any time. If you don't care to save anything that you've just done in the Layout
window, move on to the next chapter. Using the Theme Library is covered in more
detail in Chapter 9. The Theme Library.
───────────────────────────────────────
