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....:)
