How to customize Confluence Data Center editor's color palette
プラットフォームについて: Server および Data Center のみ。この記事は、Server および Data Center プラットフォームのアトラシアン製品にのみ適用されます。
Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Fisheye および Crucible は除く
目的
In some cases, you might like to change or edit the default Confluence editor's text color palette. Be it by limiting to certain colors only, or maybe add additional custom colors. This is how it looks like by default:
There is no simple configuration to change this, but it is still can be implemented by following the steps below.
ソリューション
本ページの内容には、Atlassian ソフトウェアのカスタマイズや拡張 (CSS ルール、HTML、JavaScript の追加/変更など) を行う手順が含まれています。アトラシアン サポートの提供 の通り、Atlassia 製品に加えられたカスタマイズはサポートされません。この資料は情報提供のみを目的として提供されています。内容はお客様自身の責任でご利用ください。
本件またはカスタマイズに関するご質問は、コミュニティの Atlassian Answers で質問してください。または、アトラシアン ソリューション パートナー にご相談いただくことをご検討ください。
We’ve released a dark theme in Confluence 9.0. The workaround below won’t work in Confluence 9.0, and all font colors on a page will default to the existing editor color palettes.
For Confluence 4.x up to Confluence 5.6.x
The following steps were tested against Confluence 4.3.3 and 5.2.3 as the time this document was written. There could be slight changes or difference in other versions.
Edit the following files
- You might either use a decent archiving tools that can auto update the ZIP/JAR files upon modification (e.g. WinRAR, 7zip in Windows, or GNOME Archiver tool in Linux), or follow How to edit files in Confluence JAR files
Modify these lines:
#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'])This site http://www.colorpicker.com/ can be handy in getting the hex color code you are looking for.
For example, this change:
#set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '817339','827B60','C9C299','C8B560','ECD672','FFE87C','ECE5B6','FFF8C6'])will change the colour picker to be like this:
- Save it.
- Clear Confluence plugins cache
For Confluence 5.7 onwards The following steps were tested against Confluence 6.15.7. There could be slight changes or difference in other versions.
Edit the following file
Confluence 5.7 以降<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/atlassian-editor-x.x.jar/templates/color-picker.soyFor Confluence 8.x<confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/com.atlassian.plugins.atlassian-editor-x.x.jar/templates/color-picker.soyLocate the following block:
{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') ] ] /}You can add and remove colours from the above array. For example if you would like to add skyBlue, just add the following into the above array.
[ 'hex' : '0770e3', 'name' : getText('tinymce.colorpicker.skyBlue') ]Please note that not all colours has their labels defined in
tinymce.colorpicker. As such, to ensure that the colours would display with the correct labels you can instead add the colour into the array with this format[ 'hex' : '0770e3', 'name' : 'skyBlue']
- Save it.