diff --git a/js/main_custom_color.js b/js/main_custom_color.js
new file mode 100644
index 000000000..eacc5b793
--- /dev/null
+++ b/js/main_custom_color.js
@@ -0,0 +1,28 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * for main custom color 
+ *
+ */
+$(document).ready(function() {
+    $('#li_custom_color').show();
+    // Choosing another id does not work! 
+    $('#colorSelector').ColorPicker({
+        color: '#0000ff',
+        onShow: function (colpkr) {
+            $(colpkr).fadeIn(500);
+            return false;
+        },
+        onHide: function (colpkr) {
+            $(colpkr).fadeOut(500);
+            return false;
+        },
+        onChange: function(hsb, hex, rgb) {
+            top.frame_content.document.body.style.backgroundColor = '#' + hex;
+            top.frame_navigation.document.body.style.backgroundColor = '#' + hex;
+        },
+        onSubmit: function(hsb, hex, rgb) {
+            $('#custom_color').val('#' + hex);
+            $('#colorform').submit();
+        }
+    });
+});
diff --git a/main.php b/main.php
index 8c65bc588..f942b4015 100644
--- a/main.php
+++ b/main.php
@@ -14,6 +14,7 @@ require_once './libraries/common.inc.php';
 
 $GLOBALS['js_include'][] = 'jquery/jquery-1.4.2-min.js';
 $GLOBALS['js_include'][] = 'colorpicker/js/colorpicker.js';
+$GLOBALS['js_include'][] = 'main_custom_color.js';
 
 // Handles some variables that may have been sent by the calling script
 $GLOBALS['db'] = '';
@@ -153,45 +154,18 @@ if ($GLOBALS['cfg']['ThemeManager']) {
     echo '<li id="li_select_theme">';
     echo $_SESSION['PMA_Theme_Manager']->getHtmlSelectBox();
     echo '</li>';
-?>
-    <script type="text/javascript">
-    //<![CDATA[
-    document.write('<li id="li_custom_color">');
-    document.write('<?php echo PMA_escapeJsString($strCustomColor) . ': '; ?>');
-    document.write('<form name="colorform" id="colorform" method="post" action="index.php" target="_parent">');
-    document.write('<?php echo PMA_generate_common_hidden_inputs(); ?>');
-    document.write('<input type="hidden" id="custom_color" name="custom_color" value="" />');
-    document.write('<input type="submit" name="custom_color_reset" value="<?php echo $strReset; ?>" />');
-    document.write('</form>');
-    document.write('<div id="colorSelector">');
-    document.write('</div>');
-    document.write('</li>');
 
-    $(document).ready(function() {
-        // Choosing another id does not work! 
-        $('#colorSelector').ColorPicker({
-            color: '#0000ff',
-            onShow: function (colpkr) {
-                $(colpkr).fadeIn(500);
-                return false;
-            },
-            onHide: function (colpkr) {
-                $(colpkr).fadeOut(500);
-                return false;
-            },
-            onChange: function(hsb, hex, rgb) {
-                top.frame_content.document.body.style.backgroundColor = '#' + hex;
-                top.frame_navigation.document.body.style.backgroundColor = '#' + hex;
-            },
-            onSubmit: function(hsb, hex, rgb) {
-                $('#custom_color').val('#' + hex);
-                $('#colorform').submit();
-            }
-        });
-    });
-    //]]>
-    </script>
-    <?php
+    // see js/main_custom_color.js
+    echo '<li id="li_custom_color" class="hide">';
+    echo PMA_escapeJsString($strCustomColor) . ': ';
+    echo '<form name="colorform" id="colorform" method="post" action="index.php" target="_parent">';
+    echo PMA_generate_common_hidden_inputs();
+    echo '<input type="hidden" id="custom_color" name="custom_color" value="" />';
+    echo '<input type="submit" name="custom_color_reset" value="' . $strReset . '" />';
+    echo '</form>';
+    echo '<div id="colorSelector">';
+    echo '</div>';
+    echo '</li>';
 }
 echo '<li id="li_select_fontsize">';
 echo PMA_Config::getFontsizeForm();
diff --git a/themes/darkblue_orange/css/theme_right.css.php b/themes/darkblue_orange/css/theme_right.css.php
index b3641b351..7fafa1537 100644
--- a/themes/darkblue_orange/css/theme_right.css.php
+++ b/themes/darkblue_orange/css/theme_right.css.php
@@ -1227,6 +1227,11 @@ code.sql {
     margin-top:         0;
 }
 
+/* for elements that should be revealed only via js */
+.hide {
+    display:            none;
+}
+
 #li_select_server {
     padding-bottom:     0.3em;
     border-bottom:      0.3em solid <?php echo $GLOBALS['cfg']['ThBackground']; ?>;
diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 0a5ae358e..b550fab37 100644
--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@@ -1178,6 +1178,11 @@ code.sql {
     margin-top:         0;
 }
 
+/* for elements that should be revealed only via js */
+.hide {
+    display:            none;
+}
+
 #li_select_server {
     padding-bottom:     0.3em;
     border-bottom:      0.3em solid <?php echo $GLOBALS['cfg']['ThBackground']; ?>;