HOWTO: Custom css and html of OpneNebula Sunstone.

You might to want to recognize which is environment of production and development if you have. In that case, you want to change html and css.

change background color

If you want to change background color , you can modify css file '/usr/lib/one/sunstone/public/css/custom.css' of line 26.

20 body{
 21         padding:0;margin:0;
 22         font-family:"Lato","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
 23         font-weight:300;
 24         line-height:1.5;
 25         color:#0a0a0a;
 26         background:#dcdcdc;
 27 }

change html

For example , you want to set footer bar, you change html file '/usr/lib/one/sunstone/views/index.erb' of line 109 to 111 .

   109      <div style="position: fixed; bottom: 0px; width: 100%; height: 1.3em; line-height: 1.3em; z-index: 9999; background-color: red; text-align: center; font-weight:  bold; font-size: 1.3em; color: white;">
   110      This page is development env of OpenNebula.
   111      </div>
   112  
   113  
   114      <% if $conf[:env] == 'dev' %>
   115        <script src="bower_components/requirejs/require.js" data-main="app/main"></script>
   116      <% else %>
   117        <script src="dist/main.js?v=<%= OpenNebula::VERSION %>"></script>
   118      <% end %>
   119    </body>
   120  </html>

It looks like this.

I hope you helpful :)