{"_id":"54d5635732d98b0d00384b1c","user":"54cfa8e1a8a4fd0d00b7fd1d","__v":28,"parentDoc":null,"version":{"_id":"54d5635532d98b0d00384afb","project":"54d53c7b23010a0d001aca0c","__v":10,"forked_from":"54d53c7c23010a0d001aca0f","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"category":{"_id":"54d5635632d98b0d00384afc","__v":5,"pages":["54d5635732d98b0d00384b18","54d5635732d98b0d00384b19","54d5635732d98b0d00384b1a","54d5635732d98b0d00384b1b","54d5635732d98b0d00384b1c","54d5635732d98b0d00384b1d","54d5635732d98b0d00384b1e","54d5635732d98b0d00384b1f","54d5689d7e05890d006f14ea","54d8243a0100e20d00ddd57b","5516e49f5a2a4f1700d4f5f8","552d5437d048dd0d00f36e68"],"version":"54d5635532d98b0d00384afb","project":"54d53c7b23010a0d001aca0c","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-06T23:43:10.191Z","from_sync":false,"order":0,"slug":"getting-started","title":"Getting Started"},"project":"54d53c7b23010a0d001aca0c","updates":["55704cbfcc189a21001ab2db","57d9bbd393b2390e008c11d4"],"next":{"pages":[],"description":""},"createdAt":"2015-02-06T23:50:26.335Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"To customize a setting, change the theme, customize your key bindings or manage packages open the Preference pane by pressing `Command-,` on a mac or `Ctrl-,` on windows and linux.\n\n# Changing the Theme\n\n## Syntax Theme\n\nCloud9 comes with a set of pre-installed syntax themes that you can select from the `View/Themes` menu. You can install additional themes via packages and you are encouraged to [create your own syntax themes](doc:themes) or to [import textmate themes](doc:import-a-textmate-theme).\n\n## Cloud9 Theme\n\nIn addition to the syntax themes, the Cloud9 themes let you configure the styling of the rest of Cloud9. By default there is a Classic Theme and a Flat Theme. You can pick between them via the theme section in the Preference pane. For more information on creating your own theme, check out [this guide](doc:creating-a-theme).\n\n# Installing Packages\n\nDuring the *alpha* of the SDK the only way to install packages is using the init script feature. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"_ Cloud9 plugins have **full access to your Cloud9 account**, and therefore to everything you can access from Cloud9, so you should only install plugins from sources you trust. In other words, it is your responsibility to personally inspect each plugin you install for suspicious or unexpected activity._\",\n  \"title\": \"IMPORTANT!\"\n}\n[/block]\nTo load a plugin open your *Init Script* from `Cloud9 > Open Your Init Script menu.`\nand use `pluginManager` service to load plugin from the cdn.\n\n```\n// check that this is the workspace you want to use\nif (services.c9.workspaceId.match(\"{username}/{workspacename}\")) {\n    // call plugin manager with a list of plugins you want to load\n    // this takes either url, or a path on your vm\n    services.pluginManager.loadPackage([\n        \"https://cdn.url/pluginName1/package.pluginName1.js\", \n        \"~/.c9/plugins/pluginName2/c9build/package.pluginName2.js\" \n    ])\n}\n```\n\nsee also https://community.c9.io/t/distributing-and-installing-custom-cloud9-plugins/15168\n\n\n# Customizing Key Bindings\n\nCloud9 key bindings can be configured both via a GUI in the Preference pane or by editing your keymap file. Using the GUI is easy when you want to quickly change a key binding:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/OW9w8wFSXWBZcIWsrQOZ_keybindings.png\",\n        \"keybindings.png\",\n        \"1584\",\n        \"1364\",\n        \"#59aaf9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAlternatively you can open the keymap file via the `Cloud9/Open Your Keymap` menu item. Your keymap file is a json file that lists the commands for which you set the key binding and what it is for which platform:\n\n```\n// Edit this keymap file and save to apply.\n[\n    { \"command\": \"clonetab\", \"keys\": [\"Cmd-Alt-Shift-C\"] }\n]\n```\n\nWhen you save the keymap file your key bindings are immediately active.\n\nIn addition you can choose a different keyboard mode. Many users that come from other editors such as VI or Emacs will be happy to note that we support the key bindings they are used to. We support keyboard modes for the following editors:\n\n- VI\n- Emacs\n- Sublime Text\n\n# Preferences and Settings\n\nCloud9 recognizes that some of your preferences should be applied to any workspace that you work in, while others are only applicable to that specific workspace. That's why we split up the settings in project settings and users settings and gave each it's own section within the Preference pane.\n\n## Project Settings\n\nProject settings contain settings that belong to a specific workspace such as the tab width and the run configurations. These settings are saved in the project dir under .c9/project.settings. You can easily edit these settings either by directly editing the file via the `Cloud9/Open Your Project Settings` menu or via the GUI in the Preference Pane:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/A3BvzwQuGLNZureakmOg_Screen%20Shot%202015-02-08%20at%208.44.52%20PM.png\",\n        \"Screen Shot 2015-02-08 at 8.44.52 PM.png\",\n        \"1656\",\n        \"1572\",\n        \"#64acfc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## User Settings\n\nUser preferences are saved in the database and are loaded for each workspace that work in - both your own and those you are invited to. The user preferences allow you to customize Cloud9 completely. Similar to the project settings we allow you to edit the user settings as a file via the `Cloud9/Open Your User Settings` menu as well as via the GUI:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/GkgAhB8yTAyVejhDiiXk_Screen%20Shot%202015-02-08%20at%208.51.52%20PM.png\",\n        \"Screen Shot 2015-02-08 at 8.51.52 PM.png\",\n        \"1418\",\n        \"1046\",\n        \"#66a9f3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Quick Personal Hacks\n\n## Init Script\n\nThe init script is executed after all other plugins have loaded. This gives you a chance to customize Cloud9. Similar to the user settings, the init script will be run in each workspace that you visit. If the customizations become extensive, consider [creating a package](doc:create-a-package).\n\nYou can edit this 'file' via the `Cloud9/Open Your Init Script` menu.\n\nThe loaded plugins are available via the `services` variable in the script. For instance if you wish to always have a welcome message greet you when you open a workspace, add the following code to your init script:\n\n```\nservices[\"dialog.alert\"].show(\"Welcome!\", \n    \"Welcome to Cloud9\", \n    \"I hope you have a great day today!\");\n```\n\nWhich displays a dialog like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/a83mO1cUQ4SHHGJpbELg_Screen%20Shot%202015-02-08%20at%209.03.02%20PM.png\",\n        \"Screen Shot 2015-02-08 at 9.03.02 PM.png\",\n        \"562\",\n        \"231\",\n        \"#797978\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Stylesheet\n\nIf you want to customize the look of the UI without creating your own theme, use the stylesheet. Add any CSS here and save it to see the changes immediately reflected in the UI. Similar to the init script, this file will be loaded for each of your workspaces as well.\n\nYou can edit this 'file' via the `Cloud9/Open Your Stylesheet` menu.","excerpt":"","slug":"customizing-cloud9","type":"basic","title":"Customizing Cloud9"}

Customizing Cloud9


To customize a setting, change the theme, customize your key bindings or manage packages open the Preference pane by pressing `Command-,` on a mac or `Ctrl-,` on windows and linux. # Changing the Theme ## Syntax Theme Cloud9 comes with a set of pre-installed syntax themes that you can select from the `View/Themes` menu. You can install additional themes via packages and you are encouraged to [create your own syntax themes](doc:themes) or to [import textmate themes](doc:import-a-textmate-theme). ## Cloud9 Theme In addition to the syntax themes, the Cloud9 themes let you configure the styling of the rest of Cloud9. By default there is a Classic Theme and a Flat Theme. You can pick between them via the theme section in the Preference pane. For more information on creating your own theme, check out [this guide](doc:creating-a-theme). # Installing Packages During the *alpha* of the SDK the only way to install packages is using the init script feature. [block:callout] { "type": "info", "body": "_ Cloud9 plugins have **full access to your Cloud9 account**, and therefore to everything you can access from Cloud9, so you should only install plugins from sources you trust. In other words, it is your responsibility to personally inspect each plugin you install for suspicious or unexpected activity._", "title": "IMPORTANT!" } [/block] To load a plugin open your *Init Script* from `Cloud9 > Open Your Init Script menu.` and use `pluginManager` service to load plugin from the cdn. ``` // check that this is the workspace you want to use if (services.c9.workspaceId.match("{username}/{workspacename}")) { // call plugin manager with a list of plugins you want to load // this takes either url, or a path on your vm services.pluginManager.loadPackage([ "https://cdn.url/pluginName1/package.pluginName1.js", "~/.c9/plugins/pluginName2/c9build/package.pluginName2.js" ]) } ``` see also https://community.c9.io/t/distributing-and-installing-custom-cloud9-plugins/15168 # Customizing Key Bindings Cloud9 key bindings can be configured both via a GUI in the Preference pane or by editing your keymap file. Using the GUI is easy when you want to quickly change a key binding: [block:image] { "images": [ { "image": [ "https://files.readme.io/OW9w8wFSXWBZcIWsrQOZ_keybindings.png", "keybindings.png", "1584", "1364", "#59aaf9", "" ] } ] } [/block] Alternatively you can open the keymap file via the `Cloud9/Open Your Keymap` menu item. Your keymap file is a json file that lists the commands for which you set the key binding and what it is for which platform: ``` // Edit this keymap file and save to apply. [ { "command": "clonetab", "keys": ["Cmd-Alt-Shift-C"] } ] ``` When you save the keymap file your key bindings are immediately active. In addition you can choose a different keyboard mode. Many users that come from other editors such as VI or Emacs will be happy to note that we support the key bindings they are used to. We support keyboard modes for the following editors: - VI - Emacs - Sublime Text # Preferences and Settings Cloud9 recognizes that some of your preferences should be applied to any workspace that you work in, while others are only applicable to that specific workspace. That's why we split up the settings in project settings and users settings and gave each it's own section within the Preference pane. ## Project Settings Project settings contain settings that belong to a specific workspace such as the tab width and the run configurations. These settings are saved in the project dir under .c9/project.settings. You can easily edit these settings either by directly editing the file via the `Cloud9/Open Your Project Settings` menu or via the GUI in the Preference Pane: [block:image] { "images": [ { "image": [ "https://files.readme.io/A3BvzwQuGLNZureakmOg_Screen%20Shot%202015-02-08%20at%208.44.52%20PM.png", "Screen Shot 2015-02-08 at 8.44.52 PM.png", "1656", "1572", "#64acfc", "" ] } ] } [/block] ## User Settings User preferences are saved in the database and are loaded for each workspace that work in - both your own and those you are invited to. The user preferences allow you to customize Cloud9 completely. Similar to the project settings we allow you to edit the user settings as a file via the `Cloud9/Open Your User Settings` menu as well as via the GUI: [block:image] { "images": [ { "image": [ "https://files.readme.io/GkgAhB8yTAyVejhDiiXk_Screen%20Shot%202015-02-08%20at%208.51.52%20PM.png", "Screen Shot 2015-02-08 at 8.51.52 PM.png", "1418", "1046", "#66a9f3", "" ] } ] } [/block] # Quick Personal Hacks ## Init Script The init script is executed after all other plugins have loaded. This gives you a chance to customize Cloud9. Similar to the user settings, the init script will be run in each workspace that you visit. If the customizations become extensive, consider [creating a package](doc:create-a-package). You can edit this 'file' via the `Cloud9/Open Your Init Script` menu. The loaded plugins are available via the `services` variable in the script. For instance if you wish to always have a welcome message greet you when you open a workspace, add the following code to your init script: ``` services["dialog.alert"].show("Welcome!", "Welcome to Cloud9", "I hope you have a great day today!"); ``` Which displays a dialog like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/a83mO1cUQ4SHHGJpbELg_Screen%20Shot%202015-02-08%20at%209.03.02%20PM.png", "Screen Shot 2015-02-08 at 9.03.02 PM.png", "562", "231", "#797978", "" ] } ] } [/block] ## Stylesheet If you want to customize the look of the UI without creating your own theme, use the stylesheet. Add any CSS here and save it to see the changes immediately reflected in the UI. Similar to the init script, this file will be loaded for each of your workspaces as well. You can edit this 'file' via the `Cloud9/Open Your Stylesheet` menu.