cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
robert_lehr
Community Member

Change colors of tabs?

Change colors of tabs?

0 Kudos
3 Replies
kmeeusen
Community Coach
Community Coach

Hi  @robert_lehr 

Could you clarify what "Tabs" you are talking about?

If you are talking about either the Global or Course navigation menus, then the easy answer is that you can't. This is controlled at the admin level and is part of what is referred to as "branding". If you are an account admin, you can learn more about this at https://community.canvaslms.com/docs/DOC-10862-4214724282 

Otherwise, as an instructor, you cannot change the colors of the "tabs" in the course (or global) navigation menus.

If I missed what you are asking for, please let me know.

Kelley

The question I have about tabs in Canvas has to do with Using Tabs in Your Canvas Course. I'd like to be able to add color to the tab bar across the top of the tabs so students can see them better. Does anyone know the code for that? 

I figured out the fix 🙂 

I believe there are 2 ways you can do this.

  1. In the RCE, after you've used the HTML editor to create the code for the tabs, return to the RCE, highlight the word that represents the word that appears on the tab and change the highlighting behind it. Don't forget to "save." That should allow colors to appear on tabs in a Canvas page. 
  2. The second way is to edit the code. This is the code for the color of the tab that goes with the tab title. <span style="color: #000000; font-size: 12pt; background-color: #ccffff;">Tab 1: Put your tab title here</span>
<div class="enhanceable_content tabs">
    <ul>
        <li>
            <span style="color: #000000; font-size: 12pt; background-color: #ccffff;">
                <a style="color: #000000; background-color: #ccffff;" href="#tab-1">Tab 1: Put your tab title here</a>
            </span>
        </li>
        <li>
            <span style="color: #000000; font-size: 12pt; background-color: #ccffcc;">
                <a style="color: #000000; background-color: #ccffcc;" href="#tab-2">Tab 2: Put your title for tab 2 here</a>
            </span>
        </li>
    </ul>
    <div id="tab-1">
        <h3>Tab 1: Put your tab content here</h3>

 

Tags (1)