title: How can I change the tree's color?
body: <p>Well, I "created" a little tree with two parents and three children using <a href="http://mbraak.github.io/jqTree/#general" rel="nofollow">JqTree</a>, and now I would like to change the properties of it, such as color, border and so on, but I do not want to change the library. Can you help me?</p>
  
  <p>Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ExampleData = {};
  
  ExampleData.data = [{
    label: 'node1',
    id: 1,
    children: [{
      label: 'child1',
      id: 2
    }, {
      label: 'child2',
      id: 3
    }]
  }, {
    label: 'node2',
    id: 4,
    children: [{
      label: 'child3',
      id: 5
    }]
  }];
  
  ExampleData.getFirstLevelData = function(nodes) {
    if (!nodes) {
      nodes = ExampleData.example_data;
    }
  
    var data = [];
  
    $.each(nodes, function() {
      var node = {
        label: this.label,
        id: this.id
      };
  
      if (this.children) {
        node.load_on_demand = true;
      }
  
      data.push(node);
    });
  
    return data;
  }
  
  ExampleData.getChildrenOfNode = function(node_id) {
    var result = null;
  
    function iterate(nodes) {
      $.each(nodes, function() {
        if (result) {
          return;
        } else {
          if (this.id == node_id) {
            result = this;
          }
  
          if (this.children) {
            iterate(this.children);
          }
        }
      });
    }
  
    iterate(ExampleData.example_data);
  
    return ExampleData.getFirstLevelData(result.children);
  }
  
  $('#tree1').tree({
    data: ExampleData.data,
    autoOpen: false,
    dragAndDrop: true
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  #navdata {
  
      width: auto;
  
      height: auto;
  
      flex: 1;
  
      padding-bottom: 1px;
  
    }
  
    #navgrid {
  
      width: 50%;
  
      height: 200px;
  
      overflow-x: visible;
  
      overflow-y: scroll;
  
      border: solid 1px #79B7E7;
  
      background-color: #DDEBF7;
  
    }
  
    #header {
  
      background-color: #79B7E7;
  
      width: 100%;
  
      text-align: center;
  
      border: 1px solid white;
  
    }
  
    #tree {
  
      background-color: #FF0000;
  
    }
  
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
    
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="navgrid"&gt;
      &lt;div id="header"&gt;Header&lt;/div&gt;
      &lt;div id="tree1"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>