TalentLMS lets you modify your themes with CSS to give them their own unique look and feel. But what if you want to change the style of a specific page element and you don't know the default CSS code?
No worries! On most modern browsers, finding the CSS code of single page elements is a simple task.
For example, to find the CSS styles of the external announcements box on Chrome and replace them with your own, follow these steps:
1. Sign in to your TalentLMS account as Administrator and go to Home > Account & Settings.
2. In the Announcements section, go to the External (1) tab.
3. In the respective text area, add an announcement (e.g., Hello there!) and click Save.
| Note: Users can now see the external announcement box on their log-in page. |
4. Log out of your TalentLMS account.
You can see your external announcement right below the log-in fields.
5. On Chrome, press Control+Shift+I on your keyboard to launch the developer toolkit.
6. Press Control+Shift+C on your keyboard to activate the “Inspector” mode (or click the select symbol at the top left on the developer toolkit).
7. Point to the announcement element on your page and click it to highlight the respective HTML code and CSS styles on the developer toolkit. The default CSS is:
.tl-external-announcement {
margin: -15px 110px 30px 110px;
padding: 13px;
font-size: 15px;
font-weight: normal;
}
Copy it.
| Note: Alternatively, you can point to the element you want, right-click and click Inspect. |
8. Sign in to your TalentLMS account as Administrator and go to Home > Account & Settings.
9. Go to the Themes tab and, from the Theme drop-down list, choose a theme to modify.
10. Go to the CSS (1) tab.
11. In the code area, paste the external announcement CSS code and modify it to your liking (e.g., font-size: 35px;).
12. Click Update to save your new styles.
13. Log out of your account to check the new look of your external announcement.
Well done!
Now you can pick any page element you need and restyle it like a pro.