Outer Layouts
First, check out the layout depiction on the right. It shows the position of the layouts/sidebars in relation to each other.
The outer layout is called “outer” because it literally sits outside the container of the main content and inner (right) sidebar. Its position will always be either to the left or right of those 2 blocks of content. Also referred to as left layout, since it positions the left module position on the page.
Characteristics of outer layout scheme
- Controls the [Secondary Content] block.
- Always positioned on the outside of the main content and right sidebar.
- Can be positioned to the left & right of the main content & right sidebar.
- 8 layout options to choose from: 4 on left and 4 on right.
- Contains 4 Joomla module positions, including the {left} position.
- Called left sidebar because it contains the left Joomla module position.
- All 4 positions can have their module Chrome set in Configurator.
- Is completely collapsible, i.e. if no modules published it wont show.
View the interactive layout demo
Outer sidebar positioned to the left
These 4 options are when the left sidebar is positioned to the left of the content and right sidebar:
- On left - 160px
- On left - 180px
- On left - 200px
- On left - 300px
Another depiction of the left position options
| 160px Left |
| Main Content |
Inner Sidebar |
|
| 180px Left |
| Main Content |
Inner Sidebar |
|
| 200px Left |
| Main Content |
Inner Sidebar |
|
| 300px Left |
| Main Content |
Inner Sidebar |
|
Outer sidebar positioned to the right
These 4 options are when the left sidebar is positioned to the right of the content and right sidebar:
- On left - 180px
- On left - 200px
- On left - 240px
- On left - 300px
Another depiction of the right position options
| Main Content |
Inner Sidebar |
|
180px Right |
| Main Content |
Inner Sidebar |
|
200px Right |
| Main Content |
Inner Sidebar |
|
240px Right |
| Main Content |
Inner Sidebar |
|
300px Right |
Inner Layouts
Again, check out the layout depiction on the right. It shows the position of the layouts/sidebars in relation to each other.
The Inner layout is called “inner layout” because it literally sits on the inside of the left (outer) sidebar.
Its position will always be either to the left or right of the main content, but will always remain on the inside of the outer sidebar. Also called the right sidebar because it contains the right Joomla module position.
Characteristics of inner layout scheme
- Controls the [Tertiary Content] block.
- Positioned to the right of the main content on all but one setting.
- Nested a few levels deeper in the page structure than the outer.
- Will always appear on the inside of the outer sidebar.
- 5 layout options to choose from, 1 on left and 4 on right.
- Contains 4 Joomla module modules including the {right} position.
- All 4 positions can have their module Chrome set in Configurator.
- Position always set directly in relation and proportion to the main content.
- 2 Fixed width options of 200px either on the left or right of the main content.
- 3 Percentage based layouts (sidebar & content share a portion of 100%).
- All 4 positions can have their module Chrome set in Configurator.
- Called right sidebar because it contains the right Joomla module position.
- All 4 positions can have their module Chrome set in Configurator.
- Is completely collapsible, i.e. if no modules published it wont show.
Depiction of the inner position options
| Outer Sidebar |
| Main Content |
50% Sidebar right |
|
| Outer Sidebar |
| Main Content |
33% Sidebar right |
|
| Outer Sidebar |
| Main Content |
25% Sidebar right |
|
| Outer Sidebar |
| 200px Sidebar left |
Main Content |
|
| Outer Sidebar |
| Main Content |
200px Sidebar left |
|
View the interactive layout demo
Page Widths
The page width option is a setting in Morph Configurator that gives you the option to set the width of your the entire website. You can select from 4 various page/site widths depending on your project requirements and target audience.
Benefits of this feature
Have you ever worked on a Joomla project using a template that has a fixed width of 950px and your customer tells you he needs the site to accommodate 800 x 600 browsers?
If you have, then you know the job ahead of you requires diving into the code and figuring out how its all put together before you can even start modifying the code to accommodate the new width. Along with this comes the possibility of bugs that will creep in due to inconsistencies caused by the modifications to the core code.
This is where the page widths feature comes to the rescue and makes a modification like this a snap! In a matter of seconds you can apply one of 4 common preset widths to suit your sites needs - 750px, 950px, 974px and 100%.
Page suffix extended
Use this feature to add a custom “hook” to any page or pages on your website. This “hook” is set at the highest level in the page structure, this means any visual css can now be added or over ridden for that page only.
Benefits of this feature
If you need to add custom styling on a particular page of your website, or perhaps a specific section or area, then this is the tool you need.
By adding a suffix to a page, you can target any elements on the page and override it. You can add custom coloring, images, buttons, links, or give a page or section a unique theme. This feature adds flexibility and provides control.
What can you use this feature for?
The use of this feature is very varied and depends to some degree on your creativity. Here are some ideas of what you can use the page suffix for.
- Brand specific areas of your site
- Color code different sections of your site to match a color coded navigation
- Set gallery pages to have a dark content background
- Create product landing pages that are a little different
- Change the logo on a specific page or section
- Add a seasonal theme to your site or areas of your site
- Add styling to a page or area for collaboration with other companies
- Add icons that represent sections of your site to headers or other elements.
read more about "the fx range features"
