diff --git a/updatefiles/accessibility/orbit_bar/index.html.erb b/updatefiles/accessibility/orbit_bar/index.html.erb
index 9cda88b..1da36f8 100644
--- a/updatefiles/accessibility/orbit_bar/index.html.erb
+++ b/updatefiles/accessibility/orbit_bar/index.html.erb
@@ -12,7 +12,7 @@
       <div class="login-window">
         <div class="login-header">
           <label tabindex="0" for="open-orbit-login" class="close">close</label>
-          <h3><%= t(:login_orbit) %></h3>
+          <h3><%= t(:login)+' ' +((current_site.title.nil? && current_site.title.blank? && current_site.mobile_orbit_bar_title.nil? && current_site.mobile_orbit_bar_title.blank?) ? "Orbit" : [current_site.mobile_orbit_bar_title,current_site.title].select{|title| !title.nil? && !title.blank?}.first) %></h3>
         </div>
         <div class="login-body">
           <%= form_tag "/sessions?locale=#{locale.to_s}", method: "post", :class => "container" do |f| %>
@@ -47,12 +47,12 @@
       </div>
     <% end %>
     <input type="checkbox" id="open-orbit-nav" title="orbitbar">
-    <div class="orbit-bar-inner">
-      <label for="open-orbit-nav">
+    <div class="orbit-bar-inner" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_background_color};")%>>
+      <label for="open-orbit-nav" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};border-color:#{current_site.orbit_bar_text_color};")%>>
         <i class="icons-list-2"></i>
       </label>
       <h2 class="orbit-bar-title">
-        <a href="/"><%= current_site.mobile_orbit_bar_title.nil? || current_site.mobile_orbit_bar_title == "" ? "Orbit" : current_site.mobile_orbit_bar_title %></a>
+        <a href="/" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><%= (current_site.title.nil? && current_site.title.blank? && current_site.mobile_orbit_bar_title.nil? && current_site.mobile_orbit_bar_title.blank?) ? "Orbit" : [current_site.mobile_orbit_bar_title,current_site.title].select{|title| !title.nil? && !title.blank?}.first %></a>
       </h2>
       <ul class="orbit-bar-menu">
         <li>
@@ -60,21 +60,21 @@
             <img src="<%= current_site.default_image.url.nil? ? '/assets/orbit-logo.png' : current_site.default_image.url %>" alt="Orbit Bar Logo" />
           </a>
            <% if !current_user.nil? %>
-            <ul>
+            <ul class="sub_orbit_bar">
               <li>
-                <a href="/<%= locale.to_s %>/admin/dashboards">
+                <a href="/<%= locale.to_s %>/admin/dashboards" class="sub_orbit_bar_text">
                   <i class="icons-gauge"></i> <%= t(:dashboard_) %>
                 </a>
               </li>
               <li>
-                <a href="/<%= locale.to_s %>/admin/members?at=thumbnail">
+                <a href="/<%= locale.to_s %>/admin/members?at=thumbnail" class="sub_orbit_bar_text">
                   <i class="icons-users"></i> <%= t(:community_) %>
                 </a>
               </li>
               <% if current_user.is_admin? %>
                 <li class="divider"></li>
                   <li>
-                  <a href="/<%= locale.to_s %>/admin/sites" tabindex="-1">
+                  <a href="/<%= locale.to_s %>/admin/sites" tabindex="-1" class="sub_orbit_bar_text">
                     <i class="icons-cog"></i> <%= t(:settings) %>
                   </a>
                 </li>
@@ -83,7 +83,7 @@
           <% end %>
         </li>
         <li>
-          <a href="/" class="orbit-bar-home">
+          <a href="/" class="orbit-bar-home" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>>
             <i class="icons-house"></i>
           </a>
         </li>
@@ -95,8 +95,15 @@
         </li>
         <% end %>
       </ul>
-      <ul class="orbit-bar-search-sign-language">
-        <%
+      <ul class="orbit-bar-search-sign-language" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_background_color};")%>>
+        <style>
+			@media screen and (min-width:539px){
+				.orbit-bar-search-sign-language{
+					max-height:100%;
+				}
+			}
+        </style>
+		<%
           google_search_cx = current_site.search['sitesearch'] rescue nil
           is_google_seach_cx = google_search_cx =~ /^[0-9]+\:[0-9A-Za-z]+$/
           if !google_search_cx.blank? and is_google_seach_cx
