Applying custom styles to your Tahoe site with the CSS Editor

With Tahoe, you have plenty of control over your site's look-and-feel without needing to resort to code. Sometimes, though, that's not enough, and you might find you want to do something really special, and unleash the creativity. That's where CSS comes in, or more specifically the CSS Editor. CSS (Cascading Style Sheets) is the reason the internet looks fabulous, and the sites of the 90's are a thing of the past. That being said, CSS is just one half of the equation, you also need the knowledge to use it and the visual design skills necessary to make something beautiful. CSS is simply a tool used by those in the know, so consider whether you need the help of an expert when using this feature.

Please note: This feature is currently available for Tahoe Pro and Premium customers only. Please contact your Customer Success Manager if you require it and can't find it!

In this article we're not going to teach you CSS or the skills a visual designer can bring to the table, that's a whole other can of worms that deserves a full course, not just a help article, but we are going to cover how to use it and how to identify elements for editing, through an example. If you don't know CSS, this article's not going to make a huge amount of sense, but if you're intrigued and want to learn some basic CSS, a site like FreeCodeCamp might help!

For those of you who are confident and just want to get going, to access the CSS Editor take the following steps:

  1. Navigate to your management console
  2. Select Appearance Settings from the left-hand navigation
  3. Select the CSS Editor tab

This editor area will allow any valid custom CSS you write, and will be applied across your platform. For many of you, you can stop reading here and go nuts - CSS entered here, provided it is valid, will be applied to all areas of your site. For everyone else, however, let's look at how you could use this to edit an existing style, and work around some limitations inherent to CSS.

Let's start with a basic course page. You should be familiar with this by now, it's a basic Tahoe site with no styling applied other than those set during the site's creation:

But let's say we would like to change something about this page. How about we make our search button green, like our brand color?

The first step is to right click the element you're trying to modify and Inspect it. This opens up the developer tools, where you'll find the source code for the current page.
Note: These instructions are true for Chrome, but may be subtly different in your own browser. Most modern browsers will have this capability, however.

With this open, you should have the element you want (or close to it) already highlighted in the HTML area of the DevTools. What you need is the Class attribute of the element you're trying to modify. You can double click it to quickly select it to copy it.

Now comes the part where you need to know CSS. In this case, the CSS for changing the background to my lovely green color (#0a9900) is extremely simple:

.search-button{
    background-color:#0a9900;
}

And that's exactly what we'll try to put into the CSS Editor first:

But wait, we're not done yet. Unfortunately, it's not that easy. At this point, I'll confess to having deliberately mislead you in order to demonstrate a common troubleshooting step. I hope you can forgive me.

Overriding core styles

Heading back into our LMS after saving, our search button is still blue, the traitor.

This is because currently, the core platform CSS is enforced in a variety of different, specific ways. As most who use CSS know, if you're more specific with your targeting, you win the contest. Let's look at what's happening in this case, and take a look at how to fix it. This won't always happen, sometimes what we've done above will be enough. But other times, you'll need to troubleshoot it. To do this, we select the element exactly the same way as before, but head over to the Computed tab in our DevTools, to find the property it's referencing and where it got that blue from.

In this case, there's a selector superior to ours that's overriding us. You can see our CSS was added to the site, but it's outmatched. To win this fight, we'll have to use that same selector (or one superior to it in specificity) in order to have our search button finally turn green.

In this case the offender is:

.search-bar .search-button

To fix our button, that's what we'd need to use, as this is more specific than our original selector. If you use the same selector as an existing bit of styling, your code in the CSS Editor will win every time.

Always make sure you hit both save buttons - Save your code and the save button that appears at the bottom of the page. This is required for validation reasons to make sure your CSS doesn't break anything!

Much better.

We're not done yet with our search button (for one thing it'd need hover and focus states), but this isn't an article about changing the color of the help button, it's about applying styling in general. With the knowledge of how to use CSS and the CSS editor, your ability to modify the platform is greatly increased, but it does require knowledge of CSS.

Troubleshooting advice and tips

We'll populate this section over time with troubleshooting advice, but if you need help please don't hesitate to get in touch via the usual support channels!

If your CSS rule for is for some reason is not applying to the element (and not showing in the inspector window when you try to inspect the element), a possible cause may be a known bug with SASS compilation - if your code was pasted or autocompleted there is a chance your code included a unicode character (displaying as a blank space) has appeared in your CSS selector. To fix this just do the following:
  • Your CSS selector first line will look something like this: .my-super-selector {
  • Delete the opening bracket and the space before it so you get: .my-super-selector
  • Add back the space and the bracket so it's once again: .my-super-selector {
  • Save your code so it compiles

If you've saved your CSS (with both save buttons!) and you still can't see it, your old site's styling may still be cached. Consider clearing your cache or performing a hard refresh.

The following tips were kindly provided by our customers! If you have any of your own, please feel free to share them with us.

  • Use Chrome. Its most reliably for giving accurate selector info. Then test in other browsers.
  • Trust Chrome's "Copy selector". Seems to try to be concise and is always accurate (no retries)
    • Right click on element in HTML panel (middle) and choose Copy > Selector
  • Modify the CSS inline in the Styles panel (far right). Either add or modify existing properties. You can uncheck specific items which is convenient. If needed copy the CSS right out of the Styles panel.
  • Its often not easy to know what any one line does based on CSS code. Add comments to your CSS. You'll thank yourself later and future employees will say kinds words about you for it :)
    • /* Some comment here */

Related Articles