Editor’s note: Contributor Benjamin Niaulin is a SharePoint Specialist at Sharegate. Follow him @bniaulin
There are many classes with names like ms-cui-tts which mean nothing to me when I look at them for the first time. Of course, I could look at a CSS chart or inspect the web page using F12 in IE and Chrome to see what was applied but nothing was clear to me. That’s why I decided to show you the classes from my perspective.
Before the toolbars came the tabs
I don’t want to dive right in the actual list and library ribbon so let’s look at the tabs that get us there before.
So I took out my scalpel and started digging…
The tabs at the top are generated using an Unordered List, you usually see that in HTML as "UL". And inside this list we have List Items or "LI" which represent each tab generated. But there are some exceptions, surprised? When you are looking at the tabs, it’s true that each tab is a LI or list item but someone of them are split into more tabs… I’ll explain. If you look at the image above, it’s simple enough.
We have a UL and inside we have a LI for Browse and a LI for Page, that’s easy. However if you’re looking at Library Tools for example.
You might think we have 4 different LI right now, well I thought so too but no. Here is what this looks like.
<UL>
<LI>Browse</LI>
<LI>Page</LI>
<LI>Library Tools</LI>
<UL>
Before you jump to the comment section, yes I know this is not the real HTML code used by SharePoint but it’s to help visualize better.
What does this mean? It means we have to be careful when we do our CSS as it may not always work the way we expected, a single tab becomes two tabs…confusing. But if we make sure to write good CSS we should be ok.
Let’s look at the UL that generates all the tabs.
<ul class="ms-cui-tts">
Be careful, as there is another class we will be using very soon ".ms-cui-tt-s" note the very slight difference at the end. The latter with -s is the selected state of a tab whereas .ms-cui-tts is the UL that is the container of all the tabs.
Then we got the actual tabs themselves, so the LI inside the UL. They use the class ".ms-cui-tt"
What did we just learn?
<UL class="ms-cui-tts">
<LI class="ms-cui-tt ms-cui-tt-s">Browse</LI>
<LI class="ms-cui-tt">Page</LI>
<UL>
Well, seems like we’re getting somewhere but I am still having issues with the last one "Library Tools". We’ve established that "-tts" is the container for the list of tabs for the ribbon. We also found out that "-tt-s" is when a tab is in a selected state. Finally, every tabs use the "-tt" CSS class. But we do have exceptions, the "grouped tabs" like Library Tools. Instead of using ".ms-cui-tt" like every other tabs, the group calls a class called ".ms-cui-cg" I am guessing the g is for group but it’s hard to figure out the naming convention on these classes.
RECAP:
.ms-cui-tts (The entire list of tabs)
.ms-cui-tt-s (A tab that is selected)
.ms-cui-tt (tabs – mainly used for positioning)
Remember not to actually brand the tabs but the anchors inside the tabs , they use .ms-cui-tt-a. Another class to remember? Yes I know it seems complicated but with enough practice you’ll get the hang of it.
So if you wanted to brand all the tabs orange for example, you would do this:
.ms-cui-tt a.ms-cui-tt-a {
background-color:#E36C09;
}
Which will give you something like this:
Can you tell me what we would use to change the look of a selected tab?
That’s right!
.ms-cui-tt-s a.ms-cui-tt-a {
background-color:#E36C09;
}
The Browse Tab
Probably the easiest one to figure out, it is still under .ms-cui-tt but has another CSS class specifically for itself called .ms-browseTab. Of course that CSS class is only used to specify that this is the Browse tab, it doesn’t really apply any design. If you want to design the Browse tab you must use it in conjunction with the anchor that is below it to be more specific and win the CSS battle.
To brand the Browse tab use:
.ms-browseTab > a.ms-cui-tt-a
To brand the Browse tab when it’s selected use:
.ms-cui-tt-s.ms-browseTab > A.ms-cui-tt-a
Remember, as we saw above, the .ms-cui-tt-s is the class used when a tab is selected, that’s why I used it above. Don’t forget to add :hover at the end if you also want to change the design of the hover state. Try playing with the top margin and some padding and see how you can make the browse tab more evident for the users.
The dreaded grouped tabs
Ok perhaps I am exaggerating, but I have had some tough times with it. The CSS classes are horribly named and using bad practices, so of course it wasn’t the most exciting experience.
So here is my understanding, we said the ribbon tabs are in a container that uses .ms-cui-tts that each tab uses .ms-cui-tt and that when they are selected they use .ms-cui-tt-s. We also established that these classes are really for the positioning of the LI (List Items) that are the tabs but we don’t really use them to "brand" the tabs themselves. To do that we reach down to the anchors inside a.ms-cui-tt-a. We also saw that the "Browse" tab has his own class to differentiate it from the others. So what about those Grouped Tabs like Library Tools and Editing Tools?
To understand the CSS classes used we first need to speak the same language as them, that language is called “Geek”.
SharePoint CSS Geek Dictionary for the Ribbon:
tt = Tab Title
tt-s = Tab Title Selected
tt-a = Tab Title Anchor
cg = Contextual Group
ct = Contextual Title
So here is what happens, normally under the UL that uses .ms-cui-tts we have a LI for each tabs that use .ms-cui-tt right? Well for the Grouped Tabs or "Contextual Group" SharePoint uses the class .ms-cui-cg instead.
Wait what?
Regular Single Tabs:
<ul class="ms-cui-tts">
<li class="ms-cui-tt ms-cui-tt-s">
<a class="ms-cui-tt-a">
Browse
</a>
</li>
<li class="ms-cui-tt" >
<a class="ms-cui-tt-a">
Page
</a>
</li>
<ul>
(note that the above CSS is for explaining and not the actual html/css in SharePoint)
Contextual Group Tabs:
<ul class="ms-cui-tts">
<li class="ms-cui-tt ms-cui-tt-s">
<a class="ms-cui-tt-a">
Browse
</a>
</li>
<li class="ms-cui-tt">
<a class="ms-cui-tt-a">
Page
</a>
</li>
<li class= "ms-cui-cg">
<div class="ms-cui-cg-i">
<div class="ms-cui-cg-t">Library Tools</div>
</div>
<ul class="ms-cui-ct-ul">
<li class="ms-cui-tt">
<a class="ms-cui-tt-a">
Documents
</a>
</li>
<li class="ms-cui-tt">
<a class="ms-cui-tt-a">
Library
</a>
</li>
</ul>
</li>
<ul>
Basically, I’ll spare you the html above, it means that instead of using the usual .ms-cui-tt for the next tab, because it’s a contextual group SharePoint uses another class called .ms-cui-cg. And under this LI we have a DIV for the group title like “Library Tools” as well as another UL with the class .ms-cui-ct-ul which simulates .ms-cui-tts in a way to start another tabs menu below it. Then as you can see above the class uses for the individual tabs are the same.
What I noticed as well is that on the LI that uses the Contextual Group CSS class .ms-cui-cg there is also another class applied that defines the color: .ms-cui-cg-db
This one for example the db means Dark Blue, Heather Solomon wrote an article very recently listing all of them. Think we had the same article idea, at the same time hehe. Check out the bottom of her article for some details on the contextual groups.
What she suggests, is to use
li[class*="ms-cui-cg"].ms-cui-cg-s .ms-cui-cg-t
{
}
As a catch all for the selected contextual group (remove the –s at the end of .ms-cui-cg-s to get the inactive ones or add ", ms-cui-cg-i" where the i represents inactive)
This would allow you to brand all the ribbons the same color.
However, if you want to get a specific menu like Library Tools, you will have to work a little.
ms-cui-cg.ms-cui-cg-db .ms-cui-cg-t {
background-color:green;
}
.ms-cui-cg-s.ms-cui-cg-db .ms-cui-tt a.ms-cui-tt-a {
background-color:green;
}
.ms-cui-cg-s.ms-cui-cg-db .ms-cui-tt-s a.ms-cui-tt-a {
background-color:#FFFFCC;
}
Hope this help you understand some of the branding around the ribbon.