@@ -116,8 +123,8 @@
               search_domain = request.host_with_port
             end
         %>
-          <li>
-            <form id="search" method="get" action="https://www.google.com/custom" target="_blank">
+          <li style="background-color:transparent;">
+            <form id="search" method="get" action="https://www.google.com/custom" target="_blank" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=border:0;")%>>
               <input type="hidden" name="client" value="pub-&amp" />
               <input type="hidden" name="ie" id="ie" value="utf-8" />
               <input type="hidden" name="oe" id="oe" value="utf-8" />
@@ -129,13 +136,13 @@
             </form>
           </li>
         <% end %>
-        <li>
+        <li style="background-color:transparent;" <%= current_user.nil? ? 'class=mobile_login_bar' : nil %>>
         <% if current_site.enable_language_options %>
           <% if @site_in_use_locales.count > 1  || current_site.enable_zh_cn %>
             <% zh_cn_added = 0 %>
             <% locale = session[:zh_cn] ? :zh_cn : I18n.locale %>
-            <a id="languagebutton" href="#" title='<%= (I18n.locale.to_s =="zh_tw") ? "按下關閉語言選單" : "click to close language menu" %>'><span id="language"><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span></a>
-            <ul>
+            <a id="languagebutton" href="#" title='<%= (I18n.locale.to_s =="zh_tw") ? "按下關閉語言選單" : "click to close language menu" %>'><span id="language" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span></a>
+            <ul <%=((current_site.orbit_bar_submenu_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_submenu_background_color};")%>>
               <% @site_in_use_locales.each do |l| %>
                 <% 
                 case l
@@ -146,12 +153,12 @@
                 end
                 %>
                 <% if l.to_s == I18n.locale.to_s and !session['zh_cn'] %>
-                  <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>">
+                  <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>>
                     <%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %>
                   </li>
                 <% else %>
                   <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>">
-                    <a accesskey="<%= accesskey %>" href="<%= switch_language(l) %>"><%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %></a>
+                    <a accesskey="<%= accesskey %>" href="<%= switch_language(l) %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>><%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %></a>
                   </li>
                 <% end %>
                 <% if current_site.enable_zh_cn and zh_cn_added == 0 and !request.path.include?("/admin/") %>
@@ -163,7 +170,7 @@
                     </li>
                   <% else %>
                     <li>
-                      <a accesskey="<%= accesskey %>" href="<%= switch_language(:zh_cn) %>"><%= t(:zh_cn, :locale => :zh_tw) %></a>
+                      <a accesskey="<%= accesskey %>" href="<%= switch_language(:zh_cn) %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>><%= t(:zh_cn, :locale => :zh_tw) %></a>
                     </li>
                   <% end %>
                 <% end %>
@@ -173,33 +180,33 @@
         <% end %>
         </li>
         <% if !current_user.nil? %>
-          <li>
-            <span id="user"><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span>
-            <ul>
-              <li><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
-              <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
+          <li style="background-color:transparent;")>
+            <span id="user" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span>
+            <ul <%=((current_site.orbit_bar_submenu_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_submenu_background_color};")%>>
+              <li ><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' , style: ((current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "color:#{current_site.orbit_bar_submenu_text_color};") %></li>
+              <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' , style: ((current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "color:#{current_site.orbit_bar_submenu_text_color};") %></li>
               <% if current_user.is_admin? &&  params[:is_frontend_view] == "true" %>
                 <li>
                   <% if params[:editmode] == "on" %>
                     <a tabindex="-1" href="<%= request.fullpath.split("?").first %>" style="color:red;"><i class="icons-bolt"></i>Edit Mode Off</a>
                   <% else %>
-                    <a tabindex="-1" href="<%= request.fullpath + "#{(request.query_parameters.empty? ? "?" : "&")}editmode=on" %>"><i class="icons-bolt"></i>Edit Mode On</a>
+                    <a tabindex="-1" href="<%= request.fullpath + "#{(request.query_parameters.empty? ? "?" : "&")}editmode=on" %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color};"%>><i class="icons-bolt"></i>Edit Mode On</a>
                   <% end %>
                 </li>
               <% end %>
               <li>
-                <a href="/logout"><i class="icons-logout"></i><%= t(:logout) %></a>
+                <a href="/logout" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color};"%>><i class="icons-logout"></i><%= t(:logout) %></a>
               </li>
             </ul>
           </li>
