Moodle plugins directory: Trema | Moodle.org
Trema
Michael MiletteThe Trema theme is a free, responsive Moodle theme that offers a clean and modern design. One unique aspect of the Trema theme is its ability to display course information in a grid format, which can be particularly useful for sites with many courses. Additionally, it includes options for a customizable frontpage, login page, and footer. Overall, the Trema theme for Moodle aims to provide a visually appealing and user-friendly interface for Moodle users. The main goal for this theme is to not need another site for information/advertising/marketing.
Trema Key features
Trema supports all of the features from the core Boost theme plus:
General
- Customizable page background image.
- Choose from a selectable link style.
- Hide default primary menu items like Home, Dashboard, My Courses, and Site Administration.
- Align the primary menu to the left, center or right.
- Remove the Log out link from the user menu so you can implement your own custom logout link.
- Add a custom favicon for brand identity.
- Site Administrators can access an exclusive Admin Dashboard with insightful site information.
- Enhance aesthetics with optional decorative Trema lines.
- Soften the look with some rounded corners for elements such as buttons, cards, secondary navbars, etc...
- Supports multi-language courses and content.
- Improvements for accessibility.
Frontpage
- Configurable optional image banner or content slider with customizable text.
- Adjust banner title spacing and text case.
- Create up to six captivating cards with custom content and icons.
- Incorporates space for additional unrestricted HTML content.
- Hide links to Page activities allows you to create static pages such as Help/FAQ, Contact Us, About Us and more.
- Implement an Admin area block that is exclusively visible to Site Administrators.
Branding
- Implement your organization's branding effortlessly with a choice of font and colors.
- Adhere to the 60-30-10 design rule for a visually appealing site.
- Tailor primary, secondary and body background colours.
- Select the colors for the navbar, Log In button, drawers, and footer.
- Choose from 15 different fonts for site content, frontpage titles, and headings.
- Control text case for some content.
- Automatic font color selection based on background colours ensures optimal color contrast ratios for accessibility.
Login
- Personalize the login page with an optional background image.
- Opt to display the 'Create account' section first.
- Streamline access for OAuth2 authentication by hiding the login form fields.
Course Lists and Search Results
- Present course lists and search results elegantly as cards.
- Control the display of course contacts and of the course's category in each card.
- Display the course summary in a modals, popovers, or link.
- Flexibility to show or hide courses located in hidden categories.
Course Navigation
- Show activity navigation buttons to navigate directly to the next or previous course activity.
- Option to hide activity icons on the course page.
Footer
- Choose between a Boost-style popup footer or a classic HTML footer.
- Choose to display or hide information in the footer.
- Remove Moodle and Trema branding for a white-label experience.
- Adjust footer background opacity and color.
User Profile
- Hide Moodle core profile fields on the Registration and Edit Profile page for a streamlined experience.
Development and Support
Trema is continuously developed and maintained by:
The ongoing development of Trema is partially sponsored by TNG Consulting Inc.
Previous maintainer: Trevor Furtado | GitHub
For support or to report a bug and suggestions, visit the GitHub Issues. For quick support, please contact the current maintainers directly using the links above.
Installation and Demo
Note that some features may not be available when using older releases of Moodle LMS and Trema.
- Download the version of Trema that is compatible with your Moodle version.
- See the installation and uninstallation instructions in the README.md documentation.
Experience all the features of the Trema theme by visiting the Trema demo site Use the following credentials to log in:
- Login: aluno01
- Password: aluno01
Documentation
Documentation is available in the README.md file included with the plugin.
Screenshots
Contributors
I draft a new release for version 4.1.
I fixed these minor issues that you told me about. Please, let me know if you find out any others issues with it. I'll put these changes in version 4.0 soon.
For version 4.2 I already saw that I have to review a lot of pages, but in general, we have just small adjustments to do.
I know that I must improve the documentation and add some examples to it. I hope I find out some time for it soon too. I already have the new versions configured on my online site, but I'm working on the improvements to the documentation and examples now.
Thanks very much for your support and patience
I suspect it is a problem between Trema and 4.2 as the error disappears if I use the Boost theme. I am aware you make no claim that Trema will work with 4.2 but I was just hoping I guess.
I love Trema and would really prefer to use Trema but understand the problems of constant maintenance. Thank you very much.
Andrew
/lib/ajax/setuserpref.php?sesskey=heUrxjEJuN&pref=drawer-open-block&value=true". FYI, I did I test by selecting the Boost theme insetad of Trema, and when I do the above mentioned steps I do not get the error. Thank you. Giovanni.
We have a new release for 4.3, please check it out and let me know if you find out more bugs or any improvements.
Add Michael Milette as maintainer lol
- Fix minors bugs in the layout of login, badges, secondary navigation margin, login username placeholder and some minors
- Fix minors bugs in code checker
- Fix CSS style lint errors
- Add settings for body background color
- #168: Fix status access for environment issues
- #173: Fixed deprecation of user_preference_allow_ajax_update
- #163: Fixed css on age of consent verification.
- #150: Fixed primary menu vertial alignment.
- #140: Fixed alignment of search form in Site Administration.
Thank you Michael Milette, you are awesome lol
PS.: in the next major, 4.4, we'll no longer support particles in our login page.
Kind regards,
Rodrigo Mady
Thanks, John
/* Trema - Change button color to Cru Yellow */
body #page input[type="submit"].btn-primary, body #page input[type="reset"].btn-primary, body #page input[type="button"].btn-primary, body #page button.btn-primary, body #page .messaging-area-container .send-button-container button, body #page .btn.btn-primary, body #page .messaging-area-container .send-button-container button.btn {
background-color: #FFCF07;
color: #000;
}
Take a look at the CSS :hover selector. For more information, see https://www.freecodecamp.org/news/hover-selector/
Best regards,
Michael
body #page input[type="submit"].btn-primary:hover, body #page input[type="reset"].btn-primary:hover, body #page input[type="button"].btn-primary:hover, body #page button.btn-primary:hover, body #page .messaging-area-container .send-button-container button:hover, body #page .btn.btn-primary:hover, body #page .messaging-area-container .send-button-container button.btn:hover {
background-color: #000;
color: #FFCF07;
border-color: #FFCF07;
border-width: 5px;
}
You're very welcome. Thanks for sharing the solution.
Best regards,
Michael
What are you trying to do? Yes, you can edit Trema CSS by changing the code on folder SCSS but we don't recommend 'cause depending on how you do this can break the theme Trema on updates.
tip: you must clear caches after adding/editing/removing the SCSSs.
We have a new release for 4.4, 4.3, 4.2, 4.1, and 4.0, please check it out and let me know what do you think of these improvements. We changed and added a lot of features, so yes, now Trema is more than just a theme — it's a platform enhancer.
If you find some issues, please feel free to create a new ticket in our Github repo.
Thanks again for your feedback. Your time and effort are very much appreciated.
And many kudos to Michael Milette who worked a lot on this new version lol
We hope you enjoy
Kind regards,
Rodrigo Mady
How can i edit the banner slides on the frontpage please? and when you add more than one banner image, the image moves when scrolling down. any can help with this please ?
thanks
You can edit the banner slides displayed on the front page by going to the Trema settings and clicking on the "Frontpage" tab (since release 4.4.0.0). Select the number of slides you want, (0, 1 or 2+) and click save. When the page reloads, there will be places for more slides.
We are aware of the image moving and are working on a solution. To track progress on this issue, comment on the following ticket and you will be automatically notified when the issue is resolved.
Best regards,
MIchael Milette
* Enhanced customization options for a more personalized experience.
* Streamlined navigation with intuitive course display features.
* Branding flexibility to align with your organization's identity.
* Improved user profile management for a seamless user journey.
* Bug fixes and enhancements for optimal functionality.
* ...and so much more! See the release notes for more details.
Download the latest version of Trema and elevate your Moodle experience to new heights!
Thank you for your continued support and feedback. We're excited to bring you these enhancements and look forward to your feedback!