Documentation

Changing Your Site’s Appearance

Changing the site logo, favicon, and theme are some of first look and feel areas you may want to change. Themes are used to set the overall look and feel for your Site. A Site’s Pages can be configured to use any theme that has been deployed to your DXP instance.

The DXP Docker image has the Classic theme available by default. In this example, we deploy a new simple theme and then show you how to switch from one theme to another.

Changing Your Site’s Theme

Deploy a New Theme

Start a new Liferay instance by running

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.29-ga29

Sign in to Liferay at http://localhost:8080. Use the email address test@liferay.com and the password test. When prompted, change the password to learn.

Then, follow these steps:

  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 will load the sample theme into your DXP instance. You can check your console for the following message to confirm that 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

Configure the Pages for your Site to use the deployed theme:

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

  2. In the Site Menu on the left side of the screen, navigate to Site BuilderPages.

  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. Scroll down and click the Change Current Theme button:

    Click Change Current Theme to select a new theme.

  5. Select the deployed sample theme, Acme Sample Blue Theme.

  6. Navigate back to the home page for your Site to confirm that the theme has changed. The background for the content section of your Site is now blue.

    The home page has a different color background after changing the theme.

Your Site’s theme has been updated.

What’s Next

For a full length overview of how you can manage your Site’s appearance, see Managing Your Site’s Appearance.

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.