-		  <li style="line-height:2.5em;"> <a href="/logout" style="color:white;font-size:0.8em"><%= t(:logout) %><i class="icons-logout"></i></a></li>
+		  <li style='line-height:2.5em;background-color:transparent;'> <a href="/logout" style="color:white;font-size:0.8em"><span <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><%= t(:logout) %></span><i class="icons-logout" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : " style=color:#{current_site.orbit_bar_text_color};")%>></i></a></li>
         <% else %>
-          <li style="margin-right:-1em;">
+          <li style="margin-right:-1em;" class="mobile_login_bar">
           <a id="accesskey_login" class="sr-only" accesskey="L" href="#" title="Login">:::</a>
 		  <a id="loginbutton" href="#" title='<%= (I18n.locale.to_s =="zh_tw") ? "按下開啟登入視窗" : "click to open login window" %>'>
-            <label for="open-orbit-login">
-			  <i style="font-style: inherit;font-size: 0.8rem;width: 30px;text-align: right;vertical-align: middle;"><%= t(:login) %></i>
-			  <i class="icons-login" style="font-size: 1.4em;width: 30px;text-align: left;vertical-align: middle;"></i>
+            <label for="open-orbit-login" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>>
+			  <i style="font-style: inherit;font-size: 0.8rem;width: 2.875em;text-align: right;vertical-align: middle;"><%= t(:login) %></i>
+			  <i class="icons-login" style="font-size: 1.4em;width: 1.875em;text-align: left;vertical-align: middle;"></i>
             </label>
 		  </a>
           </li>
@@ -207,8 +214,11 @@
       </ul>
     </div>
   </div>
+  <% if(current_site.is_hidden_orbit_bar && !current_site.orbit_bar_background_color.blank? rescue false) %>
+	<div class="orbitbar-line" style="background-color:<%=current_site.orbit_bar_background_color%>;height: 0.3em;"></div>
+  <% end %>
   <style>
