Previewing Your Theme

To determine what changes need to be made, you can use Liferay’s preview window to see how the theme responds with the existing CSS styles. Locate the Dockbar icons on the left side of the screen. Underneath the plus icon, you’ll see a screen icon: this is the Preview button.

Figure 1: You can open the *Preview menu* to preview your portal in other devices

Click the Preview button to bring up the Preview window. Make sure you have the page scrolled all the way to the top before clicking the Preview button. Failing to do so may result in the Preview window being out of view.

Inside the Preview menu, you can see four pre-defined render options, as well as a Custom ratio size option. By default you see your site in the Smartphone preview. A good rule of thumb is to work organically, starting with the desktop view you’re used to and previewing your theme on smaller and smaller devices. By the end of this section you’ll understand why this is true. For the moment, just keep it in mind.

1. Select the Tablet preview.

   Each device displays the site in portrait view by default. If you click on the Tablet preview a second time, you’ll see that your site is now rendered in landscape view. Clicking the current preview a third time returns your view back to portrait.

2. Scroll through the theme in the Preview window and you’ll see the elements that must be modified.

   First of all, the carousel is outside the borders of the page, so it should be removed in tablet view. Second, While the navigation is functional, it’s not very tablet friendly, so you need to change it. Finally, while the logo looks okay, it could be scaled down some.

   

   Figure 2: You can identify the elements that need modified in tablet view using the Preview window.

   As a best practice, you should also see how the theme responds in landscape view.

3. Switch to landscape view to verify that the same elements need modification for the tablet.

   Now that the theme has been tested on the tablet, you can see how it responds to a phone next.

4. Select the Smartphone preview to view it.

5. Scroll through the site in the Preview window to see how it responds on a phone.

Now in the Smartphone preview, you can see that the same concerning areas on a tablet are more obvious in this preview: the logo is too large and needs to be scaled down; the navigation is even more squeezed than before; the carousel is even further beyond the borders of the page and definitely needs to be removed in this view.

Everything else seems to be responding well. Switching to landscape view confirms the same.

Figure 3: Viewing the theme in the phone's landscape and portrait views clearly shows the areas that need modifed.

Now that you have identified the elements needing modification for responsiveness, you can move on to the next section.