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
From 09:00 To 17:00 Europe/London (BST)

Please post your question in the Forum and we will get back to you as soon as we can.

  Tuesday, 20 September 2022
  3 Replies
  1.2K Visits
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?
more than a month ago
·
#111892
Thanks — we'll give this a try!
more than a month ago
·
#111890
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.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#111874
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.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!