-	@media (max-width: 540px) {#orbit-bar ul.orbit-bar-search-sign-language > li + li{width:33.3333%;}}
+	@media (max-width: 538px) {#orbit-bar ul.orbit-bar-search-sign-language > li + li{width:33.3333%;}}
   </style>
   <% if current_user.nil?%>
 	<script>$('.orbit-bar-logo').off('click').on('click',function(){$("#open-orbit-login").click()});</script>
@@ -345,3 +355,130 @@
     set validLocales(v){return false}
   };
   </script>
+  <% if current_site.is_hidden_orbit_bar %>
+	<style>
+		.orbit-bar--active {
+			margin-top: 2.5em !important;
+		}
+		.orbit-bar--active .orbit-bar-toggle-icon {
+			-webkit-transform: rotate(-180deg);
+			transform: rotate(-180deg);
+			-webkit-transform-origin: center 0.5625em;
+			transform-origin: center 0.5625em;
+		}
+		.has-orbit-bar .orbit-bar-inner {
+			margin-top: -2.5em;
+		}
+		.has-orbit-bar .orbit-bar-inner {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+		}
+		.orbit-bar--active .orbit-bar-inner {
+			margin-top: 0;
+		}
+		body {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> margin ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> margin ease-in;
+			margin-top: 0 !important;
+		}
+		.has-orbit-bar .orbit-bar-toggle:hover {
+			background-color: <%=current_site.orbit_bar_background_color.blank? ? '#144893' : current_site.orbit_bar_background_color rescue '#144893' %>;
+			opacity: 1;
+		}
+		.has-orbit-bar .orbit-bar-toggle {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			position: absolute;
+			top: 0;
+			right: 0;
+			cursor: pointer;
+			color: <%=current_site.orbit_bar_text_color.blank? ? '#fff' : current_site.orbit_bar_text_color rescue '#fff' %>;
+			padding: 0.3125em 0.625em;
+			background-color: <%=current_site.orbit_bar_background_color.blank? ? '#144893' : current_site.orbit_bar_background_color rescue '#144893' %>;
+			opacity: 0.5;
+		}
+		.orbit-bar--active .orbit-bar-toggle {
+			opacity: 1;
+			top: 2.5em;
+		}
+	  </style>
+	  <script>
+		  var barState = window.localStorage.getItem('barState');
+		  function extendBar() {
+			  var $bar = $('#orbit-bar');
+			  var activeCls = 'orbit-bar--active';
+			  var noAnimationCls = 'orbit-bar--no-animation';
+			  var openState = 'open';
+			  var closeState = 'close';
+			  var $body = $(document.body);
+			  function createToggle() {
+				var $el = $('<div class="orbit-bar-toggle"><i class="orbit-bar-toggle-icon fa fa-chevron-down"></i></div>');
+				$el.on('click', function(e) {
+				  e.preventDefault();
+				  $body.removeClass(noAnimationCls);
+				  if (!$body.hasClass(activeCls)) {
+					$body.addClass(activeCls);
+					window.localStorage.setItem('barState', openState);
+				  } else {
+					$body.removeClass(activeCls);
+					window.localStorage.setItem('barState', closeState);
+				  }
+				  $('.orbitbar-line').slideToggle();
+				});
+				$bar.prepend($el);
+			  }
+			  $body.addClass('has-orbit-bar');
+			  $bar.find('.orbit-bar-inner').show();
+			  // check bar state from localstorage
+			  if (barState) {
+				if (barState === openState) {
+				  $body.addClass(activeCls);
+				  $body.addClass(noAnimationCls);
+
+				} else {
+				  $body.removeClass(activeCls);
+				}
+			  }
+			  createToggle();
+		  };
+		  $(document).ready(function(){
+			if($('body').attr('id') != 'sideset')
+				extendBar();
+		  })
+	  </script>
+  <% end %>
+  <style>
+	@media screen and (min-width:539px){
+		<% if(!current_site.orbit_bar_submenu_background_color.blank? rescue false)%>
+			.sub_orbit_bar{
+				background-color:<%=current_site.orbit_bar_submenu_background_color %>!important;
+			}
+			.orbit-bar-menu{
+				background-color:transparent!important;
+			}
+		<%end%>
+		<% if(!current_site.orbit_bar_submenu_text_color.blank? rescue false)%>
+			.sub_orbit_bar_text{
+				color:<%=current_site.orbit_bar_submenu_text_color%>!important;
+			}
+		<%end%>
+	}
+	@media screen and (max-width:538px){
+		<% if(!current_site.orbit_bar_background_color.blank? rescue false)%>
+			.sub_orbit_bar{
+				background-color:<%=current_site.orbit_bar_background_color%>!important;
+			}
+			.orbit-bar-menu{
+				background-color:<%=current_site.orbit_bar_background_color%>!important;
+			}
+		<%end%>
+		<% if(!current_site.orbit_bar_text_color.blank? rescue false)%>
+			.sub_orbit_bar_text{
+				color:<%=current_site.orbit_bar_text_color%>!important;
+			}
+		<%end%>
+		.mobile_login_bar{
+			width: 50%!important;
+		}
+	}
+  </style>
\ No newline at end of file
diff --git a/updatefiles/accessibility/orbit_bar/index_mobile.html.erb b/updatefiles/accessibility/orbit_bar/index_mobile.html.erb
index 17c5a6b..3562d28 100644
--- a/updatefiles/accessibility/orbit_bar/index_mobile.html.erb
+++ b/updatefiles/accessibility/orbit_bar/index_mobile.html.erb
@@ -13,7 +13,7 @@
       <div class="login-window">
         <div class="login-header">
           <label for="open-orbit-login" class="close">close</label>
-          <h3><%= t(:login_orbit) %></h3>
+          <h3><%= t(:login)+' ' +((current_site.title.nil? && current_site.title.blank? && current_site.mobile_orbit_bar_title.nil? && current_site.mobile_orbit_bar_title.blank?) ? "Orbit" : [current_site.mobile_orbit_bar_title,current_site.title].select{|title| !title.nil? && !title.blank?}.first) %></h3>
         </div>
         <div class="login-body">
           <%= form_tag "/sessions?locale=#{locale.to_s}", method: "post", :class => "container" do |f| %>
@@ -44,12 +44,12 @@
       </div>
     <% end %>
     <input type="checkbox" id="open-orbit-nav">
-    <div class="orbit-bar-inner">
-      <label for="open-orbit-nav">
+    <div class="orbit-bar-inner" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_background_color};")%>>
+      <label for="open-orbit-nav" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};border-color:#{current_site.orbit_bar_text_color};")%>>
         <i class="icons-list-2"></i>
       </label>
       <h2 class="orbit-bar-title">
-        <a href="/"><%= current_site.mobile_orbit_bar_title.nil? || current_site.mobile_orbit_bar_title == "" ? "Orbit" : current_site.mobile_orbit_bar_title %></a>
+        <a href="/" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><%= (current_site.title.nil? && current_site.title.blank? && current_site.mobile_orbit_bar_title.nil? && current_site.mobile_orbit_bar_title.blank?) ? "Orbit" : [current_site.mobile_orbit_bar_title,current_site.title].select{|title| !title.nil? && !title.blank?}.first %></a>
       </h2>
       <ul class="orbit-bar-menu">
         <li>
@@ -57,21 +57,21 @@
             <img src="<%= current_site.default_image.url.nil? ? '/assets/orbit-logo.png' : current_site.default_image.url %>" alt="Orbit Bar Logo" />
           </span>
            <% if !current_user.nil? %>
-            <ul>
+            <ul class="sub_orbit_bar">
               <li>
-                <a href="/<%= locale.to_s %>/admin/dashboards">
+                <a href="/<%= locale.to_s %>/admin/dashboards" class="sub_orbit_bar_text">
                   <i class="icons-gauge"></i> <%= t(:dashboard_) %>
                 </a>
               </li>
               <li>
-                <a href="/<%= locale.to_s %>/admin/members?at=thumbnail">
+                <a href="/<%= locale.to_s %>/admin/members?at=thumbnail" class="sub_orbit_bar_text">
                   <i class="icons-users"></i> <%= t(:community_) %>
                 </a>
               </li>
               <% if current_user.is_admin? %>
                 <li class="divider"></li>
                   <li>
-                  <a href="/<%= locale.to_s %>/admin/sites" tabindex="-1">
+                  <a href="/<%= locale.to_s %>/admin/sites" tabindex="-1" class="sub_orbit_bar_text">
                     <i class="icons-cog"></i> <%= t(:settings) %>
                   </a>
                 </li>
@@ -80,7 +80,7 @@
           <% end %>
         </li>
         <li>
-          <a href="/" class="orbit-bar-home">
+          <a href="/" class="orbit-bar-home" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>>
             <i class="icons-house"></i>
           </a>
         </li>
@@ -92,14 +92,21 @@
         </li>
         <% end %>
       </ul>
-      <ul class="orbit-bar-search-sign-language">
-        <%
+      <ul class="orbit-bar-search-sign-language" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_background_color};")%>>
+        <style>
+			@media screen and (min-width:539px){
+				.orbit-bar-search-sign-language{
+					max-height:100%;
+				}
+			}
+        </style>
+		<%
           google_search_cx = current_site.search['sitesearch'] rescue nil
           is_google_seach_cx = google_search_cx =~ /^[0-9]+\:[0-9A-Za-z]+$/
           if !google_search_cx.blank? and is_google_seach_cx
         %>
-        <li>
-          <form id="search" method="get" action="https://www.google.com/cse" target="_blank">
+        <li style="background-color:transparent;">
+          <form id="search" method="get" action="https://www.google.com/cse" target="_blank" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=border:0;")%>>
             <input type="hidden" name="cx" value="<%= google_search_cx %>">
             <%= text_field_tag 'q', '', {:type => "search", :placeholder => t("search.sitesearch"), 'x-webkit-speech' => ''} %>
           </form>
