Mojo3

Light Responsive Template for Joomla 3.x

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 
intro-webpage-layout.jpg

Collapsible module positions in a template have the advantage of making the remaining areas expand over module positions with no module published in them. This gives flexibilty in the layout, for example when you need to have a large area for an image gallery or code.

Top Menu & Top Search

Top Menu and Top Search are visible on widths of 800px and up. For lower widths they transform to a bottom menu where only the first level shows, with a JumpTo Menu button and a Search icon on top.

Site Logo

Takes a logo from a Custom HTML module with an image. How you set the image alignment inside the module defines left, right or center position of the logo. Below 600px width the logo is not shown to save room and bandwidth.

Site Name & Site Slogan

Site Name is taken from the Joomla configuration. Site Slogan takes a Custom HTML module with a text of your choice to display (or not). On widths below 600px both get a slightly smaller font.

Breadcrumbs

Display when you assign the breadcrumbs module to the breadcrumbs position.

Sidebar

Sidebar modules are simply assigned to "side". The left or right position of the sidebar is set in the template parameters. When no modules are assigned to the side position, then the main content stretches over the available area. The layouts with 1 sidebar have a 62%-38% Golden Ratio division. For viewports below 900px the sidebar jumps to below the main content, with a JumpTo Menu button on top. Below 800px width the sidebar shows below the main content with 2 columns for the sidebar modules, below 480px width the sidebar (below the main content) has 1 column for its modules.

Sidebar Search

With a search module assigned to the search position the search form shows in the sidebar. When the sidebar jumps to below the main content on viewports below 800px, then the search form shows below that, with a JumpTo Search button on top.

Above modules

4 available module positions. Above modules are 2 rows of 2 (with rounded box) for viewports higher than 685px (Android landscape). Below they become 4 rows of 1 without the rounded box.

Bottom modules

6 available module positions. Bottom modules are 3 rows of 2 for viewports from 685px to 1024px, and 2 rows of 3 for higher viewports (in rounded box). Below 685px they become 6 rows of 1 without the rounded box.

Footer modules

4 available module positions. Footer modules are 2 rows of 2 (with rounded box) for viewports higher than 685px (Android landscape). Below they become 4 rows of 1 without the rounded box. Footer modules have the "contentinfo" role assigned in HTML5, so they are meant to display site-related information (like contacts, author info, copyright info, links to search, sitemap, social media, etc.).

Credits

The credits at the bottom of the container are set inside the index.php (and styled through the stylesheet).

Back-to-Top

The "Back to Top" link at the bottom of the page is set inside the index.php (and styled through the stylesheet).