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.
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.
In this tab, you can set a landing page background, which will be seen when users need to log in.
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.
Here, you customize the colors and font to be used in your environment.
First, click Enable custom styles. The basic section includes:
- Brand color - the generic color to be used across all elements. The next settings can override this color, if you want. This means: all primary buttons, action buttons, active tab highlights, notification indicators, toggle buttons, page navigation, etc.
Note that every setting has an "info" button with visual example of what elements it will affect.
- Textual buttons and links color – changes the color of clickable text, like buttons or URLs.
- You can also define a font different from the default one here.
The next section is called Advanced settings and changes the following:
- Primary button color - if you want a different color for primary buttons, e.g., "Create lesson". It changes the base color, the text color, and the color of the button upon hovering the mouse cursor over it.
- Star rating colors - defines the color of star ratings, seen in places like Lesson Viewer or Course browser. Select the basic color, as well as the mouseover color.
- Study summary bar chart color – this changes the colors of the bars in Study summary. You only choose one color (the middle bar), and the rest of the bars lighten or darken accordingly.
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.