Changing the color palette in Confluence

Kai Poynting

I need to change the color palette in confluence - but the method I used before does not seem to be valid, or rather the format has changed: 

https://confluence.atlassian.com/confkb/how-to-customize-confluence-editor-s-color-palette-313464920.html

 

I can find the colorpicker.soy file mentioned but within that file, this is no longer the way the colors are set or presented: 

#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333',
                 '800000','FF6600','808000','008000','008080','0000FF','666699','808080',
                 'FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','999999',
                 'FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','C0C0C0',
                 'FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF'])

 Instead, it's like this:

{namespace Confluence.Templates.Editor.Components.ColorPicker}

/**
* Color picker for editor (same color palette as tinymce color picker)
*/
{template .display}
{let $colors: [
[ 'hex' : '000000', 'name' : getText('tinymce.colorpicker.black') ],
[ 'hex' : '993300', 'name' : getText('tinymce.colorpicker.burntOrange') ],
[ 'hex' : '333300', 'name' : getText('tinymce.colorpicker.darkOlive') ],
[ 'hex' : '003300', 'name' : getText('tinymce.colorpicker.darkGreen') ],
[ 'hex' : '003366', 'name' : getText('tinymce.colorpicker.darkAzure') ],
[ 'hex' : '000080', 'name' : getText('tinymce.colorpicker.navyBlue') ],
[ 'hex' : '333399', 'name' : getText('tinymce.colorpicker.indigo') ],
[ 'hex' : '333333', 'name' : getText('tinymce.colorpicker.veryDarkGray') ],
[ 'hex' : '800000', 'name' : getText('tinymce.colorpicker.maroon') ],

[ 'hex' : 'FF6600', 'name' : getText('tinymce.colorpicker.orange') ],
[ 'hex' : '808000', 'name' : getText('tinymce.colorpicker.olive') ],
[ 'hex' : '008000', 'name' : getText('tinymce.colorpicker.green') ],
[ 'hex' : '008080', 'name' : getText('tinymce.colorpicker.teal') ],
[ 'hex' : '0000FF', 'name' : getText('tinymce.colorpicker.blue') ],
[ 'hex' : '666699', 'name' : getText('tinymce.colorpicker.grayishBlue') ],
[ 'hex' : '7A869A', 'name' : getText('tinymce.colorpicker.gray') ],

[ 'hex' : 'FF0000', 'name' : getText('tinymce.colorpicker.red') ],
[ 'hex' : 'FF9900', 'name' : getText('tinymce.colorpicker.amber') ],
[ 'hex' : '99CC00', 'name' : getText('tinymce.colorpicker.yellowGreen') ],
[ 'hex' : '339966', 'name' : getText('tinymce.colorpicker.seaGreen') ],
[ 'hex' : '33CCCC', 'name' : getText('tinymce.colorpicker.turquoise') ],
[ 'hex' : '3366FF', 'name' : getText('tinymce.colorpicker.royalBlue') ],
[ 'hex' : '800080', 'name' : getText('tinymce.colorpicker.purple') ],
[ 'hex' : 'A5ADBA', 'name' : getText('tinymce.colorpicker.mediumGray') ],

[ 'hex' : 'FF00FF', 'name' : getText('tinymce.colorpicker.magenta') ],
[ 'hex' : 'FFCC00', 'name' : getText('tinymce.colorpicker.gold') ],
[ 'hex' : 'FFFF00', 'name' : getText('tinymce.colorpicker.yellow') ],
[ 'hex' : '00FF00', 'name' : getText('tinymce.colorpicker.lime') ],
[ 'hex' : '00FFFF', 'name' : getText('tinymce.colorpicker.aqua') ],
[ 'hex' : '00CCFF', 'name' : getText('tinymce.colorpicker.skyBlue') ],
[ 'hex' : '993366', 'name' : getText('tinymce.colorpicker.redViolet') ],
[ 'hex' : 'C1C7D0', 'name' : getText('tinymce.colorpicker.lightGray') ],

[ 'hex' : 'FF99CC', 'name' : getText('tinymce.colorpicker.pink') ],
[ 'hex' : 'FFCC99', 'name' : getText('tinymce.colorpicker.peach') ],
[ 'hex' : 'FFFF99', 'name' : getText('tinymce.colorpicker.lightYellow') ],
[ 'hex' : 'CCFFCC', 'name' : getText('tinymce.colorpicker.paleGreen') ],
[ 'hex' : 'CCFFFF', 'name' : getText('tinymce.colorpicker.paleCyan') ],
[ 'hex' : '99CCFF', 'name' : getText('tinymce.colorpicker.lightSkyBlue') ],
[ 'hex' : 'CC99FF', 'name' : getText('tinymce.colorpicker.plum') ],
[ 'hex' : 'FFFFFF', 'name' : getText('tinymce.colorpicker.white') ]
] /}

<a class="toolbar-trigger aui-button" href="#" id="rte-button-color" data-color="003366" data-tooltip="{getText('tinymce.colorpicker.color')}">
{call Confluence.Templates.Icons.iconSpan}
{param type: 'editor-color' /}
{param text: getText('tinymce.colorpicker.picker_title') /}
{/call}
<span class="selected-color"></span>
</a>
<div class="aui-dd-parent">
<a class="toolbar-trigger aui-dd-trigger aui-button" href="#" id="rte-button-color-selector" data-control-id="colorSelector" data-tooltip="{getText('tinymce.colorpicker.more_colors')}">
{call Confluence.Templates.Icons.iconSpan}
{param type: 'dropdown' /}
{param text: getText('tinymce.colorpicker.more_colors') /}
{/call}
</a>
<div class="color-picker-container">
<div class="color-picker aui-dropdown hidden">
<ul>
{foreach $color in $colors}
<li><a href="#" aria-label="{$color.name}" data-tooltip="{$color.name}" style="background-color: #{$color.hex}" data-color="{$color.hex}">&nbsp;</a></li>
{/foreach}
</ul>
</div>
</div>
</div>
{/template}

 

I need to add the following colors:

• Periwinkle: #ACCBF9
• Purple: #6F7BC3
• Blue: #297FD5
• Gray: #7F8FA9
• Green: #53B850
• Aqua: #00A7F0
• Orange: #FF701B

Can anyone help me format these colors correctly within the above framework?

Or point me to a more up to date article?

alternatively, if I replaced the above with the old format 'set color$' etc...would it still be recognized?

Stephen Sifers

Hello Kai,

I last verified this worked a few minor versions of Confluence ago (6.12). I was able to edit the color palette and verify it was reflected within Confluence. More about what was done then may be found in the following post: Edit font colour palette in Editor.

I would like to know a bit more into the issue you’re running into so we may recreate the problem on our end. If you could, please provide the Confluence version your running and the steps you took to extract the contents of the JAR file and how you put the JAR file back together?

We look forward to hearing to help you edit your Confluence editor color palette.

Regards,
Stephen Sifers