Sidebar Changes: re-added pin function, standardised open close icon, narrowed sidebar width. Still TO DO: rtl css, session save "sb_pin and "sb_open" states

19 files changed, 238 insertions, 184 deletions

diff --git a/js/jquery/css/jquery-ui.custom.css b/js/jquery/css/jquery-ui.custom.css
index 6f46bdf584..618336da6c 100644
--- a/js/jquery/css/jquery-ui.custom.css
+++ b/js/jquery/css/jquery-ui.custom.css
@@ -404,7 +404,7 @@
 #sidebar {

 	position: absolute;

 	right: 0px;

-	width: 0px;

+	width: 260px;

 	height: 690px;

 	z-index: 50;

 	margin-left:0px;

@@ -424,6 +424,9 @@
 	background-color: #ffffff;

 	border-bottom: transparent;

 }

+#sidebar_open {

+	padding: 0px;

+}

 #sidebar_open img {

 margin-top: 1px;

 	padding-top: 5px;

@@ -433,13 +436,10 @@ margin-top: 1px;
 	height: 14px;

 	background-color: white;

 }

-

-#sidebar_open {

-	padding: 0px;

-}

 #sidebarAccordion {

 	/* display: none; */

 	margin-top: -1px;

+	width: 260px;

 }

 #sidebar_pin {

 	/* display: none; */

diff --git a/sidebar.php b/sidebar.php
index 5c219e880d..a5c862b58d 100644
--- a/sidebar.php
+++ b/sidebar.php
@@ -87,45 +87,6 @@ if (isset($controller)) {
 	if (empty($famid)) $famid = safe_POST('famid', WT_REGEX_XREF, '');
 }
 ?>
-<style type="text/css">
-<?php 
-//-- standard theme styles
-if ($TEXT_DIRECTION=='ltr') { ?>
-
-<?php } 
-//-- RTL styles
-else {  ?>
-/*
-#sidebar {
-	position: absolute;
-	left: 1px;
-	width: 0px;
-	height: 450px;
-	z-index: 50;
-	margin-top: 10px;
-	margin-left: 12px;
-	background-color: #dddddd;
-}
-#sidebar_controls {
-	position: absolute;
-	float: right;
-	right: -22px;
-	margin-top: 0px;
-	margin-right: 5px;
-	height: 29px;
-	width: 16px;
-	z-index: 10;
-}
-#sidebar_open img {
-	padding-top: 6px;
-	padding-bottom: 7px;
-	margin-right: 0px;
-	height: 15px;
-	background-color: #ffffff;
-}
-*/
-<?php } ?>
-</style>
 <script type="text/javascript" src="js/jquery/jquery.scrollfollow.js"></script> 
 <script type="text/javascript">
 <!--
@@ -134,9 +95,11 @@ var loadedMods = new Array();
 function closeCallback() {
 	jQuery('#sidebarAccordion').hide();
 	jQuery('#sidebar_pin').hide();
-	if (pinned == true) {
-		jQuery('#sidebar_pin').click();
+	if (pinned == false) {
+		jQuery.get('individual.php?pid=<?php echo $controller->pid;?>&action=ajax&pin=false');
+		pinned = false;
 	}
+
 }
 function openCallback() {
 	jQuery('#sidebarAccordion').accordion({
@@ -156,116 +119,101 @@ jQuery(document).ready(function() {
 	jQuery('#sidebar_pin').toggle(
    		   	function() {
    	   		   	jQuery('#sidebar_pin img').attr('src', '<?php echo $WT_IMAGE_DIR.'/'.$WT_IMAGES['pin-in']['other'];?>').attr('title', '<?php echo i18n::translate('Unpin Sidebar');?>');
-   	   		   	var newwidth = 345;
-   	   		   	newwidth = jQuery('#tabs').width() - newwidth;
-   	   		   	<?php if ($TEXT_DIRECTION=='rtl') {?>
-   	   		   		//newwidth = jQuery('.static_tab').width() + 40;
-   	   				//newwidth = jQuery('#tabs').width() - newwidth;
-   	   		   	<?php } ?>
-				// --- NOTE: --- REM next line to avoid the "page shift" when Navigator is pinned. (Purely a preference choice)
-   	   		 	jQuery('#tabs > div').css('width', newwidth+'px');
-   	   		   	pinned = true;
+				// Shift content ---------------------------
+				// -----------------------------------------
    	   			jQuery.get('individual.php?pid=<?php echo $controller->pid;?>&action=ajax&pin=true');
+   	   			pinned = true;
    		   	},
    		   	function() {
    		   		jQuery('#sidebar_pin img').attr('src', '<?php echo $WT_IMAGE_DIR.'/'.$WT_IMAGES['pin-out']['other'];?>').attr('title', '<?php echo i18n::translate('Pin Sidebar');?>');
-   		   		jQuery('#tabs div').css('width', '');
-   		   		pinned = false;
+ 				// Shift content back ----------------------
+				// -----------------------------------------
    		   		jQuery.get('individual.php?pid=<?php echo $controller->pid;?>&action=ajax&pin=false');
+   		   		pinned = false;
    		   	});
 	   	<?php 	
-	   	if (isset($_SESSION['WT_pin']) && $_SESSION['WT_pin']) { 
+	   	if (isset($_SESSION['WT_pin']) && $_SESSION['WT_pin']) {
 	   	?>
 	   		jQuery('#sidebar_pin').click();
-	  	<?php 
-	  	} 
+	  	<?php
+	  	}
 	  	?>
-   	// =========================================================	
+   	// =========================================================
 
 	//	jQuery('#sidebar').scrollFollow();
-
+	jQuery('#sidebar_controls').show();	
 	var modsLoaded = false;
+	
+	// Sidebar Open/Close Function =============================
 	jQuery('#sidebar_open').toggle(function() {
-		jQuery('#sidebar_open img').attr('src', '<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_close']['other'];?>').attr('title', '<?php echo i18n::translate('Sidebar Close');?>');
+		jQuery('#sidebar_open img').attr('style', 'margin-left:255px;' ).attr('src', '<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_close']['other'];?>').attr('title', '<?php echo i18n::translate('Sidebar Close');?>');
 		jQuery('#sidebar').animate({
 			right: "0px",
-			width: "310px"
+			width: "260px"
 		}, 500);
-		
-  		if ( pinned == false ) {
-			jQuery('#sidebar_pin').click();
-		}
-			
 		if (!modsLoaded) {
 			jQuery('#sidebarAccordion').load('sidebar.php', 'sb_action=loadMods&pid=<?php echo $pid?>&famid=<?php echo $famid?>', openCallback);
 			modsLoaded=true;
+		} else {
+			jQuery("#sidebarAccordion").accordion("resize");
 		}
-		else jQuery("#sidebarAccordion").accordion("resize");
 		jQuery('#sidebarAccordion').show();
-		// jQuery('#sidebar_pin').show();
+		jQuery('#sidebar_pin').show();		
+		// Shift content -----------------------------------
+   	   		var newwidth = 280;
+	   		newwidth = jQuery('#tabs').width() - newwidth;
+   	    	<?php if ($TEXT_DIRECTION=='rtl') {?>
+   	   			//newwidth = jQuery('.static_tab').width() + 40;
+   	   			//newwidth = jQuery('#tabs').width() - newwidth;
+   	   		<?php } ?>
+			// --- NOTE: --- REM next line to avoid the "page shift" when Navigator is opened. (Purely a preference choice)
+   	   		jQuery('#tabs > div').css('width', newwidth+'px');
+		// -------------------------------------------------
+		// Check if pinned ---------------------------------
+			<?php if (isset($_SESSION['WT_pin']) && $_SESSION['WT_pin']) { ?>
+				jQuery.get('individual.php?pid=<?php echo $controller->pid;?>&action=ajax&pin=true');
+			<?php } ?>
+		// -------------------------------------------------
+		sb_open=true;
 	}, function() {
-		jQuery('#sidebar_open img').attr('src', '<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_open']['other'];?>').attr('title', '<?php echo i18n::translate('Sidebar Open');?>');
+		jQuery('#sidebar_open img').attr('style', 'margin-left:0px;' ).attr('src', '<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_open']['other'];?>').attr('title', '<?php echo i18n::translate('Sidebar Open');?>');
 		jQuery('#sidebar').css('left', '');
 		jQuery('#sidebar').animate({
 			right: "0px",
 			width: "0px"
-		}, 500, 'linear', closeCallback);
+		}, 500, 'linear', closeCallback);		
+		// Shift content back ------------------------------
+			jQuery('#tabs div').css('width', '');
+		// -------------------------------------------------
+		// Check if pinned ---------------------------------
+			<?php if (isset($_SESSION['WT_pin']) && $_SESSION['WT_pin']) { ?>
+				jQuery.get('individual.php?pid=<?php echo $controller->pid;?>&action=ajax&pin=true');
+			<?php } ?>
+		// -------------------------------------------------
+		sb_open=false;
 	});
+	// =========================================================
 	
    	<?php 
-   	// Sidebar state control =======================================================================
-   	// NOTE: Unnecessary "sidebar_pin" image has now been removed. (Ref. remmed line 204)
-	// NOTE: Need config option for setting $sidebar_state.
-	$sidebar_state = "open";  	// "on" 	= 	Sidebar open permanently,	- no facility to open/close. 
-								// "open"	=	Sidebar open, [default]		- may be opened/closed. Page refresh opens sidebar again. 
-								// "closed" =	Sidebar closed, 			- may be opened/closed. Page refresh closes sidebar again.
-								// "off		=	Sidebar closed permanently	- no facility to open/close.	
-	
-   	if ( isset($_SESSION['WT_pin']) && $_SESSION['WT_pin'] || $sidebar_state == "on" || $sidebar_state == "open" ) { 
-   	?>
-	   	jQuery('#sidebar_open').click();
-		jQuery('#sidebar_controls').show();	
-  		if ( pinned == false ) {
-  			jQuery('#sidebar_pin').click();
-  		}
-  		sb_open = true;
-  	<?php 
-  	}
-  	
-  	if ( $sidebar_state == "on" ) {
-  	?>	
-  			jQuery('#sidebar_pin').hide();
-  			jQuery('#sidebar_controls').hide();	
-  	<?php
-  	} 
-  	else if ( $sidebar_state == "closed" ) {
+   	if ( isset($_SESSION['WT_pin']) && $_SESSION['WT_pin'] ) { 
   	?>
-  		if ( sb_open == true && pinned == false) {
-  			jQuery('#sidebar_open').click();
-  		}
-  		jQuery('#sidebar_controls').show();
-  		sb_open = false;
-  	<?php 
-  	}
-  	else if ( $sidebar_state == "off" ) {
-  	?>
-  		if ( sb_open == true ) {
-  			jQuery('#sidebar_open').click();
-  		}
-  		jQuery('#sidebar_pin').hide();
-  		jQuery('#sidebar_controls').hide();
-  		sb_open = false;
+  		if (sb_open!=true) {
+			jQuery('#sidebar_open').click();
+		} else {
+			jQuery('#sidebar_open').click();
+		}
   	<?php 
   	}
-  	// =============================================================================================
   	?>
+  	// Debug ---------------------
+  	// alert("Pinned = "+sb_open);
 
 });
-//-->
+-->
 </script>
 <div id="sidebar">
 	<div id="sidebar_controls" class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top ui-state-focus">
-		<a id="sidebar_open" href="#open"><img src="<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_open']['other'];?>" border="0" title="<?php echo i18n::translate('Sidebar Open');?>"></a> 
+		<a id="sidebar_open" href="#open"><img style="margin-left:0px;" src="<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['slide_open']['other'];?>" border="0" title="<?php echo i18n::translate('Sidebar Open');?>"></a> 
 		<a id="sidebar_pin" href="#pin"><img src="<?php echo $WT_IMAGE_DIR."/".$WT_IMAGES['pin-out']['other'];?>" border="0" title="<?php echo i18n::translate('Pin Sidebar');?>"></a> 
 	</div>
 	<div id="sidebarAccordion"></div>
diff --git a/themes/cloudy/images/close.png b/themes/cloudy/images/close.png
new file mode 100644
index 0000000000..389640f7d5
--- /dev/null
+++ b/themes/cloudy/images/close.png
diff --git a/themes/cloudy/images/open.png b/themes/cloudy/images/open.png
new file mode 100644
index 0000000000..245b5035b6
--- /dev/null
+++ b/themes/cloudy/images/open.png
diff --git a/themes/cloudy/jquery/jquery-ui_theme.css b/themes/cloudy/jquery/jquery-ui_theme.css
index 413f896daa..b583d5c6e5 100644
--- a/themes/cloudy/jquery/jquery-ui_theme.css
+++ b/themes/cloudy/jquery/jquery-ui_theme.css
@@ -17,31 +17,53 @@
 .ui-tabs-nav li.ui-tabs-selected:hover	 { background:#f8f8f8; }

 .ui-tabs .ui-tabs-panel	 				 { background:#f8f8f8; }

 

+

+

 /* ------- Sidebar ------- */

 #sidebar {

+	position: absolute;

+	right: 0px;

+	width: 0px;

 	margin-left:0px;

-	margin-top: 8px;

+	margin-top: 3px;

 	margin-right: 41px;

 	background-color: transparent;

 	height: 500;

 }

 #sidebar_controls {

-	height: 21px;

+	position: absolute;

+	left: -20px;

+	top: 2px;

+	margin: 0;

+	height: 21px; 

+	width: 20px;

+	z-index: 10;

+	border: none;

+	background-color: transparent;

+}

+#sidebar_open {

+	padding: 0;

 }

 #sidebar_open img {

-	padding-top: 3px;

+	position: absolute;

+	padding-top: 0px;

 	padding-bottom: 3px;

 	margin-left: 0px;

+	height: 20px;

+	width: 20px;

+	background-color: transparent;

 }

 #sidebar_pin {

-	/* display: none; */

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

-	padding-right: 0px;

-	padding-left: 0px;

-	width: 14px;

+	margin-top: -55px;

+	padding-right: 2px;

+	padding-left: 2px;

 }

 

 /* Navigator & Flyout menu Styles --------*/

