Changing Your Site's Appearance

Documentation Menu
Go Back

Changing Your Site’s Appearance

Liferay has many ways to customize your site’s appearance. Your site’s favicon and theme are two of the first elements you may want to change. Themes set a default look and feel for your site, while the favicon is an icon that identifies your site in the user’s browser tab.

Changing Your Site’s Favicon

Start a new Liferay instance by running

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.75-ga75

Sign in to Liferay at http://localhost:8080. Use the email address [email protected] and the password test. When prompted, change the password to learn.

Then, follow these steps:

  1. Open the Site Menu (Site Menu) and go to Site Builder → Pages.

  2. Click the Actions button (Action Button) in the Application Bar and select Configuration.

    Open the Pages application, click the Actions button in the Application Bar, and select Configuration.

  3. Under Favicon, click Change Favicon.

    Click the Change Favicon button.

  4. Select or upload an image.

  5. Click Save.

Your site uses the chosen image for its favicon.

Changing Your Site’s Theme

By default, Liferay instances use the Classic theme, but you can deploy and use custom themes.

Deploy a New Theme

  1. Download the WAR containing the Acme Sample Blue Theme:

    curl https://learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/liferay-5b2v-theme.war -O

  2. Deploy the WAR containing the theme:

    docker cp liferay-5b2v-theme.war docker-container:[path-to-deploy-folder]

This loads the sample theme into your DXP instance. You can check your console for the following message to confirm the theme successfully deployed:

2020-03-11 17:06:35.601 INFO  [fileinstall-/opt/liferay/osgi/war][BundleStartStopLogger:39] STARTED liferay-5b2v-theme_1.0.0 [1112]

Change Your Site’s Theme

  1. Open your browser to https://localhost:8080 and log in as an administrator.

  2. Open the Site Menu (Site Menu) and go to Site Builder → Pages.

  3. Click the Actions button (Action Button) in the Application Bar and select Configuration.

    Open the Pages screen, click the Actions button in the Application Bar, and select Configuration.

  4. Expand the Look And Feel section and click Change Current Theme:

    Click Change Current Theme to select a new theme.

  5. Select the sample theme: Acme Sample Blue Theme.

  6. Click Save.

Navigate to the Home page and confirm the background color is now blue.

Confirm the background color is now blue.

What’s Next

Additionally, you can use style books to further customize design elements and master page templates to design the header and footer for content pages. See Site Appearance for a complete overview of customizing the look and feel of your site.

There are many themes available on the Liferay Marketplace that can be used to quickly achieve a professional look and feel.

You can also learn how to create your own theme.

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center