+- ZenphotoCMS Forum (https://forum.zenphoto.org)
+-- Forum: Support (https://forum.zenphoto.org/forum-1.html)
+--- Forum: Plugins (https://forum.zenphoto.org/forum-6.html)
+--- Thread: Zenpage sidebar menu misaligned (/thread-3900.html)
Zenpage sidebar menu misaligned - darrellm - 2008-10-19
Am I the only one having this problem? This is the second install of Zenpage, both sites had issues with sidebar misaligning when viewing the full image. Here's a link: http://www.mlownie.com/gallery/index.php?album=retrospective&image=dream_of_flight.jpg
I have not done anything but install the plug-in. Any help is appreciated.
Zenpage sidebar menu misaligned - olihar - 2008-10-19
try to disable thickbox in the code and see what happens.
Zenpage sidebar menu misaligned - acrylian - 2008-10-19
Worth a try, but that should not be the cause since I use it with the thickbox on my demo site, too: http://zenpage.maltem.de/zenpage-demo/album1/Cosmos09.jpg.php
Zenpage sidebar menu misaligned - darrellm - 2008-10-19
Thanks for the reply. However, where specifically do you disable the thickbox? Also, on another post, lucian had brought to my attention that there was a </div> missing before the sidemenu and I thought I added it but the menu still aligns under the image (see link above). Although, the menu bar is now showing, the menu is still under the image.
Here's a partial copy of the codes where I placed the extra </div> after the <div id="image":
`
<div id="content-left">
<!-- The Image -->
<?php if (!checkForPassword()) { ?>
<?php if(function_exists("printPagedThumbsNav")) { printPagedThumbsNav(6, FALSE, gettext('« prev thumbs'), gettext('next thumbs »'), 40, 40, 40, TRUE); } ?>
<div id="image">
">
<?php printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
</div>
<?php printImageDesc(true); ?>
<?php if (function_exists('printSlideShowLink')) printSlideShowLink(gettext('View Slideshow')); ?>
<?php
if (getImageEXIFData()) {echo "<div id=\"exif_link\"><a href=\"#TB_inline?height=345&width=300&inlineId=imagemetadata\" title=\"".gettext("Image Info")."\" class=\"thickbox\">".gettext("Image Info")."</a>";
printImageMetadata('', false);
}
?>
<?php printTags('links', gettext('[b]Tags:[/b]').' ', 'taglist', ''); ?>
<?php if (function_exists('printImageMap')) printImageMap(); ?>
<?php if (function_exists('printImageRating')) { printImageRating(); }?>
<?php if (function_exists('printShutterfly')) printShutterfly(); ?>
<?php if (getOption('Allow_comments')) { ?>
</div>
`
Here's the previous post where lucian mentioned it: http://www.zenphoto.org/support/topic.php?id=4072
Zenpage sidebar menu misaligned - olihar - 2008-10-19
ahh yeah.. put the </div> under all the stuff about comments. I remember I did that myself and got it to work that way.
Zenpage sidebar menu misaligned - olihar - 2008-10-19
Try this one.
`
<?php setThemeDomain("zenpage-default"); if (!defined('WEBPATH')) die(); $firstPageImages = normalizeColumns('2', '6');?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php zenJavascript(); ?>
<title><?php echo getBareGalleryTitle(); ?> | <?php echo getBareAlbumTitle();?> | <?php echo getBareImageTitle();?></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
function toggleComments() {
var commentDiv = document.getElementById("comments");
if (commentDiv.style.display == "block") {
commentDiv.style.display = "none";
} else {
commentDiv.style.display = "block";
}
}
</script>
<?php printRSSHeaderLink('Gallery',gettext('Gallery RSS')); ?>
</head>
<body>
<!-- somehow the thickbox.css kills the top margin here that all other pages have... -->
<div id="header">
"><?php echo gettext("Index"); ?> » <?php echo gettext("Gallery"); ?><?php printParentBreadcrumb(" » "," » "," » "); printAlbumBreadcrumb(" ", " » "); ?>
[b]<?php printImageTitle(true); ?>[/b] (<?php echo imageNumber()."/".getNumImages(); ?>)
<div id="content-left">
<div align="right"><?php if (function_exists('printSlideShowLink')) printSlideShowLink(gettext('View Slideshow')); ?>
<?php if (hasPrevImage()) { ?>
<div class="imgprevious">">« <?php echo gettext("prev"); ?>
<?php } if (hasNextImage()) { ?>
"><?php echo gettext("next"); ?> »
<?php } ?>
</div>
<!-- The Image -->
<?php if (!checkForPassword()) { ?>
<?php if(function_exists("printPagedThumbsNav")) { printPagedThumbsNav(6, FALSE, gettext('« prev thumbs'), gettext('next thumbs »'), 40, 40, 40, TRUE); } ?>
">
<?php printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
<?php printImageDesc(true); ?>
<?php
if (getImageEXIFData()) {echo "<div id=\"exif_link\"><a href=\"#TB_inline?height=345&width=300&inlineId=imagemetadata\" title=\"".gettext("Image Info")."\" class=\"thickbox\">".gettext("Image Info")."</a>";
printImageMetadata('', false);
}
?>
<?php printTags('links', gettext('[b]Tags:[/b]').' ', 'taglist', ''); ?>
<?php if (function_exists('printImageMap')) printImageMap(NULL, "G_HYBRID_MAP", '640', '250', "Map", false, "googlemap" ); ?>
<?php if (function_exists('printImageRating')) { printImageRating(); }?>
<?php if (function_exists('printShutterfly')) printShutterfly(); ?>
<?php if (getOption('Allow_comments')) { ?>
</div>
<?php $num = getCommentCount(); echo ($num == 0) ? "" : ("".gettext("Comments")." ($num)[hr]"); ?>
<?php while (next_comment()){ ?>
<div class="comment">
<div class="commentmeta">
<?php printCommentAuthorLink(); ?> <?php gettext("says:"); ?>
<?php echo getCommentBody();?>
<?php echo getCommentDate();?>
,
<?php echo getCommentTime();?>
<?php printEditCommentLink(gettext('Edit'), ' | ', ''); ?>
</div>
<?php }; ?>
<?php if (OpenedForComments()) { ?>
<!-- If comments are on for this image AND album... -->
<?php echo gettext("Add a comment:"); ?>
<form id="commentform" action="#" method="post">
<div><input type="hidden" name="comment" value="1" />
<input type="hidden" name="remember" value="1" />
<?php
printCommentErrors();
$stored = getCommentStored();
?>
<table border="0">
<tr>
<td><label for="name"><?php echo gettext("Name:"); ?></label>
(<input type="checkbox" name="anon" value="1"<?php if ($stored['anon']) echo " CHECKED"; ?> /> <?php echo gettext("don't publish"); ?>)
</td>
<td><input type="text" id="name" name="name" size="20" value="<?php echo $stored['name'];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><label for="email"><?php echo gettext("E-Mail:"); ?></label></td>
<td><input type="text" id="email" name="email" size="20" value="<?php echo $stored['email'];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><label for="website"><?php echo gettext("Site:"); ?></label></td>
<td><input type="text" id="website" name="website" size="40" value="<?php echo $stored['website'];?>" class="inputbox" /></td>
</tr>
<?php if (getOption('Use_Captcha')) {
$captchaCode=generateCaptcha($img); ?>
<tr>
<td><label for="code"><?php echo gettext("Enter Captcha:"); ?>
<img src=<?php echo "\"$img\"";?> alt="Code" align="bottom"/>
</label></td>
<td><input type="text" id="code" name="code" size="20" class="inputbox" /><input type="hidden" name="code_h" value="<?php echo $captchaCode;?>"/></td>
</tr>
<?php } ?>
<tr><td colspan="2"><input type="checkbox" name="private" value="1"<?php if ($stored['private']) echo " CHECKED"; ?> /> <?php echo gettext("Private (don't publish)"); ?></td></tr>
</table>
<textarea name="comment" rows="6" cols="40"><?php echo $stored['comment']; ?></textarea>
<input type="submit" value="<?php echo gettext('Add Comment'); ?>" class="pushbutton" />
</form>
</div>
</div>
<?php } else { echo gettext('Comments are closed.'); } ?>
<?php } ?>
<?php } ?>
</div><!-- content-left -->
</div>
<?php include("sidebar.php"); ?>
<?php include("footer.php"); ?>
</div><!-- content -->
</div><!-- main -->
<?php printAdminToolbox(); ?>
</body>
</html>
`
Zenpage sidebar menu misaligned - olihar - 2008-10-19
I am using it like this right now in some tests
`
<?php setThemeDomain("zenpage-default"); if (!defined('WEBPATH')) die(); $firstPageImages = normalizeColumns('2', '6');?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php zenJavascript(); ?>
<title><?php echo getBareGalleryTitle(); ?> | <?php echo getBareAlbumTitle();?> | <?php echo getBareImageTitle();?></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/style.css" type="text/css" />
<?php /*?><link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
function toggleComments() {
var commentDiv = document.getElementById("comments");
if (commentDiv.style.display == "block") {
commentDiv.style.display = "none";
} else {
commentDiv.style.display = "block";
}
}
</script><?php */?>
<?php printRSSHeaderLink('Gallery',gettext('Gallery RSS')); ?>
</head>
<body>
style="margin-top: 16px;"<?php */?>><!-- somehow the thickbox.css kills the top margin here that all other pages have... -->
<div id="header">
<div class="logoc">[Image: http://gallery.chris.is/themes/default/logo.gif]
</div>
"><?php echo gettext("Index"); ?> <?php /*?>» <?php echo gettext("Gallery"); ?><?php */?><?php printParentBreadcrumb(" » "," » "," » "); printAlbumBreadcrumb(" ", " » "); ?>
[b]<?php printImageTitle(true); ?>[/b] (<?php echo imageNumber()."/".getNumImages(); ?>)
<div id="content-left">
<div align="right"><?php if (function_exists('printSlideShowLink')) printSlideShowLink(gettext('View Slideshow')); ?>
<?php if (hasPrevImage()) { ?>
<div class="imgprevious">">« <?php echo gettext("prev"); ?>
<?php } if (hasNextImage()) { ?>
"><?php echo gettext("next"); ?> »
<?php } ?>
</div>
<!-- The Image -->
<?php if (!checkForPassword()) { ?>
<?php if(function_exists("printPagedThumbsNav")) { printPagedThumbsNav(6, FALSE, gettext('« prev thumbs'), gettext('next thumbs »'), 40, 40, 40, TRUE); } ?>
<?php /*?> ">
<?php printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
<?php */?>
<?php printCustomSizedImageMaxSpace(getBareImageTitle(),640,640); ?>
<?php printImageDesc(true); ?>
<?php /*?> <?php
if (getImageEXIFData()) {echo "<div id=\"exif_link\"><a href=\"#TB_inline?height=345&width=300&inlineId=imagemetadata\" title=\"".gettext("Image Info")."\" class=\"thickbox\">".gettext("Image Info")."</a>";
printImageMetadata('', false);
}
?><?php */?>
<?php /*?> <?php printTags('links', gettext('[b]Tags:[/b]').' ', 'taglist', ''); ?><?php */?>
<?php if (function_exists('printImageMap')) printImageMap(NULL, "G_HYBRID_MAP", '640', '250', "Map", false, "googlemap" ); ?>
<?php /*?> <?php if (function_exists('printImageRating')) { printImageRating(); }?>
<?php if (function_exists('printShutterfly')) printShutterfly(); ?><?php */?>
<?php /*?><?php if (getOption('Allow_comments')) { ?>
</div>
<?php $num = getCommentCount(); echo ($num == 0) ? "" : ("".gettext("Comments")." ($num)[hr]"); ?>
<?php while (next_comment()){ ?>
<div class="comment">
<div class="commentmeta">
<?php printCommentAuthorLink(); ?> <?php gettext("says:"); ?>
<?php echo getCommentBody();?>
<?php echo getCommentDate();?>
,
<?php echo getCommentTime();?>
<?php printEditCommentLink(gettext('Edit'), ' | ', ''); ?>
</div>
<?php }; ?>
<?php if (OpenedForComments()) { ?>
<!-- If comments are on for this image AND album... -->
<?php echo gettext("Add a comment:"); ?>
<form id="commentform" action="#" method="post">
<div><input type="hidden" name="comment" value="1" />
<input type="hidden" name="remember" value="1" />
<?php
printCommentErrors();
$stored = getCommentStored();
?>
<table border="0">
<tr>
<td><label for="name"><?php echo gettext("Name:"); ?></label>
(<input type="checkbox" name="anon" value="1"<?php if ($stored['anon']) echo " CHECKED"; ?> /> <?php echo gettext("don't publish"); ?>)
</td>
<td><input type="text" id="name" name="name" size="20" value="<?php echo $stored['name'];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><label for="email"><?php echo gettext("E-Mail:"); ?></label></td>
<td><input type="text" id="email" name="email" size="20" value="<?php echo $stored['email'];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><label for="website"><?php echo gettext("Site:"); ?></label></td>
<td><input type="text" id="website" name="website" size="40" value="<?php echo $stored['website'];?>" class="inputbox" /></td>
</tr>
<?php if (getOption('Use_Captcha')) {
$captchaCode=generateCaptcha($img); ?>
<tr>
<td><label for="code"><?php echo gettext("Enter Captcha:"); ?>
<img src=<?php echo "\"$img\"";?> alt="Code" align="bottom"/>
</label></td>
<td><input type="text" id="code" name="code" size="20" class="inputbox" /><input type="hidden" name="code_h" value="<?php echo $captchaCode;?>"/></td>
</tr>
<?php } ?>
<tr><td colspan="2"><input type="checkbox" name="private" value="1"<?php if ($stored['private']) echo " CHECKED"; ?> /> <?php echo gettext("Private (don't publish)"); ?></td></tr>
</table>
<textarea name="comment" rows="6" cols="40"><?php echo $stored['comment']; ?></textarea>
<input type="submit" value="<?php echo gettext('Add Comment'); ?>" class="pushbutton" />
</form>
</div>
</div>
<?php } else { echo gettext('Comments are closed.'); } ?>
<?php } ?><?php */?>
<?php } ?>
</div><!-- content-left -->
</div>
<?php include("sidebar.php"); ?>
<?php include("footer.php"); ?>
</div><!-- content -->
</div><!-- main -->
<?php printAdminToolbox(); ?>
</body>
</html>
`
Zenpage sidebar menu misaligned - acrylian - 2008-10-19
I don't have IE and my fellow devs didn't report anything. So is the display error on my demo site, too? If so let me know. Thanks.
Zenpage sidebar menu misaligned - darrellm - 2008-10-19
Acrylian - thanks for the zenpage. You did excellent work! To answer your question, I think yes it is on your demo site. All I did was upgrade to the latest Zenphoto and installed Zenpage. Everything (installation) went smoothly without errors. But when I looked at the image that's when I noticed the misalignment of the menu.
I am on Firefox 3.0.3 on Mac OS Tiger, so I haven't looked at any Windows OS. But last I checked that both platforms had this problem. I'm surprised that no one else reported this. But according to what Olihar just said, others may have had it - it's just that it was an easier fix for them due to the greater knowledge they have of the codes.
Olihar - thanks for the reply and the fix. I will look into it sometime today. By the way, I love what you did with your site (when I click on your name) That's exactly what I was looking for (the black/grey background). Is that done by Zenpage or did you just add the menu on the top yourself?
Thanks again guys!
P.S. - I still would like to know how to disable thickbox.
Zenpage sidebar menu misaligned - acrylian - 2008-10-19
First, thanks for the nice words!
Second, I have found the error. There is not a closing div missing but wrong nested so that it indeed gets losts if the comments are disabled. The fix is easy (of course I will svn it). Open image.php and look at line 141:
`
</div>
<?php } else { echo gettext('Comments are closed.'); } ?>
<?php } ?>
<?php } ?>
`
Change this to:
`
<?php } else { echo gettext('Comments are closed.'); } ?>
<?php } ?>
<?php } ?>
</div>
`
Now it should work as expected.
To disable the thickbox, open also image.php and simply remove the `class="thickbox"` from the a href, also remove the thickbox.js and thickbox.css load from the head of the file.
Zenpage sidebar menu misaligned - olihar - 2008-10-19
ahh thats the reason my things where jumping around when playing with the comments, I did fix it almost the same way as you did. well then again I kind of had 1 to many </div> in the code.
1 thing to note, the possibility to control if you want to have comments on or off in the settings for this theme, as long with some other settings as well like the default theme has.