Styles Guide
Basic Pages:
Colours
Fonts
Headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Buttons
Default / Primary
Secondary (.secondary)
Terrain (.terrain)
Gradient Sample (.gradient_1) - hover from gradient to solid
Gradient Sample (.gradient_2) - hover from solid to gradient
Elementor buttons with custom icons (set in custom setting)
Other button classes:
Forms
Default
form-steps (shortcode/module)
file not found: /var/www/vhosts/pda.org.au/httpdocs/wp-content/themes/pda/src/modules/form-steps/main.php
Gravityforms default multi page
"*" indicates required fields
.form_style_1 (add class to shortcode container)
Grid
Grid: 2 columns
Default
Default
col_span_2
Grid: 3 columns
Default
Default
Default
col_span_1
col_span_2
col_span_2
col_span_1
Grid: 12 columns
col_span_6 tablet_col_span_12
col_span_6 tablet_col_span_12
col_span_4 tablet_col_span_6
col_span_4 tablet_col_span_6
col_span_4
col_span_3 mobile_col_span_6
col_span_3
col_span_3
col_span_3
col_span_5
col_span_7
Other helper classes:
row_auto = disable uniform column height
tablet_row_auto ( < 1023px)
mobile_row_auto ( < 767px )
section_cols_2 col_1_50 col_2_50
CONTAINER
CONTAINER
section_cols_2 col_1_35 col_2_65
CONTAINER
CONTAINER
Tabs
elementor-tabs default
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
.custom_tabs (custom html)
elementor-tabs.style_2
Tab 1 Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Accordions
Default Item
Two Columns
Fusce consequat semper tincidunt. Vivamus mina eros lm ipsum, tristique semper enim nec, consequat facilisis dolor. Nam vulputate eget elit vitae commodo. Sed dictum nisi fermentum quam malesuada, sed malesuada erat cursus. Aenean maximus tellus eu sollicitudin posuere. Etiam hendrerit mollis justo, at facilisis sem mollis eget. Ut vehicula lm eros ac lectus mina tristique luctus. Nunc cursus mauris non lectus tempus, vitae pretium est pulvinar. Aenean aliquam est ut justo malesuada dignissim.
Multi Columns
Lists
Default
- ul default
- list item
- list item
- list item
- list item
- ol default
- list item
- list item
- list item
- list item
FF List heading
FF List with Toggle
.style_1
- ul.style_1
- Dummy text of the printing and typesetting industry. Lorem Ipsum
- list item
- list item
- list item
.style_2
- ul.style_2
- Dummy text of the printing and typesetting industry. Lorem Ipsum
- list item
- list item
- list item
Others
Scrollbars (set max-height)
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.scrollbar_light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Tables
Default
| First Name | Last Name | Username |
|---|---|---|
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
.style_1
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Icons size test
file not found: /var/www/vhosts/pda.org.au/httpdocs/wp-content/themes/pda/src/modules/tests/icons.php
