Valamis Look & Feel
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. Several sections will become available.
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 a 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.
- Background color – changes the color of the header background.
- Icon color – changes the color of the icons in the header.
- Indicator color – an indicator is shown above the tool icon, whenever there is a new notification.
- Indicator border color – changes the border of the indicator border, which is an outer circle.
- Active tool color – the color of the currently selected tool in the header.
- User font color – the color of the user name in the header.
- Header bottom border color – the color of the thin line right below the header.
- Header element focus color – the color of the focus borders (shows up, when you use Tab to navigate elements).
- Search box fill color – the color of the inside of the search box.
- Search empty state font color – the color of the “Search” text, when nothing has been typed in yet.
- Search box icon color – the color of the search icon on the right side of the search box.
- Search box border color – the color of the border of the search box.
- Hide search box border – you may hide the box border if you want.
- Background color – the background color of the product menu.
- Font color – the color of the fonts and icons in the product menu. Inactive items will have icons and text of the same color.
- Active page indicator – the active page indicator line color.
- Active page icon color – the icon color of the active page.
- Divider – Divider line color between navigation items and admin tools, like Control Panel.
- Side border – Border color on the right side of the product menu.
- 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.