0
Welcome Guest! Login
0 items Join Now

Xenon: Recreating the Demo - Extension Section

Your Guide to Recreating Elements of the Xenon Demo for Joomla


Introduction

The Extension section includes three Chartist particles assigned to the extension-a, extension-b, and extension-c module positions.

Here is a breakdown of the module(s) and particle(s) that appear in this section:

Section Settings

Option Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Chartist (Particle) 1

The Chartist particle is a Gantry 5 Particle module placed within the extension-a module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name FP Extension A
Key extension-a
Chrome gantry

Block Settings

Demo Extension

Option Setting
CSS ID Blank
CSS Classes fp-extension-a
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 33.3%

Chartist Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name Chartist
CSS Classes title-center
Title Line Chart
Chart Type Line
Labels Data '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'

Series Data

[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5,  3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4]

Chartist (Particle) 2

The Chartist particle is a Gantry 5 Particle module placed within the extension-b module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name FP Extension B
Key extension-b
Chrome gantry

Block Settings

Demo Extension

Option Setting
CSS ID Blank
CSS Classes fp-extension-b
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 33.3%

Chartist Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name Chartist
CSS Classes title-center
Title Bar Chart
Chart Type Bar
Labels Data 'Term 1', 'Term 2', 'Term 3', 'Term 4'

Series Data

[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4]

Chartist (Particle) 3

The Chartist particle is a Gantry 5 Particle module placed within the extension-c module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name FP Extension C
Key extension-c
Chrome gantry

Block Settings

Demo Extension

Option Setting
CSS ID Blank
CSS Classes fp-extension-c
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 33.3%

Chartist Particle Settings

Particle Settings

Demo Extension

Option Setting
Particle Name Chartist
CSS Classes title-center
Title Pie Chart
Chart Type Pie
Labels Data '30',' 35', '50', '35', '45'
Series Data ['CSS', 'PHP', 'jQuery', 'Twig', 'SCSS']

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.