Topic: including {GALLERY}-token shifts layout (Read 6993 times)

soulrebel · « **on:** July 07, 2010, 02:26:27 pm »

Hi there,

Im trying to adapt my coppermine theme with wordpress. It seems to work, but when adding the {GALLERY} token in the template.html, the whole layout shifts to the left compared to the wordpress layout. Without the token the gallery layout fits the wordpress layout. I used the the curve theme and changed it to my needs. The bordsearch was not as efficient as it should be. I did not found a solution for my problem.

the site is:
gallery: http://neu.zschippang.org/cpg
user: user
pwd: userpassword

The wordpress site to check what i mean is: http://neu.zschippang.org/wp
The token is currently added in the template.html. So if you switch between the two sites you will see it.

Here are the two files which i have changed.
template.html

Code: [Select]

<!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" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="css/coppermine.css" type="text/css" />
<link rel="stylesheet" href="themes/mario_theme/style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- Begin IE6 support -->
<!--[if lt IE 7]>
<style>
body {behavior: url(themes/mario_theme/csshover3.htc );}
.dropmenu li {width: 1px;} .dropmenu li a.firstlevel span.firstlevel {white-space: nowrap;} .main_menu {overflow: auto;}
</style>
<![endif]-->
<!-- End IE6 support -->
{JAVASCRIPT}
<!--
  SVN version info:
  Coppermine version: 1.5.6
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/curve/template.html $
  $Revision: 7620 $
-->
</head>
<body>
 <div id="site_container">
  
  <blog_title><a class="blog_title" href="http://neu.zschippang.org/cpg">{GAL_NAME}</a></blog_title><br />
  <blog_tagline>{GAL_DESCRIPTION}</blog_tagline>
  
 
  <div id="header_site_navigation">
   <navigation_item><a class="navigation_item" href="http://neu.zschippang.org/wp">Home</a></navigation_item>
   <navigation_item><a class="navigation_item" href="http://neu.zschippang.org/cpg">Galerie</a></navigation_item>
   <navigation_item><a class="navigation_item" href="http://neu.zschippang.org/phpBB">Forum</a></navigation_item>
  </div>

  <hr />
  <div id="header_image"></div>
  <hr />
  <!--{CUSTOM_HEADER}-->
  
  <div id="cpg_navigation">
   <div id="main_menu">
    {SYS_MENU}
    {SUB_MENU}
    {ADMIN_MENU}
   </div>
  </div>
  <!--Begin IE7 support-->
   <img class="menuheight" src="images/spacer.gif" border="0" />
  <!--End IE7 support-->

 {MESSAGE_BLOCK}
 {GALLERY}

  <!--<br /><!-- workaround for issue 64492 - do not remove the line break! -->-->
 
  {CUSTOM_FOOTER}
  {CREDITS}
 </div>
</body>
</html>

style.css

Code: [Select]

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2010 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.

  ********************************************
  Coppermine version: 1.5.6
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/curve/style.css $
  $Revision: 7620 $
**********************************************/


body {
  text-align:center;
  margin:0;
  font-family: verdana, arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #000000;
  background: #ddd;
  padding: 20px 0;
}


#site_container {
  background: #fff;
  text-align:left;
  padding-top: 20px;
  margin-left:auto;
  margin-right:auto;
  width:940px;
}

#header_site_navigation {
  margin: 0 20px 5px;
  /*padding-left: 20px; padding-right: 20px; */
  padding-top: 6px; padding-bottom: 0px; 
  font-family: Verdana, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}

#header_image {
  background-image: url(images/header6.png);
  background-repeat:no-repeat;
  background-position: center center;
  width: 900px;
  height: 150px;
  margin-left: 20px; margin-right: 20px;
}

#cpg_navigation {
  background-color: #5A85C1;
  margin: 0 20px;
  padding-top: 5px;
  padding-left: 9px;
  margin-bottom: 20px;
  height: 23px;
  letter-spacing: -1px;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
}

