cancel
Showing results for 
Search instead for 
Did you mean: 
kristen_meyer
Community Member

highlight a content tab ?

Jump to solution

Hello,

Does anyone know how to highlight a content tab to change a different color when selected?

1 Solution

Accepted Solutions

The styling for tabs is done through classes added via JavaScript. These classes move based upon user selection, so inline styling will not work for this. Due to restrictions with the editor, you can't include non-inline CSS in the individual page. This means you would have to set it via the global CSS:

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
     background: #008ee2;
}

Additional styling for just the active tab would also be included in this declaration.

View solution in original post

5 Replies
chofer
Community Coach
Community Coach

Hi  @kristen_meyer ‌...

I am assuming that you are adding in some custom code into a Canvas page that allows you to see your content built in tabs.  If this is the case, you can use code similar to this:

<div class="enhanceable_content tabs">
   <ul>
      <li style="background-color: #acf53d;"><a href="#fragment-1">Tab One</a></li>
      <li style="background-color: #c0f56e;"><a href="#fragment-2">Tab Two</a></li>
      <li style="background-color: #8eeb00;"><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

You can change the background color hex values to whatever you want (lines 3, 4, and 5).  You can also re-name the tabs to whatever you want (also lines 3, 4, and 5).  The content of each tab would then go into the areas for lines 7, 8 and 9.

Another way to do this is to use code similar to this:

<div class="enhanceable_content tabs">
   <ul style="background-color: #dcfa70;">
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

This time you are giving a single background color (line 2) behind the tabs...so the selected tab will always be white.

Keep in mind, though, that this code may not always work...as there has been discussions lately about depreciated jQuery code snippets like this one that no longer work inside of Canvas courses.  The most recent one was the accordions code snippet.

I hope this helps, but if you were looking for something different as it relates to tabs, please post a reply for clarification...thanks!

Thank you for replying. 

I am still having difficultly with changing the tab color. I would like the current tab that I have selected to highlight blue, while the tabs that are not in use remain white. As it is now, there is not a way to easily see which tab is open. 

For some reason the code you sent did not work. Here is the code that I have

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab-1">A: Research &amp; Resources </a></li>
<li><a href="#tab-2">B: Planning and Preparation</a></li>
<li><a href="#tab-3">C: Video Practice &amp; Feedback</a></li>
<li><a href="#tab-4">D: Student Work &amp; Reflections</a></li>
</ul>
<div id="tab-1">

Do you think this can be done?

The styling for tabs is done through classes added via JavaScript. These classes move based upon user selection, so inline styling will not work for this. Due to restrictions with the editor, you can't include non-inline CSS in the individual page. This means you would have to set it via the global CSS:

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
     background: #008ee2;
}

Additional styling for just the active tab would also be included in this declaration.

View solution in original post

I appreciate your response. 

Being new to Canvas (and web design), I am a bit confused by your message. Where in my code do I enter the the lines 1-3 that you suggest? 

Thanks! 

You don't. The styling needs to be loaded globally to your Canvas installation. This requires administrative rights. You can find more information here: https://community.canvaslms.com/docs/DOC-10862