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
- Forum
- JCE Editor
- Customize Code Editor Theme
Support is currently Offline
Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
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.
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?
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) :
You can also edit and override any other selected theme by including the styles in the codemirror.css file.
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.
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!
Be one of the first to reply to this post!