navigation_item {
  background-color: #EEEEEE;
  color: #777777;
  margin-right: 1px;
  padding-left: 10px; padding-right: 10px;
  padding-top: 6px; padding-bottom: 6px;
}


hr{
  display:block;
  height:5px;
  border:none;
  margin:0 20px;
  color:#000;
  background-color:#000
}

blog_title {
  margin: 0 20px;
  padding: 0;
  letter-spacing: -1px;
  line-height: 1.0em;
  font-size: 200%;
  text-transform: uppercase;
}

blog_tagline {
  margin: 0 20px;
  padding: 0;
  font-size: 1.2em;
  font-weight: normal;
  color: #444;
}

...

In the style.css I added the things I posted here, the rest of the file is like the original style.css from the curve theme.

Cheers!

Αndré · « **Reply #1 on:** July 07, 2010, 07:06:48 pm »

I assume you speak of this theme, which looks okay imo (see attached screen shot).

soulrebel · « **Reply #2 on:** July 07, 2010, 09:37:06 pm »

Hi Andrè,

I'm sorry, the right URL for the gallery is: http://neu.zschippang.org/cpg/index.php?theme=mario_theme.

When you look at the layout it seems to be ok, but when you switch between the gallery and wordpress you will notice, that there is a shift to the left. This shift will not happen, when the {GALLERY}-token commented out. When you log in and click to the different menu items, then you will see, that the shift will occour, when the album list is there. This I noticed while playing around a little bit today after I had written the post. As far as I see, the problem is the album list. But I did not have any time yet to search after modification options for the album list. Maybe that's no problem for you to tell me where I have go to manage this.

onthepike · « **Reply #3 on:** July 07, 2010, 10:11:08 pm »

The only shift I see (via Firefox) is a slight shift to the left which is due to the page rendering without scroll bars, as opposed to the Coppermine installation which includes scroll bars. A bigger issue for you might be your forum page where your defined table is too small for the output, but that is not related and is beyond the scope of Coppermine. I mention it only as a reference; something for you to take up elsewhere, if necessary.

Meanwhile, on my end, I do not see the issue of which you speak, unless you are making reference to the slight shift due to scroll bars, which is normal and of course cannot be "fixed" unless you create output that doesn't extend beyond the end-users screen height.

soulrebel · « **Reply #4 on:** July 07, 2010, 11:17:38 pm »

OK, I have to live with it maybe! Although I did not really understand what you mean with the scrollbar rendering thing. I'm more software then the web programmer

. But I'm wondering because the shift only occurs on gallery sites with album list. For the other coppermine pages, without album list, the layout is right.

And the problem can not be caused by wrong entries in CSS or in the template file?

Thank you for the hint with the forum page, but I know that there is still some work to do. That is my other construction site... $:-\$

onthepike · « **Reply #5 on:** July 08, 2010, 02:23:48 am »

As long as the page content doesn't force the page to scroll, the content will remain within your "box". This will apply with empty album pages without anycontent or plugins, the search and login pages and/or any other page that doesn't generate output that extends beyond the user's screen. Image example below. It's animated; download it and open it with FF or IE.

soulrebel · « **Reply #6 on:** July 08, 2010, 08:55:33 am »

Now I know what you mean. Thank you so far!

To avoid this shift I found the following solution. Just added the following snippet in the style.css of my theme.

Code: [Select]

html {
  min-height:101%;
}

Maybe therefore exists another, more elegant solution, but I guess I have the answer to my question.

Thank you!

News:

Author Topic: including {GALLERY}-token shifts layout (Read 6993 times)

soulrebel

including {GALLERY}-token shifts layout

Αndré

Re: including {GALLERY}-token shifts layout

soulrebel

Re: including {GALLERY}-token shifts layout

onthepike

Re: including {GALLERY}-token shifts layout

soulrebel

Re: including {GALLERY}-token shifts layout

onthepike

Re: including {GALLERY}-token shifts layout

soulrebel

Re: including {GALLERY}-token shifts layout