Show/Hide Font Colors in Rich Text Ribbon in SharePoint 2013

Few days ago, we faced a requirement of  SharePoint Ribbon for customizing the font colors for rich text element. The scenario is illustrated in the figure below:

First of all we tried to get the id of the section by using Firebug as follows:

After getting the id we tried to hide it by writing some CSS in the custom CSS file as written below:

#Ribbon.EditingTools.CPEditTab.Font.FontColor.MenucustomColor-Menu

 {

display: none;

 }

It should work. But it was not working. After some R&D, we get the solution that an extra ("\") is needed to identify the id of the section used in the ribbon. The perfect CSS for the purpose is given below:

#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor\.MenucustomColor-Menu

 {

display: none;

 }

And it is hiding perfectly as follows:

Similarly, we can hide the "Standard Colors" and "Theme Colors" section by writing the following CSS in the custom CSS file respectively:

#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor\.Menu\.Ms

{

      display: none;

}

and

#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor\.Menu\.MsTheme

{

      display: none;

}

Now, we moved to a detailed requirement  to add some more color box in the "Standard Colors" sections. This can also be done by adding the following CSS:

.ms-rteForeColor-11 {

  color: darkred;

  -ms-name: "";

  -ms-color:"Dark Red";

}

and

.ms-rteForeColor-12 {

  color: darkred;

  -ms-name: "";

  -ms-color:"Dark Red";

}

The result is shown in the following screenshot:

But what if we want to hide the color boxes that are previously added as shown below:

Suppose, we want to hide the first two colors of the "Standard Colors" section. For this we have to write following two CSS respectively in the custom CSS file as follows:

#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor\.Menu\.Ms tr:first-child td:first-child

{

display:none;

}

and

#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor\.Menu\.Ms tr:first-child td:nth-child(2)

{

display:none;

}

Observe that the first two color boxes are hidden. Following screenshots illustrates the scenario:

 Happy SharePointing....:)