Quick start instructions (ONLY 5 STEPS:)

Download and install Accord, If any installation error, it's most probably due to write privileges of some folders of your Joomla installation, e.g tmp folder. Change it's wrights to 777 and after installation give it it's previous value.

1. Select at ARTICLES->Articles the articles you want in your module (from the list).

2. Enter their heights (in pixels) when open, in pixels. (in the same order you have selected the articles, separating them by a comma. e.g: 100, 250, 200)

3. On the right of the screen:

  • choose position
  • change Status to 'Published'

4. Choose tab "Menu Assignment" (on top-left of the page). Choose the menu item(s) in which you want the module to appear.

5. Save & enjoy your Accordion.

 

Full instructions

 1. Accordion Type:

  • If 'auto', when the header is clicked it's article opens and the rest of the articles automatically close.
  • If 'manual', when header is clicked it's article opens (if it's closed) and the rest of the articles do not close. You 'll have to click on their header to close.

2. Border color: defines the color of the module. Click on the text box and a color picker will appear. Select the color you want for your module's border.

3. Border width: defines the width of the module border. Choose from the list, a value from 0 to 40 (this is pixels).

4. Border opacity: defines the opacity of the module. Choose from the list, a value from 0.1 to 1.

HEADERS

1. Height: enter the height (in pixels) you want for the headers.

2. Background image: Choose from the list the background image you want for your module's headers when they are cheched.

  • Create custom background images: open your Joomla installation folder /modules/mod_accord/images, examine the images in it and make your own!

3. Background Image uchecked: Choose from the list the background image you want for your module's headers when the are unchecked.

4. Background Image hover: Choose from the list the background image you want for your module's headers when the are hovered with the mouse.

5. Font name: Choose from the list the font you want for the text of the header.

6. Font size: Choose from the list the font size you want for the text of the header.

7. Font color: Choose from the list the font color you want for the text of the header.

8. Font color (unchecked): Click on the text box and a color picker will appear. Select the Font color you want for the text of the header when it is unchecked.

9. Font color (checked): Click on the text box and a color picker will appear. Select the Font color you want for the text of the header when it is checked.

10. Text shadow width (checked): enter the width you want for the shadow of the text when the header is checked. 1st number: horizontal shadow, 2nd number: vertical shadow, 3rd number: blur.

All three number must be followed by 'px', as they 're all in pixels. Example: 0px 1px 1px

11. Text shadow color (checked): Click on the text box and a color picker will appear. Select the shadow color you want for the text of the header when it is checked.

12. Text blur (checked): Choose from the list the blur you want for the text of the header when it is checked, a value from 0.1 to 1.

Note: the text in the headers is the titles of your articles.

ARTICLES

1. Articles: Click on the text box and a list of your articles will appear. Choose the article you want to appear first.

Repeat for every next article.

2. Heights: type in the text box the heights of the articles (in pixels).

The first number is the height of the first article (in the articles' list you chose in the previous step).

The second number is the height of the second article etc.

3. Padding: Choose from the list the padding you want for the text of the article, a value from 0 to 40. Try it to see how it works.

4. Background opacity: defines the opacity of the background of the articles'. Choose from the list, a value from 0.1 to 1.

5. Font name: Choose from the list the font you want for the text of the articles.

6. Font size: Choose from the list the font size you want for the text of the articles.

7. Opening time: Choose from the list the endurance of the opening of the selected articles, in seconds, from 0.1 to 5 seconds.

8. Closing time: Choose from the list the endurance of the closing of the articles, in seconds, from 0.1 to 5 seconds.