Knowing the layout’s structure is crucial to targeting the correct markup for styling, organizing your content, and creating your site. Your page layout is unique to the requirements and design for your site. The Unstyled theme’s default page layout is organized into three key sections:
- Header: contains the navigation, site logo and title (if shown), and sign-in link when the user isn’t logged in
- Main Content: contains the portlets or fragments for the page
- Footer: contains additional information, such as the copyright or author
Portlets or Fragments
Section makes up the majority of the page. Portlets or
fragments are contained inside the
div. Liferay DXP ships with
a default set of applications that provide common functionality, such as forums
and Wikis, documents and media, blogs, and more. For more information on using
Liferay DXP and its native portlets, see the
User & Admin documentation.
You can also create custom portlets for your site. Portlets can be added via the
Add Menu (referred to as widget), included in a sitemap through the
or they can be
embedded in the page’s theme.
portlet tutorials section for more information
on creating and developing portlets.
You can target the elements and IDs shown in the table below to style the page:
|div||#wrapper||The container div for the page contents|
|header||#banner||The page’s header|
|section||#content > #main-content||The main contents of the page (portlets or fragments)|
|footer||#footer||The page’s footer|
Layout Templates, Page Templates, and Site Templates
The page layout within the
#content Section is determined by the
Several layout templates are included out-of-the-box. You can also
create custom layout templates manually
or with the
Liferay Theme Generator’s layout sub-generator.
Layout templates can be pre-configured depending on the page type you choose when the page is created. Along with setting the types of portlets to include on the page, the page template may also define the default layout template for the page. Climbing further up the scope chain, you can create site templates, which can define the pages, page templates, layout templates, and theme(s) to use for site pages.
Product Navigation Sidebars and Panels
The main page layout also contains a few notable sidebars an administrative user can trigger through the Control Menu. These are listed below:
- Add Menu: lets you add portlets (widgets) and fragments (if applicable) to the page
- Control Menu: provides the main navigation for accessing the Add Menu, Product Menu, and Simulation Panel
- Product Menu: contains administrative apps, configuration settings, and user account settings, profile, and dashboard page
- Simulation Panel: simulates how the page appears on different devices
When styling the page, you must keep the navigation menus in mind, especially for absolutely positioned elements, such as a fixed navbar. If the user is logged in and can view the Control Menu, the fixed navbar must have a top margin equal to the Control Menu’s height. See the Product Navigation tutorials section for more information on customizing these menus.