Floating Palette

The Floating IMAGE Palette

The floating palette changes depending on the type of object.  You will notice in Figure 1 the "image" floating palette and in Figure 2 below, the "text" floating palette.  The floating palette will allow you to edit the styles of an object as well as additional features such as the object selector, resettling images and editing the properties of an object.  We will first begin with the image floating palette.

C1 -Resample Image

The Resample Image allows you to generate a resampled image of your original.  As an example; you have uploaded a larger file and have placed it on to the page, after scaling the image to fit the content, you can then click the "Resample Image" button and the system will resize the image, and make it a smaller file while discarding the larger image.  This will ensure that you can set your scaling on the page and with re - sampling, have the image be just the right size, as well as the right file size. Note that your original file is untouched. The system will simply replace the useage of your original image with the new, smaller image it just created.

C2 - Edit Properties

Every object that is placed onto the page has a properties option.  These options will include:

• Image address - shows you the path and the name of the image.
• Text description [aka ALT TAG] - allows you to insert a text description for any image.  Many search engine optimization professionals use this "Alt tag" to describe the image.  You'll also notice, that when you insert an image description, during the preview of the page when you move your cursor over the image, this text will pop up giving a description to your web site visitors.  As suggested before, try to use this section to describe in more detail what the image is about using keywords that people will find you for.
• Width - allows you to set the width of an image
• Height - allows you to set the height of an item
• Left Coords (px) - this describes the position from the left of the page in pixels.  It allows you to have exact coordinates for every image on your page.
• Top Coords (px) - this describes the position from the top of the page in pixels.
• Element is default container for new elements - the default container is used when making templates.  There should only be one default element per template. None of your elements should have this box checked off unless you're editing a Template (in "Template Mode").
• Element is locked from the builder - the image is now locked in place.  This is exactly the same as the lock icon on the object toolbar.
• HTML Tab -  the HTML tab allows you to access the HTML for any given object.  This can be considered as a very advanced option.
• CSS Tab - CSS allows webmasters to customize the page and it styles. This can be considered as a very advanced option.

C3 - Image path

This option shows the path of the image. You can click on the 'folder' icon to the right of the text to open a library dialog so you can change the image.

C4 - image description

This option shows you the "ALT TEXT" or descriptive text of the object.

C5 - Colors - Lines

This option of allows you to set the line color that surrounds the image. You can click on the 'pallette' icon to the right of the text to open a color-picker dialog. Once you've selected your color hit the 'Select' button at the bottom of the dialog to set it.

C6 - Border / Padding Width

This option allows you to set the padding and width of the box that surrounds the image.

C7 - Border / Padding Style

This option allows you to set the style of the line that surrounds the image i.e.  Solid, double, dotted and dashed line types.

C8 - to Block Container

This option allows you to turn an image into a container, allowing for content to be dropped into that box and turning the image into a background.

C9 - to Link

This option allows you to make a link with the image.

C10 - to button

This option allows you to turn the image into a button

C11 - Object selector

The object selector allows you to browse all of the objects on the page.  You will notice that when selecting objects in the drop down, the corresponding object on the page will highlight.  This is an excellent option for finding those hidden layers throughout the page.

Figure 1

The TEXT Floating Palette

The floating palette changes depending on the type of object.  You will notice in figure one the "image" floating palette and in figure two, the "text" floating palette.  The floating palette will allow you to edit the styles of an object as well as additional features such as the object selector, resettling images and editing the properties of an object. 

When you have selected a text container, the text floating palette will provide you with the following selections:

D1 - edit content

This selection will allow you to edit the content within the text container.  Above the text container on the page you will also will notice that there is an edit button as well for the same exact function.

D2 - edit properties

Every object that is placed onto the page has a properties option.  These options will include:

• Text alignment - choose to align the text center, justified, left and right.
• Width - allows you to set the width of an image
• Height - allows you to set the height of an item
• Left Coords (px) - this describes the position from the left of the page in pixels.  It allows you to exact coordinates for every image on your page.
• Top Coords (px) - this describes that position from the top of the page in pixels.
• Element is default container for new elements - the default container is used when making templates and indicates the element into which you all elements will be inserted when editing pages.  There should only be one default element per template.
• Element is locked from the builder - the image is now locked in place.  This is exactly the same as the lock icon on the object toolbar.
• HTML Tab -  the HTML    allows you to access the HTML for any given object.  This can be considered as a very advanced option.
• CSS Tab - CSS allows for webmasters to customize the page and it styles. This can be considered as a very advanced option.

 

D3 - text align -

Choose to align the text center, justified, left and right.

D4 - Font type

You'll be able to choose from the available fonts.  Please note, because we want to ensure that your entire web site has all the latest standards and can be viewed evenly across all browsers, it's necessary to use the most common font types.  This will ensure cross platform compatibility throughout the entire web site.

D5 - Font size

This option will allow you to select the font size for your text.  We suggest leaving the option of "inherit".  This will ensure that your pages inherit the styling from the overall template that you've chosen.  If this is done you can expect a great level of consistency throughout the site. 

For webmasters: You can select a different font if needed, and the application will insert the font styles in line.  You can also access the HTML for the text object and update the code manually from the element properties.

D6 - text color

This option will allow you to select a text color by clicking on the palatte in "D7".

For webmasters: You can also enter in the color code manually.

D7 - text color palette

You'll notice that their several palettes to the right of the colors menu.  This will allow you to select colors that will be applied to your text element. You can click on the 'palette' icon to the right of the text field to open a color-picker dialog. Once you've selected your color hit the 'Select' button at the bottom of the dialog to set it.

D8 - link color

This option will allow you to select a link color. You can click on the 'pallette' icon to the right of the text field to open a color-picker dialog. Once you've selected your color hit the 'Select' button at the bottom of the dialog to set it.

D9 - background color

This option will allow you to select the background color for your text. You can click on the 'pallette' icon to the right of the text field to open a color-picker dialog. Once you've selected your color hit the 'Select' button at the bottom of the dialog to set it.

D10 - Line color

This option will allow you to select the line color for your text box. You can click on the 'pallette' icon to the right of the text field to open a color-picker dialog. Once you've selected your color hit the 'Select' button at the bottom of the dialog to set it.

D11 - borders and padding - Width

This option will allow you to set the padding that surrounds the text.  You will be able to select the border padding by changing the numbers within the box provided, or clicking on the red icon to input both the border and the padding at the same time.

D12 - borders and padding - style

This option will allow you to select the line type i.e.  Solid, double, dotted and dashed lines.

D13 background image path

This option will allow you to select the background image for your text.  You can also click the folder to the right of this option to browse an image from your library of files.

D14 - background / image tiling

This option will allow you to select the tiling preferences for the background that you've selected for your text which will include: left and right only, up and down only no tiling selected.

D15 - object selector

The object selector allows you to browse all of the objects on the page.  You will notice that when selecting objects in the drop down, the corresponding object on the page will highlight.  This is an excellent option for finding hidden layers throughout the page.

Figure 2