Documentation

A. Installation and Registration

A.1 Installation

There’s really no fuss with DW Accordions installation, you can perform the action intuitively.

That being said, if you work on Dreamweaver CC 2015, you have to download the extension installer from here:
http://www.extendstudio.com/extension_manager/download

For the other versions, Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1 you must follow these steps:

- install the "Accordions_[version-no].zxp" file using Adobe Extension Manager;

- restart Dreamweaver.

For Dreamweaver CS5.5, CS5, CS4 - install the "Accordions_[version-no].mxp" file using Adobe Extension Manager;

- restart Dreamweaver.

Install Dreamweaver Reveal Effects using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


All our extensions are available in the “Insert” window in Dreamweaver.
Click CTRL+F2 ( Command+F2 for MAC) to display the insert window.
- If the “Insert” window is displayed as Tabs, below the main Dreamweaver menu, all Extend Studio items will appear on the right side of the Tabs.

Insert Accordions for Dreamweaver


- If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

The Extend Studio products should appear in the pop-up list.

Insert Accordions for Dreamweaver

A.3 Registration

A.3.1 How to register the extension

After you download and install the Accordions extension, a registration pop-up will appear. To get things completely set and ready, copy and paste the code you find in the e-mail that will be automatically sent to you, provided by the you purchased the Accordions Extension.
If you are not sure that you can make great use of our product, you always have the option to start a free, 10 days trial and convince yourself of its functionality.

Insert Accordions for Dreamweaver

In the trial mode, when you load the page into the browser, you will get the following message: "This page contains DW Accordions created with DW Accordions. Not for commercial use!" After you register the extension, all you have to do is edit one of the accordions that were created with the trial mode and update it in order to remove the "Commercial use" message.

After registering the extension, the "Commercial use" message will not appear when you view the page in browser.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Adding an Accordion

B.1 Overview

The process is simple, intuitive and time saving. We have created a simple extension infrastructure for you to concentrate all your resources on the design activity. If you don’t know how to define a site in Dreamweaver, check this link and follow the easy steps:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Insert Accordions for Dreamweaver

After clicking the “Add Accordion” button, the editor will appear.

Insert Accordions for Dreamweaver

 

B.2 Skins

To get you out of the trouble of designing everything from scratch, we have prepared 10 skins for your accordion. On the upper right side of the editing panel you can see arrows that allow you to browse through all the available skins. The next step is to choose your favorite and apply changes that will give a personal flavor to the end result of your design.

Insert Accordions for Dreamweaver

Each skin has predefined settings you can edit from the sidebar.


B.3 B.3 Accordion Items

B.3.a The symbols inside the editor

 

Insert Accordions for Dreamweaver

The items section helps you manage some simple moves inside the editor, as it follows:
- The “+” icon allows you to add more content sections in your accordion
- The “-” icon allows you to delete content sections in your accordion
- The arrows on the right side of the items panel allow you to change the order of your content sections
- The folder symbol on the menu bar contains FontAwesome icons you can use to mark your content tabs and offer a dynamic look and feel to your accordion.
- The “x” icon allows you to delete the chosen icon.

Insert Accordions for Dreamweaver

Click on the "folder" icon to browse the Font Awesome Gallery.

Insert Accordions for Dreamweaver

This feature inside the "Items" panel allows you to choose the icon that carries the exact message you want to deliver next to the tab name.

 

B.4 Settings

B.4.a The "Name" Element

The Name box allows you to define your accordion items so that you can differentiate between them, provided you choose to add more than one to your site.

Important: The name should not contain spaces or special characters and can include only letters and numbers, with no space between them.

Insert Accordions for Dreamweaver

B.4.b The Dimensions Box

- This feature allows you to set the right measurements for your accordion extension. You can adjust both width and height of the accordion boxes. Parameters are set in pixels, percentages or em.

- The auto checkbox below the width and height sections adapts the size of each accordion box to the volume and dimensions of your content block.

Insert Accordions for Dreamweaver

- You can choose to leave one of your content boxes inside the accordion opened by default ( the natural state is compact/closed for all accordion items). This way, your potential user can see that there’s something worth discovering there and go further with the reading.

Insert Accordions for Dreamweaver

- You can offer a dynamic feel to the accordion box on your site, by allowing multiple open. This means that all your content boxes will open simultaneously under a clean and simple click or tap.

Insert Accordions for Dreamweaver

- The expand/collapse icon checkbox allows you to add or remove arrow symbols on the left or right side of all content tabs. This way, your potential user can see that tabs can be expanded / collapsed.

