Understanding the Page Layout

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

Figure 1: The page layout is broken into three key sections.

Figure 1: The page layout is broken into three key sections.

Portlets or Fragments

The #content Section makes up the majority of the page. Portlets or fragments are contained inside the #main-content 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 Resources Importer, or they can be embedded in the page’s theme. See the 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:

ElementIDDescription
div#wrapperThe container div for the page contents
header#bannerThe page’s header
section#content > #main-contentThe main contents of the page (portlets or fragments)
footer#footerThe page’s footer

Figure 2: Each section of the page has elements and IDs that you can target for styling.

Figure 2: Each section of the page has elements and IDs that you can target for styling.

As shown in the diagram above, you can also add fragments to a page. You can have a page that contains portlets or a content page that contains fragments, not both. Fragments are components—composed of CSS, JavaScript, and HTML—that provide key pieces of functionality for the page (i.e. a carousel or banner). Liferay DXP provides an editor for creating collections of fragments that you can then add to the page. These fragments can be edited on the page to suit your vision.

Layout Templates, Page Templates, and Site Templates

The page layout within the #content Section is determined by the Layout Template. 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

Figure 3: Remember to account for the product navigation sidebars and panels when styling your site.

Figure 3: Remember to account for the product navigation sidebars and panels when styling your site.

Figure 4: The Add Menu pushes the main contents to the left.

Figure 4: The Add Menu pushes the main contents to the left.

Figure 5: The Product Menu pushes the main contents to the right.

Figure 5: The Product Menu pushes the main contents to the right.

Figure 6: The Simulation Panel pushes the main contents to the left.

Figure 6: The Simulation Panel pushes the main contents to the left.

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.

« Theme Components and WorkflowIntroduction to Gradle »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています