Author Topic: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles. (Read 2038 times)

empowerment · February 02, 2010, 02:18:24 pm

Not sure if this was from the upgrade from 2.2 to 3.0, or from 3.0 to 3.1, but the layout of my contribution pages and event pages with forms/profiles is completely screwed up when using the Drupal theme I have been using. Some fields are on top of each other, and there's a huge page gap between the intro text and the forms.

Notably, the only themes I can find with this problem are from RoopleTheme... NewsFlash & LiteJazz.

I'm posting this here because I assume the new theming approach can benefit from taking a look at why these conflict. These themes were perfectly compatible with Civi before...

Sorry I don't know enough to guess at why this is happening.

mikeney · February 02, 2010, 03:42:01 pm

After upgrading my test server, I experienced the same problem. My contribution and event pages (profiles) are not rendering properly.

I am assuming it has to do with my custom Joomla template, but don't quite know how to go about finding the cause. Any suggestions would be much appreciated!

Dave Greenberg · February 03, 2010, 11:39:21 am

Firefox's Firebug plugin is the best tool for figuring out CSS related issues (IMO). You can right click an 'Inspect' any element on the page and change the css for it dynamically (as well as see which css file is setting styles on that page element).

If you can figure out what markup / css styles in the new front-end page layouts is causing the problem - we can look at it and see if there's a general solution or whether it needs to be 'worked around' by modifying civicrm.css or your theme.

Dave Greenberg · February 04, 2010, 10:36:19 am

Mike - took a quick look at your event page. You didn't specify what the issues are - but one thing that looks 'wrong' is the big space between the event form and your footer. The footer div (<div id="footer">) has this style from your theme:

div#footer {
margin:200px 0 20px 99px;
width:100%;
}

which specifies 200px top margin. Disabling that pushes things together. This is not CiviCRM css btw.

mikeney · February 04, 2010, 01:00:50 pm

Dave & all,

By the time you looked at the page, I think I had already fixed the main problem which was the "div.section" element being rewritten by my template.css loading AFTER civicrm.css It seems to be acting fine now that I've added the #crm-container definition to my main template.css

I am going to look at your suggestion for the footer as well! Many thanks to you, Dave.

empowerment · February 11, 2010, 01:20:58 pm

Thanks, Dave, but I can't navigate through the (mess of?)
template files, css files, classes, ids, etc. to understand what's
actually going on.

I can make dumb changes with Firebug that fix individual pieces
of what's wrong, but I can't find what file I would be editing.

One example:
changing <div id="membership" class="crm-group membership-group">
to
<div id="membership" class="section intro_text-section">

Makes the membership form appear, where otherwise it was not showing up, with lots of blank vertical space.

There's clearly some problem with overlapping "label" divs and "content" divs
But I can't tell what's driving it... and that's not the only problem.

goran · February 11, 2010, 04:22:26 pm

Just a quick thought - did you empty the <drupal-root>/sites/default/files/civicrm/templates_c/* ?

empowerment · February 11, 2010, 05:12:39 pm

Yeah, I don't think this is related. I think it's probably some weird conflict between how the RoopleTheme folks style their themes hitting up against Civi's new styling system.

Dave Greenberg · February 11, 2010, 05:44:37 pm

If you can provide link(s) to the messed up pages (and a description of what's wrong) some of us MIGHT be able to provide some pointers (no guarantees of course).

Dave Greenberg · February 11, 2010, 05:46:51 pm

Also check mikeney's final comment on this thread - sounds like it might solve things:

http://forum.civicrm.org/index.php/topic,12118.0.html

empowerment · February 11, 2010, 06:02:09 pm

Wow, that did it.

Simply adding the following to my theme's style.css
file fixed the whole mess. Thanks all!

#crm-container .section {
float: none;
}

[Also, in case anyone's wondering, the patch at #14 in http://drupal.org/node/568710
fixes the problems with Drupal's civicrm_theme module & Civi 3.x, which was useful while I was
struggling with this issue]

CiviCRM Community Forums (archive)

News:

Author Topic: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles. (Read 2038 times)

empowerment

Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

mikeney

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

Dave Greenberg

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

Dave Greenberg

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

mikeney

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

empowerment

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

goran

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

empowerment

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

Dave Greenberg

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

Dave Greenberg

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.

empowerment

Re: Upgrading to 3.1 (or 3.0.4) messes up rendering of forms/profiles.