Valamis LXP Theme

The way Valamis LXP looks by default is determined by Valamis LXP Theme. A theme can be applied to a site or course to define its visual style and functionality in the form of various menus and buttons. By default, a Valamis LXP Theme is used, which has several notable parts:

  • Control menu
  • Product menu

The Theme settings define several aspects of its appearance, like buttons, links, and fields. You can access the settings as admin, by going to Control Panel -> Configuration -> Theme Settings

There are several options available there in different tabs of Theme Settings.

Control menu tab

Control menu is a horizontal bar on top of the screen, which includes the sidebar button and logo on the left, and various configurable icons and buttons on the right.

Valamis LXP Control menu tab In the Theme Settings, you can define the following Control Menu elements:

  • Upload a logo to be displayed in the top-left corner, and define a URL to which it will redirect.
  • Enable or disable the Notification icon
  • Define a search engine to be used: default Liferay search engine, or GSearch (recommended), and provide the results page URL.
  • Toggle Saved or Messages icons and their corresponding page URLs. 
  • Toggle Shopping Cart icon and the corresponding URL.
  • Toggle Notes button.
  • Toggle user profile and page URL for it.

Product menu tab

Product menu is a sidebar to the left of the screen, which can be opened and closed by clicking on the hamburger button. 

Currently, there is a default link for Courses present on the sidebar, which lists the Courses that the user can open. You can rename it, if you want, as well as provide translations for it. 

You can also add new list items to the sidebar. They will appear on top of the previously mentioned items.

To do this, in Theme settings -> Product menu, click Add menu item, then click on the New menu item that has appeared below. You will see fields for localizable title, page URL, and Custom CSS class. You can also set an icon here, as well as hide the link from the all (or guest) users. 

An item can also have a child item, which can be expanded or collapsed. This tree structure doesn't reflect the actual site page structure - you can organize these items independently from it and provide a relevant page URL for each item.

Valamis LXP Side menu

Portal tab

In this tab, you can set a landing page background, which will be seen when users need to log in. 

Valamis LXP Portal tab

You can also set the favicon here, which is visible in the browser tab header.

Theme icons tab

Here, you can upload an icon collection in an SVG sprite format. You can then use these icons for custom side menu items. 

Valamis LXP Theme icons tab

Styles tab

Here, you customize the colors and font to be used on your environment.

First, click Enable custom styles.

Then, define the colors:

  • Brand color - the generic color to be used across all elements. The next settings can override this color, if you want.
  • Primary color - if you want a different color for primary buttons, e.g. "Create lesson"
  • Link color - defines the color of hyperlinks.
  • Star rating color - defines the color of star ratings, seen in places like Lesson Viewer or Course browser.

You can also define a font different that the default one here. 

Want to provide feedback?

If you have questions or ideas for improvements, you can click the button below to send us a message. We will greatly appreciate it.