Re: [orion-dev] Orion Theming

[Silenio Quarti <Silenio_Quarti@xxxxxxxxxx>]

Looks good.

The injecting of style sheets is more
or less what this simple demo is doing as well. 

https://orion.eclipse.org/examples/textview/demo.html

Orion has a nice Settings page with
more canned themes. Check it out.

Please open a bugzilla if you would
like to contribute more themes to the orion editor.  Thanks! 

Silenio



From:      
 lamine <laminba2003@xxxxxxxx>
To:      
 Silenio Quarti/Ottawa/IBM@IBMCA,
"orion-dev@xxxxxxxxxxx" <orion-dev@xxxxxxxxxxx>, 
Cc:      
 me <laminba2003@xxxxxxxx>
Date:      
 11/14/2012 05:49 PM
Subject:    
   Orion Theming

---

Hi Selenio, 

Using your documentation, I have successfully created several themes for
the Eclipse Orion Editor and they are derived from the CodeMirror ones.
Follow the link below, open the editor.js file, click on the config button
and play around the themeClass option.

1) http://youcontrol.lamine.cloudbees.net/faces/admin/editors/edit.xhtml?id=Orion

After you can see how things are working by looking at the bottom of this
file . You will see these settings :

settings:{

themeClass:["default","dark","orion","rubyblue","elegant",
           "lesser-dark","ambiance","blackboard","monokai","neat"],
.....
}

and the default configuration is :

config:{

themeClass:"default"

}

The css files are loaded on demand via the injected loadStyle method :

tab.setConfig=function(key,value){

if(key=='themeClass') Orion.loadStyle(value+".css");
var options={};
options[key]=value;
editor.getTextView().setOptions(options);

      }
};

You can perform a right click on the css folder + a click on the download
item to get a zip file of the themes. And also, one thing that might be
interesting would be to have an Orion web theme generator.

Thanks
Lamine

-----------------------------------------------------------------------------------------------------------------------------------------

Currently, the way we expect the font, color, background and a few other
properties to change is by providing a style sheet and by setting the themeClass
option of the text view. Sorry, the documentation in this area is not very
clear yet.  The basic API (which should not change) are the CSS class
names defined in textview.css These are: 

textViewContainer     -> the whole editor including rulers
and text area. 
textview                  
      -> the scrollable portion of the editor 
textviewContent         -> the contents of the editor
- text area inside of scrollable area 
textviewLeftRuler       -> left rulers area 
textviewRightRuler    -> right rulers area 


Take a look at "examples/textview/themes/orion.css" for an example:

----------------------------------- 
.orion { 
        color: black; 
} 

.orion .textview { 
        background-color: #ffd400; 
} 

.... 
----------------------------------- 

This style sheet specifies the ".orion .textview" selector which
overwrites the background color of the scrollable area of the editor.  The
style sheet is used by setting the themeClass option as follows: 

textview.setOptions({themeClass: "orion"}); 


Silenio