@@ -49,7 +71,8 @@
 color:red;

 }

 .nav_content {

-	width:240px;

+	width: 240px;

+	margin-left: -25px;

 	background:#eff8f8;

 	padding-left:5px;

 	padding-right:5px;

diff --git a/themes/cloudy/theme.php b/themes/cloudy/theme.php
index c2c4317b6b..37a18ddebc 100644
--- a/themes/cloudy/theme.php
+++ b/themes/cloudy/theme.php
@@ -181,8 +181,8 @@ $WT_IMAGES["pin-in"]["other"] = "pin-in.png";
 $WT_IMAGES["default_image_M"]["other"] = "silhouette_male.gif";
 $WT_IMAGES["default_image_F"]["other"] = "silhouette_female.gif";
 $WT_IMAGES["default_image_U"]["other"] = "silhouette_unknown.gif";
-$WT_IMAGES['slide_open']['other'] = "ldarrow.gif";
-$WT_IMAGES['slide_close']['other'] = "rdarrow.gif";
+$WT_IMAGES['slide_open']['other'] = "open.png";
+$WT_IMAGES['slide_close']['other'] = "close.png";
 
 // - lifespan chart arrows
 $WT_IMAGES["lsltarrow"]["other"] = "lsltarrow.gif";
diff --git a/themes/colors/images/close.png b/themes/colors/images/close.png
index 46a754bf4d..a859458087 100644
--- a/themes/colors/images/close.png
+++ b/themes/colors/images/close.png
diff --git a/themes/colors/images/open.png b/themes/colors/images/open.png
index 8ab0c7f0f2..bbae26f3b9 100644
--- a/themes/colors/images/open.png
+++ b/themes/colors/images/open.png
diff --git a/themes/colors/jquery/jquery-ui_theme.css b/themes/colors/jquery/jquery-ui_theme.css
index 07d25570df..3f2aa6c6b3 100644
--- a/themes/colors/jquery/jquery-ui_theme.css
+++ b/themes/colors/jquery/jquery-ui_theme.css
@@ -13,7 +13,8 @@
 color:red;

 }

 .nav_content {

-	width:240px;

+	width: 240px;

+	margin-left: -25px;

 	padding-left:5px;

 	padding-right:5px;

 	padding-top:3px;

@@ -59,7 +60,6 @@ color:red;
 	position: absolute;

 	right: 0px;

 	width: 0px;

-	height: 710px;

 	z-index: 50;

 	margin-left:0px;

 	margin-top: 10px;

@@ -68,27 +68,36 @@ color:red;
 }

 #sidebar_controls {

 	position: absolute;

-	float: left;

-	left: -24px;

-	margin: 0;

-	height: 24px; 

-	width: 24px;

+	top: 2px;

+	left: -24px; 

+	margin: 0px;

+	height: 0px;

+	width: 0px;

 	z-index: 10;

 	border: none;

+	background-color: transparent;

+

+}

+#sidebar_open {

+	padding: 0;

 }

 #sidebar_open img {

+	position: absolute;

 	padding: 0;

 	margin: 0;

 	height: 24px;

+	background: transparent; 

 }

-

 #sidebar_pin {

-	/* display: none; */

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

-	padding-right: 3px;

+	margin-top: -55px;

+	padding-right: 4px;

 	padding-left: 4px;

 }

 #sidebarAccordion {

diff --git a/themes/fab/images/close.png b/themes/fab/images/close.png
new file mode 100644
index 0000000000..19e56f6b5d
--- /dev/null
+++ b/themes/fab/images/close.png
diff --git a/themes/fab/images/open.png b/themes/fab/images/open.png
new file mode 100644
index 0000000000..fbcd89f73a
--- /dev/null
+++ b/themes/fab/images/open.png
diff --git a/themes/fab/jquery/jquery-ui_theme.css b/themes/fab/jquery/jquery-ui_theme.css
index b5976c30d1..70287ec37e 100644
--- a/themes/fab/jquery/jquery-ui_theme.css
+++ b/themes/fab/jquery/jquery-ui_theme.css
@@ -8,19 +8,54 @@
 .ui-tabs-nav li.ui-tabs-selected a:hover	 { font-weight:600; color: black; }

 

 

-/* ------- Sidebar ------- */

+/* Sidebar --------------------------------*/

+#sidebar {

+	position: absolute;

+	right: 0px;

+	width: 0px;

+	/* height: 500px; */

+	z-index: 50;

+	margin-left:0px;

+	margin-top: 10px;

+	margin-right: 12px;

+	background-color: #dddddd;

+}

+#sidebar_controls {

+	position: absolute;

+	top: 2px;

+	left: -24px; 

+	margin: 0;

+	height: 24px; 

+	width: 24px;

+	z-index: 10;

+	border: none;

+	background-color: transparent;

+}

+#sidebar_open {

+	padding: 0;

+}

 #sidebar_open img {

-	margin-left: 0px;

+	position: absolute;

+	padding: 0;

+	margin: 0;

+	height: 24px;

+	background-color: transparent;

 }

 #sidebar_pin {

-	/* display: none; */

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

-	padding-right: 0px;

-	padding-left: 0px;

-	width: 14px;

+	margin-top: -55px;

+	padding-right: 4px;

+	padding-left: 4px;

+}

+#sidebarAccordion {

+	/* display: none; */

+	margin-top: -1px;

 }

 

 /* Navigator and Flyout menu Styles */

@@ -28,10 +63,11 @@
 color:red;

 }

 .nav_content {

-	width:240px;

-	padding-left:5px;

-	padding-right:5px;

-	padding-top:3px;

+	width: 235px;

+	margin-left: -25px;

+	padding-left: 0px;

+	padding-right: 0px;

+	padding-top: 3px;

 	background-color: white;

 }

 .flyout {

diff --git a/themes/fab/theme.php b/themes/fab/theme.php
index 2b1ec19a9b..1c4b9ef781 100644
--- a/themes/fab/theme.php
+++ b/themes/fab/theme.php
@@ -173,8 +173,8 @@ $WT_IMAGES["pin-in"]["other"] = "pin-in.png";
 $WT_IMAGES["default_image_M"]["other"] = "silhouette_male.gif";
 $WT_IMAGES["default_image_F"]["other"] = "silhouette_female.gif";
 $WT_IMAGES["default_image_U"]["other"] = "silhouette_unknown.gif";
-$WT_IMAGES['slide_open']['other'] = "ldarrow.gif";
-$WT_IMAGES['slide_close']['other'] = "rdarrow.gif";
+$WT_IMAGES['slide_open']['other'] = "open.png";
+$WT_IMAGES['slide_close']['other'] = "open.png";
 
 //-- Variables for the Fan chart
 $fanChart = array(
diff --git a/themes/minimal/images/close.png b/themes/minimal/images/close.png
new file mode 100644
index 0000000000..df3c07efee
--- /dev/null
+++ b/themes/minimal/images/close.png
diff --git a/themes/minimal/images/open.png b/themes/minimal/images/open.png
new file mode 100644
index 0000000000..5e3fffefbb
--- /dev/null
+++ b/themes/minimal/images/open.png
diff --git a/themes/minimal/jquery/jquery-ui_theme.css b/themes/minimal/jquery/jquery-ui_theme.css
index c4c2b7ed6d..7edd3df2c6 100644
--- a/themes/minimal/jquery/jquery-ui_theme.css
+++ b/themes/minimal/jquery/jquery-ui_theme.css
@@ -19,37 +19,59 @@
 

 /* ------- Sidebar ------- */

 #sidebar {

+	position: absolute;

+	right: 0px;

+	width: 0px;

+	z-index: 50;

 	margin-left:0px;

-	margin-top: 9px;

+	margin-top: 4px;

 	margin-right: 19px;

 	background-color: #dddddd;

 }

 #sidebar_controls {

-	height: 22px;

+	position: absolute;

+	left: -20px;

+	top: 2px;

+	margin: 0;

+	height: 18px; 

+	width: 20px;

+	z-index: 10;

+	border: none;

+	background-color: transparent;

+}

+#sidebar_open {

+	padding: 0;

 }

 #sidebar_open img {

+	position: absolute;

 	padding-top: 3px;

 	padding-bottom: 3px;

 	margin-left: 0px;

+	height: 18px;

+	width: 20px;

+	background-color: transparent;

 }

+

 #sidebar_pin {

-	/* display: none; */

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

-	padding-right: 0px;

-	padding-left: 0px;

-	width: 14px;

+	margin-top: -55px;

+	padding-right: 2px;

+	padding-left: 2px;

 }

 

-

 /* Navigator & Flyout menu Styles --------*/

 .nam a:hover{

 color:black;

 }

 .nav_content {

-	width:240px;

+	width: 235px;

+	margin-left: -25px;

 	background:#efefef;

 	padding-left:5px;

 	padding-right:5px;

diff --git a/themes/minimal/theme.php b/themes/minimal/theme.php
index 158c9656dd..4aef8db4d1 100644
--- a/themes/minimal/theme.php
+++ b/themes/minimal/theme.php
@@ -147,8 +147,8 @@ $WT_IMAGES["pin-in"]["other"] = "pin-in.png";
 $WT_IMAGES["default_image_M"]["other"] = "silhouette_male.gif";
 $WT_IMAGES["default_image_F"]["other"] = "silhouette_female.gif";
 $WT_IMAGES["default_image_U"]["other"] = "silhouette_unknown.gif";
-$WT_IMAGES['slide_open']['other'] = "ldarrow.gif";
-$WT_IMAGES['slide_close']['other'] = "rdarrow.gif";
+$WT_IMAGES['slide_open']['other'] = "open.png";
+$WT_IMAGES['slide_close']['other'] = "close.png";
 
 // - lifespan chart arrows
 $WT_IMAGES["lsltarrow"]["other"] = "lsltarrow.gif";
diff --git a/themes/webtrees/jquery/jquery-ui_theme.css b/themes/webtrees/jquery/jquery-ui_theme.css
index abc692dbef..8f6ad6de8d 100644
--- a/themes/webtrees/jquery/jquery-ui_theme.css
+++ b/themes/webtrees/jquery/jquery-ui_theme.css
@@ -9,14 +9,15 @@
 

 

 /* Navigator and Flyout menu Styles */

-.nam a:hover{

-color:red;

+.nam a:hover {

+	color:red;

 }

 .nav_content {

-	width:240px;

-	padding-left:5px;

-	padding-right:5px;

-	padding-top:3px;

+	width: 235px;

+	margin-left: -25px;

+	padding-left: 0px;

+	padding-right: 0px;

+	padding-top: 3px;

 	background-color: white;

 }

 .flyout {

@@ -59,7 +60,6 @@ color:red;
 	position: absolute;

 	right: 0px;

 	width: 0px;

-	/* height: 500px; */

 	z-index: 50;

 	margin-left:0px;

 	margin-top: 10px;

@@ -68,29 +68,34 @@ color:red;
 }

 #sidebar_controls {

 	position: absolute;

-	float: left;

-	left: -24px;

+	top: 2px;

+	left: -24px; 

 	margin: 0;

 	height: 24px; 

 	width: 24px;

 	z-index: 10;

 	border: none;

+	background-color: transparent;

+}

+#sidebar_open {

+	padding: 0;

 }

 #sidebar_open img {

