theme help please!
shrill - April 24, 2008 - 01:11
Hi all.
I have an issue with a theme I am developing. It all looks good, but when I have a form (such as a Civicrm form), the title is near the top in the centre panel, with the rest of the form down below my two menus and taking up the whole area. I'm thinking that this is something to do with my page.tpl.php.and I've probably done something stupid like miss a div or something but I've looked at it about 100 times and still can't figure it out. I'm still relatively new to php, so I'd really appreciate any help that you can provide!
Thoughts?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
</head>
<body id="body">
<div align="center" id="fullpage"><br />
<div id="container">
<div id="header-area">
<div id="logo">
<img src="<?php print $logo ?>"" />
</div>
<div id="title2">
<?php print $site_name ?></div>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<div id="header">
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
</div>
</div>
<div id="panel">
<?php if ($sidebar_right): ?>
<div id="right">
<?php print $sidebar_right ?>
</div>
<?php endif; ?>
<?php if ($sidebar_left): ?>
<div id="left">
<?php print $sidebar_left ?>
</div>
<?php endif; ?>
<div id="main"><br>
<div id="breadcrumb">
<?php print $breadcrumb ?>
</div>
<h2><?php print $title ?></h2>
<?php print $content ?>
</div>
</div>
<div id="footer">
<?php print $footer_message ?>
</div>
</div>
</div>
<br />
</body>
</html>Thanks!
Can you show us the page and the HTML source?
Maybe someone else can tell from what you've posted, but it would be easier to diagnose the problem if we could see a screenshot of the problem and the fully rendered HTML source (i.e., the source you get after Drupal outputs the page. Is there a page you can link to? Or can you paste or upload the HTML here?
Certainly...
no link yet as it is on my local machine, but here you go. This is the "CiviCRM homepage" within the admin console. Not sure how to post an image here....
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CiviCRM Home | The Association</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/css/civicrm.css);</style>
<style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/css/skins/aqua/theme.c...);</style>
<script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true, usePlainJson: true" ></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dojo/commonWidgets.js"></script><style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dijit/th...);</style><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/calendar.js"></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/lang/calendar-lang.php?en_US"></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/calendar-setup.js"></script>
<link rel="shortcut icon" href="/drupal/misc/favicon.ico" type="image/x-icon" />
<style type="text/css" media="all">@import "/drupal/modules/cck/content.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/event/event/event.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/forum/forum.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/cck/fieldgroup.css";</style>
<style type="text/css" media="all">@import "/drupal/themes/aaswg-rose/style.css";</style>
</head>
<body id="body">
<div align="center" id="fullpage"><br />
<div id="container">
<div id="header-area">
<div id="logo">
<img src="/drupal/files/aaswg-rose_logo.gif"" />
</div>
<div id="title2">
</div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/css/civicrm.css);</style>
<style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/css/skins/aqua/theme.c...);</style>
<script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true, usePlainJson: true" ></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dojo/commonWidgets.js"></script><style type="text/css">@import url(http://localhost/drupal/sites/all/modules/civicrm/packages/dojo/dijit/th...);</style><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/calendar.js"></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/lang/calendar-lang.php?en_US"></script><script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/calendar-setup.js"></script>
<link rel="shortcut icon" href="/drupal/misc/favicon.ico" type="image/x-icon" />
<style type="text/css" media="all">@import "/drupal/modules/cck/content.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/event/event/event.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/forum/forum.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/drupal/modules/cck/fieldgroup.css";</style>
<style type="text/css" media="all">@import "/drupal/themes/aaswg-rose/style.css";</style>
<div id="header">
<ul class="links primary-links"><li class="first last 1-1"><a href="/drupal/?q=admin/build/menu" class="1-1">Edit primary links</a></li>
</ul> </div>
</div>
<div id="panel">
<div id="right">
<div id="block-search-0" class="block block-search">
<div class="top"> </div>
<div class="content"><form action="/drupal/?q=search/node" method="post" id="search-block-form">
<div><div class="container-inline"><div class="form-item">
<input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="bc22eeae042b421a06bf5a24abbb09c3" />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form" />
</div>
</div></form>
</div>
<div class="bottom"> </div>
</div>
<div id="block-menu-125" class="block block-menu">
<div class="top"> </div>
<h2>Latest News</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=/link">Link 1</a></li>
</ul>
</div>
<div class="bottom"> </div>
</div>
<div id="block-menu-136" class="block block-menu">
<div class="top"> </div>
<h2>Blogs</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=/blog1">Blog 1</a></li>
<li class="leaf"><a href="/drupal/?q=/blog2">Blog 2</a></li>
</ul>
</div>
<div class="bottom"> </div>
</div>
<div id="block-user-1" class="block block-user">
<div class="top"> </div>
<h2>Create</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=blog/1">My blog</a></li>
<li class="leaf"><a href="/drupal/?q=civicrm">CiviCRM</a></li>
<li class="leaf"><a href="/drupal/?q=control_panel">Control Panel</a></li>
<li class="leaf"><a href="/drupal/?q=logout">Log out</a></li>
<li class="leaf"><a href="/drupal/?q=user/1">My account</a></li>
<li class="collapsed"><a href="/drupal/?q=node/add">Create content</a></li>
<li class="collapsed"><a href="/drupal/?q=admin">Administer</a></li>
</ul>
</div>
<div class="bottom"> </div>
</div>
</div>
<div id="left">
<div id="block-menu-141" class="block block-menu">
<div class="top"> </div>
<h2>AASWG</h2>
<div class="content">
<ul class="menu">
<li class="expanded"><a href="/drupal/?q=node/3">About</a>
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=node/5">Board of Directors</a></li>
<li class="leaf"><a href="/drupal/?q=node/21">Chapters</a></li>
<li class="leaf"><a href="/drupal/?q=node/22">Commission</a></li>
<li class="collapsed"><a href="/drupal/?q=node/7" title="Committees">Committees</a></li>
<li class="leaf"><a href="/drupal/?q=node/6" title="Contact information">Contact</a></li>
<li class="leaf"><a href="/drupal/?q=node/4" title="Mission Statement for AASWG">Mission Statement</a></li>
<li class="collapsed"><a href="/drupal/?q=node/23">Publications</a></li>
<li class="collapsed"><a href="/drupal/?q=node/11" title="Symposia">Symposia</a></li>
</ul>
</li>
<li class="leaf"><a href="/drupal/?q=event">Calendar</a></li>
<li class="leaf"><a href="/drupal/?q=node/25">FAQ</a></li>
<li class="leaf"><a href="/drupal/?q=membership">Join AASWG</a></li>
<li class="leaf"><a href="/drupal/?q=node/26">Store</a></li>
</ul>
</div>
<div class="bottom"> </div>
</div>
<div id="block-menu-118" class="block block-menu">
<div class="top"> </div>
<h2>Communicate</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=forum">Forums</a></li>
<li class="leaf"><a href="/drupal/?q=node/24">Join Discussion</a></li>
</ul>
</div>
<div class="bottom"> </div>
</div>
</div>
<div id="main"><br>
<div id="breadcrumb">
<div class="breadcrumb"><a href="/drupal/">Home</a> » <a href="/drupal/?q=civicrm">CiviCRM</a></div>
</div>
<h2>CiviCRM Home</h2>
<div id="crm-container" lang="en" xml:lang="en">
<script type="text/javascript" src="http://localhost/drupal/sites/all/modules/civicrm/js/Common.js"></script>
<div id="recently-viewed">
<ul>
<li>Recently Viewed:</li>
<li><a href="http://localhost/drupal/index.php?q=civicrm/contact/view&reset=1&cid=102"><img src="http://localhost/drupal/sites/all/modules/civicrm/i/contact_ind.gif" alt="Individual" /></a><a href="http://localhost/drupal/index.php?q=civicrm/contact/view&reset=1&cid=102">info@belkanto.ca</a></li>
<li><a href="http://localhost/drupal/index.php?q=civicrm/contact/view&reset=1&cid=68"><img src="http://localhost/drupal/sites/all/modules/civicrm/i/contact_ind.gif" alt="Individual" /></a><a href="http://localhost/drupal/index.php?q=civicrm/contact/view&reset=1&cid=68">Ms Jennifer F Jameson Sr</a></li>
</ul>
</div>
<div id="printer-friendly"><a href="http://localhost/drupal/index.php?q=civicrm/dashboard&q=civicrm/dashboard&snippet=2" title="Printer-friendly view of this page."><img src="http://localhost/drupal/sites/all/modules/civicrm/i/print_preview.gif" alt="Printer-friendly view of this page." /></a></div>
<div class="spacer"></div>
<!-- .tpl file invoked: CRM\Contact\Page\View\DashBoard.tpl. Call via form.tpl if we have a form in the page. -->
<table class="no-border">
<tr>
<td>
<div>
<fieldset>
<legend>Activities</legend>
<div class="messages status">
There are no Activities to display. </div>
</td>
<td>
<fieldset><legend>Quick Search</legend>
<form action="http://localhost/drupal/index.php?q=civicrm/contact/search/basic&reset=1" method="post">
<div class="form-item">
<input type="hidden" name="contact_type" value="" />
<input type="text" name="sort_name" class="form-text required eight" value="" />
<input type="submit" name="_qf_Basic_refresh" value="Search" class="form-submit" />
<br />
<a href="http://localhost/drupal/index.php?q=civicrm/contact/search/advanced&reset=1" title="Go to Advanced Search">» Advanced Search</a>
</div>
</form>
</fieldset>
<fieldset><legend>Menu</legend>
<div class="menu">
<ul class="indented">
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/dashboard&reset=1" class="active">CiviCRM Home</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/contact/search/basic&reset=1" >Find Contacts</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/group&reset=1" >Manage Groups</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/import&reset=1" >Import</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/contribute&reset=1" >CiviContribute</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/mailing&reset=1" >CiviMail</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/member&reset=1" >CiviMember</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/event&reset=1" >CiviEvent</a></li>
<li class="collapsed"><a href="http://localhost/drupal/index.php?q=civicrm/grant&reset=1" >CiviGrant</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/admin&reset=1" >Administer CiviCRM</a></li>
</ul>
</div>
</fieldset>
<fieldset><legend>Shortcuts</legend>
<div class="menu">
<ul class="indented">
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/contact/add&ct=Individual&reset=1">New Individual</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/contact/add&ct=Organization&reset=1">New Organization</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/contact/add&ct=Household&reset=1">New Household</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/group/add&reset=1">New Group</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/user&reset=1">My Contact Dashboard</a></li>
<li class="leaf"><a href="http://localhost/drupal/index.php?q=civicrm/activity&action=add&reset=1&context=standalone">New Activity</a></li>
</ul>
</div>
</fieldset>
</td>
</tr>
</table>
<div class="footer" id="record-log">
<span class="col1"> CiviCRM ID: 102</span>
</div>
<div class="footer" id="civicrm-footer">
Powered by CiviCRM 2.0.0. CiviCRM is openly available under the <a href='http://www.gnu.org/licenses/agpl-3.0.html'>GNU Affero General Public License (GNU AGPL)</a>. <a href='http://civicrm.org/download'>Download source</a>. <a href='http://issues.civicrm.org/jira/browse/CRM?report=com.atlassian.jira.plugin.system.project:roadmap-panel'>View issues and report bugs</a>. <a href='http://wiki.civicrm.org/confluence//x/KSg'>Online documentation</a>.</div></div>
</div>
</div>
<div id="footer">
©2007, - Site design by <a href="http://www.me.com>me</a>
</div>
</div>
</div>
<br />
</body>
</html>
wait...here is a link to the image
http://s291.photobucket.com/albums/ll318/shrill_bucket/?action=view&curr...
Is crm-container too wide?
It looks to me like your crm-container div is too wide for the center column, and the browser is forcing it below the menus to give it space to spread out. This might be because crm-container is inheriting a larger width or because something inside crm-container is forcing crm-container to be too wide. Either way, the solution is to constrain the maximum width of crm-container.
One way to test this hypothesis is to add a line like the following to the end of your stylesheet:
#crm-container { width: 200px; max-width: 200px; }If that brings the form back up the page, then you can work from there to find a good width for crm-container.
One difference I notice between your source and the source of the demo page at http://drupal.demo.civicrm.org/civicrm/dashboard?reset=1 is that you're lacking the following code prior to your CiviCRM header:
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">The demo page is using the Garland theme, and you're not, so this might not be relevant, but I think Garland uses those divs to squeeze the center column between the two sidebars. You could try copying the relevant code over from Garland, but remember to include the closing div tags before the footer.
hmmm
My initial attempts at your suggestions haven't done much. Thanks though (both very good ideas). I'll give them another shot tomorrow.
Anyone else?
Sorry it didn't work. Anyone else have any ideas?
well it is possible that I didn't do it correctly...
but I tried again today and no luck.
Hacking your way to a solution
As a way to figure out what's going on (since it doesn't look like anyone else has any ideas), I'd try replacing <?php print $content; ?> in your template with increasingly large bits of the rendered HTML so that you can get a better grip on where the problem lies.
For starters, just replace <?php print $content; ?> with something like:
<div id="crm-container" lang="en" xml:lang="en">foo!</div>and see if you get the same problem. If so, then we can concentrate on that div itself. If not, then you can start adding pieces of the rendered content into the div bit by bit until the problem reappears.
Thanks...
still working on this using your suggestions. It has come to my attention that this is happening with other "forms" too: e.g. content creation forms etc. and I'm wondering if it may have to do with the order I have things in my page.tpl.php. Is there a particular order that works better than others?
Thanks again,
Shrill
I haven't had time to look
I haven't had time to look through the entire documentation. But could you have duplicated the class or id names and caused a different format to take control (i.e. one style sheet says to center class logo the other style sheets says float left class logo.)
--
Adiz
oooh, a very good question!
I'll take a look. Thanks!
The solution
Okay, so I went back into my page.tpl first and redid that: I think I had missed a closing div but I'm not absolutely positive. Then I started going through the CSS bit by bit, changing the background colours so that I could figure out which div was doing what. Put margins into the "centre column" div ("main") so that it would be properly placed and removed the 100% width. Then put a left float into that div and also #node-form and #crm-container which fixed the issue. Then I increased the size of the "main" div.
Thanks again everyone for your help!
Shrill