Change colors of tabs?

[robert_lehr]

Change colors of tabs?

[kmeeusen]

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

[L_Knight]

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? 

[L_Knight]

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>

[CraigKerwin]

I can get tabs to work. I can change the "set" colour of a tab.

Is there a way to invoke a click event so that when a tab is clicked, a colour change occurs.

For example, let;s say there are three tabs. The "current" tab could display as white to align with the tab contents, but the other two tabs are a light great. Click on the second tab, it turns white and tab 1 and 3 are now light great, etc

Is this possible?

thanks