Defining the Pages’ Header and Footer
With master pages, you can define common elements for pages’ headers and footers. Clarity has just one page currently, the home page. Since this was created before any master page was available, the blank master page was associated to the page automatically. The header has the Liferay logo and label, a page-based navigation menu, the search bar widget, and the Sign In/personal menu.
Because Clarity needs their own header and footer design, you’ll create a master page to define the header and footer and re-use it across the entire site for all pages.
Open the Site Menu (
), then click Design → Page Templates.Click Add (
) and name the page Clarity MP.The content page editor appears. By default, the page has only one element: a drop zone. Clarity’s header and footer should appear above and below the drop zone.
In the Fragments and Widgets (
) menu on the sidebar, drag J2B6 Header Composition above the drop zone, then drag J2B6 Footer Composition below the drop zone.You imported these fragment compositions in the previous step, Importing Fragments and Resources.
Map the image fragment in the header to a logo. Open the browser (
), expand the Header Container element, and continue expanding elements until you get to the first grid module’s image fragment.
Click the image fragment to open its settings, then click image-square to set the source of the image.
Choose direct source selection, then choose the image clarity_logo.
Using the same procedure, add the clarity_logo image to the footer’s image fragment.
Click Publish Master.
The user menu is a custom fragment: J2B6 User Navigation Dropdown. It uses HTML and CSS to create a menu for logged in users. For logged out users, they see a user icon and the words SIGN IN, which they can click to access the sign in page.
The master page is in place. Right now the header and footer both contain menus that show the page hierarchy of the site. This will be improved in Creating Navigation Menus. Right now it’s time to configure Liferay to use the master page on the existing Home page and in all widget pages (e.g., the existing Search page).
Open the master page’s Actions menu (
) and click Mark as Default. Confirm that you want to use this master page as the default for all widget pages.Go to the Home page and click Edit (
) in the administrative header.In the content page editor, open the Page Design Options sidebar menu (
) and select Clarity MP.Click Publish.
Use a similar procedure to configure the default utility pages (404 and 500 error pages) to use the master page. In the Site Menu (
), click Site Builder → Pages → Utility Pages.
Your master page now defines the header and footer.
Even with a header and footer, the look and feel is not yet well polished. Links are all currently blue and do not match with Clarity’s brand colors, for example. Instead of spending time manually fixing this, leave it for now. The theme CSS client extension you deploy later will remedy these visual faults.
Next: create the rest of the site’s pages.