I'm not a big fan of the themes in Code Editor and would like to create my own custom theme (Sublime has some great ones). Whats the best way to creat my own custom theme so it doesn't get overwritten with updates to JCE?
You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
Support is currently Offline
Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)
09:00 - 17:00 Europe/London (BST)
Please create a new Ticket and we will get back to you as soon as we can.
#111872 Customize Code Editor Theme
Posted in ‘Editor’
This is a public ticket
Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Latest post by dagroupinc on Friday, 23 September 2022 15:25 BST
Tuesday, 20 September 2022 17:56 BST
dagroupinc
Wednesday, 21 September 2022 11:37 BST
Ryan
There isn't currently a way to use a custom theme without modifying the existing themes (you can choose from a small selection in Editor Profiles -> Plugin Parameters -> Code Editor), but I will add an override option in the next update, where you can add a theme.css file to a media/jce/css/codemirror/ folder to use instead of the selected theme.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 23 September 2022 09:42 BST
Ryan
Please try JCE Pro 2.9.31 Beta 2 - https://www.joomlacontenteditor.net/downloads/editor/pro/development
You can now select a "Custom" option in the Code Editor Theme, and then use a codemirror.css file in media/jce/css/ to set the custom theme, for example, a theme based on Eclipse (not the use of the "cm-s-custom" selector to coincide with the "Custom" theme selection) :
.cm-s-custom span.cm-meta {color: #FF1717;}
.cm-s-custom span.cm-keyword { font-weight: bold; color: #7F0055; }
.cm-s-custom span.cm-atom {color: #219;}
.cm-s-custom span.cm-number {color: #164;}
.cm-s-custom span.cm-def {color: #00f;}
.cm-s-custom span.cm-variable {color: black;}
.cm-s-custom span.cm-variable-2 {color: #0000C0;}
.cm-s-custom span.cm-variable-3 {color: #0000C0;}
.cm-s-custom span.cm-property {color: black;}
.cm-s-custom span.cm-operator {color: black;}
.cm-s-custom span.cm-comment {color: #3F7F5F;}
.cm-s-custom span.cm-string {color: #2A00FF;}
.cm-s-custom span.cm-string-2 {color: #f50;}
.cm-s-custom span.cm-error {color: #f00;}
.cm-s-custom span.cm-qualifier {color: #555;}
.cm-s-custom span.cm-builtin {color: #30a;}
.cm-s-custom span.cm-bracket {color: #cc7;}
.cm-s-custom span.cm-tag {color: #170;}
.cm-s-custom span.cm-attribute {color: #00c;}
.CodeMirror-matchingbracket{
border:1px solid gray;
color:black !important;;
}
.cm-s-custom .CodeMirror-activeline-background {
background: none repeat scroll 0 0 #e8f2ff !important;
}
.cm-s-custom .cm-matchhighlight { background: #e9e9e9 }
.cm-s-custom .cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
You can also edit and override any other selected theme by including the styles in the codemirror.css file. Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 23 September 2022 15:25 BST
dagroupinc
Thanks — we'll give this a try!
Please wait
Your post is being submitted…