@@ -124,13 +131,13 @@
             </form>
           </li>
         <% end %>
-        <li>
+        <li style="background-color:transparent;" <%= current_user.nil? ? 'class=mobile_login_bar' : nil %>>
         <% if current_site.enable_language_options %>
           <% if @site_in_use_locales.count > 1  || current_site.enable_zh_cn %>
             <% zh_cn_added = 0 %>
             <% locale = session[:zh_cn] ? :zh_cn : I18n.locale %>
-            <span id="language"><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span>
-            <ul>
+            <span id="language" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span>
+            <ul <%=((current_site.orbit_bar_submenu_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_submenu_background_color};")%>>
               <% @site_in_use_locales.each do |l| %>
                 <% 
                 case l
@@ -141,12 +148,12 @@
                 end
                 %>
                 <% if l.to_s == I18n.locale.to_s and !session['zh_cn'] %>
-                  <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>">
+                  <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>>
                     <%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %>
                   </li>
                 <% else %>
                   <li class="<%= (l == I18n.locale and !session['zh_cn']) ? "active" : "" %>">
-                    <a accesskey="<%= accesskey %>" href="<%= switch_language(l) %>"><%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %></a>
+                    <a accesskey="<%= accesskey %>" href="<%= switch_language(l) %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>><%= t((l==:zh_tw ? :zh_tw_ : :_locale ), :locale => l) %></a>
                   </li>
                 <% end %>
                 <% if current_site.enable_zh_cn and zh_cn_added == 0 and !request.path.include?("/admin/") %>
@@ -158,7 +165,7 @@
                     </li>
                   <% else %>
                     <li>
-                      <a accesskey="<%= accesskey %>" href="<%= switch_language(:zh_cn) %>"><%= t(:zh_cn, :locale => :zh_tw) %></a>
+                      <a accesskey="<%= accesskey %>" href="<%= switch_language(:zh_cn) %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color}!important;"%>><%= t(:zh_cn, :locale => :zh_tw) %></a>
                     </li>
                   <% end %>
                 <% end %>
@@ -168,32 +175,32 @@
         <% end %>
         </li>
         <% if !current_user.nil? %>
-          <li>
-            <span id="user" style="float:left;"><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span>
-			<span style="vertical-align: -webkit-baseline-middle;"><a href="/logout" style="color:white;"><i style="vertical-align:middle;font-style: inherit;"><%= t(:logout) %></i><i class="icons-logout" style="vertical-align:middle;"></i></a></span>
+          <li style="background-color:transparent;">
+            <span id="user" style="float:left; <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : 'color:'+current_site.orbit_bar_text_color+';')%>"><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span>
+			<span style="vertical-align: -webkit-baseline-middle;"><a href="/logout" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><i style="vertical-align:middle;font-style: inherit;"><%= t(:logout) %></i><i class="icons-logout" style="vertical-align:middle;"></i></a></span>
             <ul>
-              <li><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
-              <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
+              <li><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' , style: ((current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "color:#{current_site.orbit_bar_submenu_text_color};") %></li>
+              <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' , style: ((current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "color:#{current_site.orbit_bar_submenu_text_color};") %></li>
               <% if current_user.is_admin? &&  params[:is_frontend_view] == "true" %>
                 <li>
                   <% if params[:editmode] == "on" %>
                     <a tabindex="-1" href="<%= request.fullpath.split("?").first %>" style="color:red;"><i class="icons-bolt"></i>Edit Mode Off</a>
                   <% else %>
-                    <a tabindex="-1" href="<%= request.fullpath + "#{(request.query_parameters.empty? ? "?" : "&")}editmode=on" %>"><i class="icons-bolt"></i>Edit Mode On</a>
+                    <a tabindex="-1" href="<%= request.fullpath + "#{(request.query_parameters.empty? ? "?" : "&")}editmode=on" %>" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color};"%>><i class="icons-bolt"></i>Edit Mode On</a>
                   <% end %>
                 </li>
               <% end %>
               <li>
-                <a href="/logout"><i class="icons-logout"></i><%= t(:logout) %></a>
+                <a href="/logout" <%=(current_site.orbit_bar_submenu_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_submenu_text_color};"%>><i class="icons-logout"></i><%= t(:logout) %></a>
               </li>
             </ul>
           </li>
         <% else %>
-          <li>
+          <li class="mobile_login_bar">
           <a id="accesskey_login" class="sr-only" accesskey="L" href="/<%= "#{locale.to_s}" %>/accesskey" title="Login">:::</a>
-            <label for="open-orbit-login">
-              <i style="font-style: inherit;font-size: 0.8rem;width: 30px;text-align: right;vertical-align: middle;"><%= t(:login) %></i>
-			  <i class="icons-login" style="font-size: 1.4em;width: 30px;text-align: left;vertical-align: middle;"></i>
+            <label for="open-orbit-login" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>>
+              <i style="font-style: inherit;font-size: 0.8rem;width: 2.875em;text-align: right;vertical-align: middle;"><%= t(:login) %></i>
+			  <i class="icons-login" style="font-size: 1.4em;width: 1.875em;text-align: left;vertical-align: middle;"></i>
             </label>
           </li>
         <% end %>
@@ -201,13 +208,13 @@
 
 
 
-      <ul class="orbit-bar-mobile-sign-language">
+      <ul class="orbit-bar-mobile-sign-language" <%=((current_site.orbit_bar_background_color.blank? rescue true) ? nil : "style=background-color:#{current_site.orbit_bar_background_color};")%>>
         <li>
         <% if current_site.enable_language_options %>
           <% if @site_in_use_locales.count > 1  || current_site.enable_zh_cn %>
             <% zh_cn_added = 0 %>
             <% locale = session[:zh_cn] ? :zh_cn : I18n.locale %>
-            <span id="language" class="mobile-button"><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span>
+            <span id="language" class="mobile-button" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><i class="icons-earth orbit-bar-language-icon"></i><span class="orbit-bar-language-text">Language</span></span>
             <ul>
               <% @site_in_use_locales.each do |l| %>
                 <% 
@@ -247,7 +254,7 @@
         </li>
         <% if !current_user.nil? %>
           <li>
-            <span id="user" class="mobile-button"><i class="icons-user"></i><span><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span></span>
+            <span id="user" class="mobile-button" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>><i class="icons-user"></i><span><%= current_user.member_profile.name.nil? ? current_user.user_name : current_user.member_profile.name %></span></span>
             <ul>
               <li><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
               <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
@@ -268,7 +275,7 @@
         <% else %>
           <li>
           <a id="accesskey_login" class="sr-only" accesskey="L" href="/<%= "#{locale.to_s}" %>/accesskey" title="Login">:::</a>
-            <label for="open-orbit-login">
+            <label for="open-orbit-login" <%=((current_site.orbit_bar_text_color.blank? rescue true) ? nil : "style=color:#{current_site.orbit_bar_text_color};")%>>
               <i class="icons-login"></i>
             </label>
           </li>
@@ -279,6 +286,9 @@
 
     </div>
   </div>
+  <% if(current_site.is_hidden_orbit_bar && !current_site.orbit_bar_background_color.blank? rescue false) %>
+	<div class="orbitbar-line" style="background-color:<%=current_site.orbit_bar_background_color%>;height: 0.3em;"></div>
+  <% end %>
   <script type="text/javascript">
   $("#open-orbit-login").on("change",function(){
     if($(this).is(":checked")){
@@ -338,4 +348,130 @@
       $(this).siblings($('.nav-list')).slideDown();
     })
   </script>
-  
+  <% if current_site.is_hidden_orbit_bar %>
+	<style>
+		.orbit-bar--active {
+			margin-top: 2.5em !important;
+		}
+		.orbit-bar--active .orbit-bar-toggle-icon {
+			-webkit-transform: rotate(-180deg);
+			transform: rotate(-180deg);
+			-webkit-transform-origin: center 0.5625em;
+			transform-origin: center 0.5625em;
+		}
+		.has-orbit-bar .orbit-bar-inner {
+			margin-top: -2.5em;
+		}
+		.has-orbit-bar .orbit-bar-inner {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+		}
+		.orbit-bar--active .orbit-bar-inner {
+			margin-top: 0;
+		}
+		body {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> margin ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> margin ease-in;
+			margin-top: 0 !important;
+		}
+		.has-orbit-bar .orbit-bar-toggle:hover {
+			background-color: <%=current_site.orbit_bar_background_color.blank? ? '#144893' : current_site.orbit_bar_background_color rescue '#144893' %>;
+			opacity: 1;
+		}
+		.has-orbit-bar .orbit-bar-toggle {
+			-webkit-transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			transition: <%=current_site.orbit_bar_animation_time.blank? ? '0.3s' : current_site.orbit_bar_animation_time rescue '0.3s' %> all ease-in;
+			position: absolute;
+			top: 0;
+			right: 0;
+			cursor: pointer;
+			color: <%=current_site.orbit_bar_text_color.blank? ? '#fff' : current_site.orbit_bar_text_color rescue '#fff' %>;
+			padding: 0.3125em 0.625em;
+			background-color: <%=current_site.orbit_bar_background_color.blank? ? '#144893' : current_site.orbit_bar_background_color rescue '#144893' %>;
+			opacity: 0.5;
+		}
+		.orbit-bar--active .orbit-bar-toggle {
+			opacity: 1;
+			top: 2.5em;
+		}
+	  </style>
+	  <script>
+		  var barState = window.localStorage.getItem('barState');
+		  function extendBar() {
+			  var $bar = $('#orbit-bar');
+			  var activeCls = 'orbit-bar--active';
+			  var noAnimationCls = 'orbit-bar--no-animation';
+			  var openState = 'open';
+			  var closeState = 'close';
+			  var $body = $(document.body);
+			  function createToggle() {
+				var $el = $('<div class="orbit-bar-toggle"><i class="orbit-bar-toggle-icon fa fa-chevron-down"></i></div>');
+				$el.on('click', function(e) {
+				  e.preventDefault();
+				  $body.removeClass(noAnimationCls);
+				  if (!$body.hasClass(activeCls)) {
+					$body.addClass(activeCls);
+					window.localStorage.setItem('barState', openState);
+				  } else {
+					$body.removeClass(activeCls);
+					window.localStorage.setItem('barState', closeState);
+				  }
+				  $('.orbitbar-line').slideToggle();
+				});
+				$bar.prepend($el);
+			  }
+			  $body.addClass('has-orbit-bar');
+			  $bar.find('.orbit-bar-inner').show();
+			  // check bar state from localstorage
+			  if (barState) {
+				if (barState === openState) {
+				  $body.addClass(activeCls);
+				  $body.addClass(noAnimationCls);
+
+				} else {
+				  $body.removeClass(activeCls);
+				}
+			  }
+			  createToggle();
+		  };
+		  $(document).ready(function(){
+			if($('body').attr('id') != 'sideset')
+				extendBar();
+		  })
+	  </script>
+  <% end %>
+  <style>
+	@media screen and (min-width:539px){
+		<% if(!current_site.orbit_bar_submenu_background_color.blank? rescue false)%>
+			.sub_orbit_bar{
+				background-color:<%=current_site.orbit_bar_submenu_background_color %>!important;
+			}
+			.orbit-bar-menu{
+				background-color:transparent!important;
+			}
+		<%end%>
+		<% if(!current_site.orbit_bar_submenu_text_color.blank? rescue false)%>
+			.sub_orbit_bar_text{
+				color:<%=current_site.orbit_bar_submenu_text_color%>!important;
+			}
+		<%end%>
+	}
+	@media screen and (max-width:538px){
+		<% if(!current_site.orbit_bar_background_color.blank? rescue false)%>
+			.sub_orbit_bar{
+				background-color:<%=current_site.orbit_bar_background_color%>!important;
+			}
+			.orbit-bar-menu{
+				background-color:<%=current_site.orbit_bar_background_color%>!important;
+			}
+		<%end%>
+		<% if(!current_site.orbit_bar_text_color.blank? rescue false)%>
+			.sub_orbit_bar_text{
+				color:<%=current_site.orbit_bar_text_color%>!important;
+			}
+		<%end%>
+		.mobile_login_bar{
+			width: 50%!important;
+		}
+	}
+  </style>