Insert Accordions for Dreamweaver

- The mobile break point field allows you to set the max width of the rendering surface on the output device (mobile).

Insert Accordions for Dreamweaver

B.4.c The Effects Panel

This box allows you to add some smooth effects to your accordion extension so that the user finds it entertaining to browse through the well-organized content blocks. That being said, you can easily set some particular actions:

You can change the accordion on (allow accordions tab to open) on click or hover. For a more accurate and controlled setting, you can also set the duration of this effect (ms).

Insert Accordions for Dreamweaver

Play a little with the easing, you have many options to choose from and select the right kind of easing type for your accordion extension.

Insert Accordions for Dreamweaver

 

B.5 Design

The design section allows you to style your accordion, as it follows:

- Design the accordion container;
- Design the accordion items;
- Design the content area.

Insert Accordions for Dreamweaver

 

B.5.a The Accordion Container

This refers to the actual box that holds the accordion items. From this section you can:
- Change the background. Choose a plain color from the color styling pane or choose some gradient shades. You can change the background and add an image as well.

Insert Accordions for Dreamweaver

Add padding, margins, borders if needed and round the corners from the dedicated box.

Insert Accordions for Dreamweaver

B.5.b The Accordion Items

This section allows you to change styles for the accordion menu bar. You can:

Add different styles for each state: normal, hover and active

Insert Accordions for Dreamweaver

- You can change the background. Add a solid color, play with gradient shades or choose a relevant image. Changes will apply to all the containers.

Insert Accordions for Dreamweaver

- You can add margins, borders, padding or round the corners for the accordion tabs. Changes made to one will apply to all.

Insert Accordions for Dreamweaver

- You can style up the written section (name/heading) from the typography pane. Change font type, choose an appropriate size for the written fragments of text, change the weight of the text.

Insert Accordions for Dreamweaver

- Change letter spacing
- Adjust alignment
- Set line height
- You can always add a certain web font, you have no less than 400 options to choose from

Insert Accordions for Dreamweaver

The icons box allows you to add a little bit of style to the figures next to the accordion box heading. You can change icon color, adjust icon size, change icon position and set the right distance from text.

Insert Accordions for Dreamweaver

You can select a particular image for all your expand/collapse icons.

Insert Accordions for Dreamweaver

You can set the distance from side and you can align the expand/collapse icons to the left or right side of your content tab.

Insert Accordions for Dreamweaver

 

B.5.c Content Area

This section allows you to change typography and styling for the content sections inside all accordion boxes. You can:

- Change the background
- Add margins, padding, borders or round the corners of the written content sections inside the accordion box

Insert Accordions for Dreamweaver

- You can change all typography details. You can choose from web fonts, as there are more than 600 alternatives for original fonts.

Insert Accordions for Dreamweaver

- You can adjust letter spacing and set line height.

Insert Accordions for Dreamweaver

- add web font;

The web font gallery allows you to add any free web font, choose the font weight and also search for a desired web font that you would like to use.

Insert Accordions for Dreamweaver

C. How to Edit the DW Accordions Extension

This operation couldn’t be easier, all you have to do is select Accordions inside Dreamweaver, click on the “Edit Accordion” icon and the editing panel will open.

Insert Accordions for Dreamweaver

After you finish editing the “Accordions” settings, click the “Update” button and the accordion will be updated.

Note: When you change presets, the entire block of content of the Accordions remains but the design settings will be replaced with the settings of the new preset. After you finish editing the tabs, click the Update button.

Insert Accordions for Dreamweaver

D. Add existing DW Accordions

The "Add existing DW Accordions" helps you insert an existing instances of Accordions in another page so that you don’t need to recreate it from scratch. To perform the action, you need to click inside the container where you want it to be added.

Insert Accordions for Dreamweaver

When you click the "Add Existing Accordion" button, a popup will appear where all the existing DW Accordions are listed (the existing instances that were added to the correspondent DW site). Choose the instance that you want to reinsert and click ok.


E. Delete DW Accordions

Insert Accordions for Dreamweaver

The process is simple, choose the accordion instance you wish to delete and you have to select the "Delete Accordion" option from the right sidebar.

F. Changing the content

After you insert the accordion on the Dreamweaver workspace, you can easily edit the content section. On the right side of each content tab you will see an eye icon that allows you to perform editing actions on all content blocks.

Insert Accordions for Dreamweaver

G. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC, CC2014, CC2014.1, CC2015.

H. FAQ

1. Can I use the license to add the extension in an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.