Adding new colors to the palette for a table cell highlighting in Confluence


We were disappointed with the limited amount of colors for coloring cells. The request of this feature was created in 2012 —  but it is still not implemented.

We decided to fix it up though it is a piece of a cake.

So:

  • Get atlassian-editor-6.0.5.jar and confluence-editor-6.0.5.jar from /opt/atlassian/confluence/confluence/WEB-INF/atlassian-bundled-plugins  (you may have a different location and filenames depending on the version of your Confluence, but you surely will find it)
  • Open atlassian-editor-6.0.5.jar with some archivator tool and extract atlassian-editor-6.0.5\css\editor-toolbar-split-buttons.less
  • Add the following lines:
#table-highlight-group.highlight-orange .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-orange{background-color:#ffd3b6}
#table-highlight-group.highlight-violet .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-violet{background-color:#deddfa}
#table-highlight-group.highlight-brown .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-brown{background-color:#bd8e68}
#table-highlight-group.highlight-pink .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-pink{background-color:#997a8d}
#table-highlight-group.highlight-hotred .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-hotred{background-color:#f96161}
#table-highlight-group.highlight-hotgreen .highlight-indicator,#table-highlight-group .table-highlight-picker a.highlight-hotgreen{background-color:#61f961}
  • Extract confluence-editor-6.0.5\tinymce3\plugins\customtoolbar\table-toolbar.js and change
    var colourClasses = ["grey", "red", "green", "blue", "yellow", ""];
    var removeColour = [false, false, false, false, false, true];

    to
    var colourClasses = ["grey", "red", "green", "blue", "yellow", "orange","violet", "brown","pink","hotred", "hotgreen", ""];
    var removeColour = [false, false, false, false, false,false, false,false,false, false,false, true];

    Extract confluence-editor-6.0.5\tinymce3\plugins\customtoolbar\table-toolbar-min.js
    C=[false,false,false,false,false,true];c.each(["grey","red","green","blue","yellow",""]
    change to
    C=[false, false, false, false, false,false, false,false,false, false,false, true];c.each(["grey", "red", "green", "blue", "yellow", "orange","violet", "brown","pink","hotred", "hotgreen", ""]

Put all the changed files back into the jar-archives with your archivator tool.

With no hesitations delete the cache folder /var/atlassian/application-data/confluence/plugins-osgi-cache

Put the changed jar-files back on server.
Start the Confluence
Go to General Configuration, Stylesheet and add the following:
table.confluenceTable th.confluenceTh.highlight-orange,
table.confluenceTable th.confluenceTh.highlight-orange>p,
table.confluenceTable td.confluenceTd.highlight-orange,
table.confluenceTable td.confluenceTd.highlight-orange>p {
background-color:#ffd3b6
}
table.confluenceTable th.confluenceTh.highlight-violet,
table.confluenceTable th.confluenceTh.highlight-violet>p,
table.confluenceTable td.confluenceTd.highlight-violet,
table.confluenceTable td.confluenceTd.highlight-violet>p {
background-color:#deddfa
}
table.confluenceTable th.confluenceTh.highlight-brown,
table.confluenceTable th.confluenceTh.highlight-brown>p,
table.confluenceTable td.confluenceTd.highlight-brown,
table.confluenceTable td.confluenceTd.highlight-brown>p {
background-color:#bd8e68
}
table.confluenceTable th.confluenceTh.highlight-pink,
table.confluenceTable th.confluenceTh.highlight-pink>p,
table.confluenceTable td.confluenceTd.highlight-pink,
table.confluenceTable td.confluenceTd.highlight-pink>p {
background-color:#997a8d
}
table.confluenceTable th.confluenceTh.highlight-hotred,
table.confluenceTable th.confluenceTh.highlight-hotred>p,
table.confluenceTable td.confluenceTd.highlight-hotred,
table.confluenceTable td.confluenceTd.highlight-hotred>p {
background-color:#f96161
}
table.confluenceTable th.confluenceTh.highlight-hotgreen,
table.confluenceTable th.confluenceTh.highlight-hotgreen>p,
table.confluenceTable td.confluenceTd.highlight-hotgreen,
table.confluenceTable td.confluenceTd.highlight-hotgreen>p {
background-color:#61f961
}

Flush the browser cache and test the new palette.