Presentation   ePortfolios - Design   Styles (Formatting)

Styles (Formatting)

What are the Format options?

Several aspects of any box you select can be altered using the tools in the Styles area of the Design tab.  You have the ablility to change the background color and transparency, the border, margins, corner shape, and shadow of any boxes in the portoflio.  These features are only available with a Custom Template and can be found by clicking on the Design tab in the portfolio editor tool bar.

Design Button

Structure of the Styles Tab

On the styles tab, you can select the box on which you would like to work, make changes to the fonts, and edit the background, border, and shadow of that box. The font area is only available for editing when you have selected a box that can contain text. The shadow and rounded corners tools in the formatting area are only available in the most recent versions of the major internet browsers.

Design Styles 1

Format Options

There are five main formatting options for boxes on a Custom Template.  Each one can be set independently for each box in a portfolio, or you can set them for the entire portfolio.  If you select a particular box and area of that box, these values will be determined only for that box and area.  If you select Site and All Boxes, you can set these values for all boxes in the portfolio.

Background

The background setting allows you to select a color for the background of the selected box.  By clicking on the color box next to Background, you can open the color picker and select the background color you want.  Using the Transparency slider, you can adjust the opaqueness of the background color.

Design Styles 6

Border

The border setting allows you to add a border around the selected box.  To make the border appear, select a color for the border, then change the size using the slider.  You can choose which side(s) of the box you would like the border to appear and select from one of the four styles.  You will instantly see these changes in the Preview area at the bottom of the screen, allowing you to make adjustments and see how they look.

Design Styles 7

Margin

The margin settings allow you to adjust the spacing around or inside a selected box.  The Top margin places more space above the box.  The Bottom margin increases the space below the selected box.  Changing the Inside margin, changes the space between the outside of the selected box and any text or other boxes that may be found inside that box.

Design Styles 8

Rounded Corners

The rounded corners tool is only available in the most recent versions of the major internet browsers.  If you cannot change this setting, try updating your browser.  This feature allows you to determine the roundness, if any, of the corners of the selected box.  This is adjusted using the Rounded Corners slider.

Design Styles 9

Shadows

The shadow tool is only available in the most recent versions of the major internet browsers.  If you cannot change this setting, try updating your browser.  This feature allows you to place a shadow behind the selected box to provide some depth to your portfolio.

Design Styles 10

With this tool you can select the color, size, and horizontal and vertical position of the shadow.  To turn the shadow on you must click YES in the shadow section of the formatting area.  Then you can set the color, size, and position.  Clicking the arrow corresponding to Horizontal, Vertical, or Size will open up the sliders used to change these values.  By changing the selections you can try out different combinations and view them in the Preview below the Design tab.  If you decide you don't want a shadow, simply click No in the shadow section and the shadow will be removed.

Applying your Changes

Once you are happy with your selections, click the Apply button in the upper right corner of the screen to keep your selections. You then need to click Close to return to the editor. Clicking Close without clicking Apply first will remove any changes you have made and return you to the portfolio editor.

Design Styles 4Next Page - Private Sharing

DFA