+	position: absolute;

 	padding: 0;

 	margin: 0;

 	height: 24px;

-}

-

-#sidebar_open {

-	padding: 0;

+	background-color: transparent;

 }

 #sidebar_pin {

-	/* display: none; */

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

+	margin-top: -55px;

 	padding-right: 4px;

 	padding-left: 4px;

 }

diff --git a/themes/xenea/jquery/jquery-ui_theme.css b/themes/xenea/jquery/jquery-ui_theme.css
index 7d6e4bb6af..1d92650245 100644
--- a/themes/xenea/jquery/jquery-ui_theme.css
+++ b/themes/xenea/jquery/jquery-ui_theme.css
@@ -19,6 +19,10 @@
 

 /* ------- Sidebar ------- */

 #sidebar {

+	position: absolute;

+	right: 0px;

+	width: 0px;

+	z-index: 50;

 	margin-left:0px;

 	margin-top: 4px;

 	margin-right: 12px;

@@ -26,7 +30,6 @@
 }

 #sidebar_controls {

 	position: absolute;

-	float: left;

 	left: -20px;

 	top: 2px;

 	margin: 0;

@@ -34,22 +37,29 @@
 	width: 20px;

 	z-index: 10;

 	border: none;

+	background-color: transparent;

+}

+#sidebar_open {

+	padding: 0;

 }

 #sidebar_open img {

+	position: absolute;

 	padding-top: 3px;

 	padding-bottom: 3px;

 	margin-left: 0px;

 	height: 18px;

 	width: 20px;

+	background-color: transparent;

 }

-

 #sidebar_pin {

-	/* display: none; */

-	padding-bottom: -2px;

+	position: absolute;

+	top: -22px;

 	padding-top: 3px;

-	background: #ffffff; 

+	margin-left: 225px;

+	background: transparent; 

 }

 #sidebar_pin img {

+	margin-top: -55px;

 	padding-right: 2px;

 	padding-left: 2px;

 }

@@ -61,7 +71,8 @@
 color:red;

 }

 .nav_content {

-	width:240px;

+	width: 235px;

+	margin-left: -25px;

 	background:#eff8f8;

 	padding-left:5px;

 	padding-right:5px;