CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Vertical Alignment of Labels
Pages: [1]

Author Topic: Vertical Alignment of Labels  (Read 1360 times)

kammac

  • Guest
Vertical Alignment of Labels
October 18, 2009, 07:20:54 pm
I can't seem to get the labels on the contribution page to align with the forms. They should be aligned to the top of the table/cell, but they are aligning in the middle.

I found this post: http://forum.civicrm.org/index.php/topic,8703.msg37583.html
But that did not solve my issue at all.

It seems to be <td class="label"> that need to be aligned, but I  just can't figure it out. I am working with the standalone version.
« Last Edit: October 18, 2009, 07:41:23 pm by kammac »

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: Vertical Alignment of Labels
October 19, 2009, 11:27:44 am
Firebug (FireFox extension) is the most useful tool for debugging these kind of things. You can "Inspect Element" and see what CSS styles are affecting it. And then u can modify the style in Firebug and see what's needed to correct problems.

If the site is public, you could also post a link and perhaps others can help you.
Protect your investment in CiviCRM by  becoming a Member!

kammac

  • Guest
Re: Vertical Alignment of Labels
October 19, 2009, 06:17:57 pm
I have firebug and am very familiar with css programming/styling, but changing any of the css stylesheets to reflect a top vertical alignment does nothing. This is the standalone civicrm, so the contribution pages run directly from the civicrm install and not within the remainder of the sites css. I can seem to find the proper civicrm page to modify the css within the css folder (and my custom css files do nothing to the alignment). I went so far as to change the vertical alignment from middle to top on every single css civirm file I could fine, adjusted my sites' css and added custom css files. Nothing changes the alignment. I know which tag to change, i just can't figure out where to change it!

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: Vertical Alignment of Labels
October 19, 2009, 06:34:25 pm
Hmm - Firebug tells you which line of which css file controls the styling of each element so I'm not sure why this is so mysterious ?? You can see which css files are included in your standalone contribution page from view source. Based on looking at the code which does this (templates/CRM/common/standalone.tpl) - the only css files in play are css/civicrm.css and css/standalone.css and potentially a custom css file which you can configure via Admin CiviCRM >> Global Settings >> Resource URLs.

Protect your investment in CiviCRM by  becoming a Member!

kammac

  • Guest
Re: Vertical Alignment of Labels
October 20, 2009, 05:18:05 pm
I am using the standalone contribution page as an embedded snippet, so that it integrates with the remainder of the site. Looking at the source file, no CSS file is linked. And firebug simple says "This element has no style setting." So it remains a mystery.

I have changed both css/civicrm.css and css/standalone.css and tried a custom css file. There just doesn't seem to be any CSS style sheets being applied to the live contribution form. I have also tried adding elements to my sites main css page to no avail.








Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Vertical Alignment of Labels
October 20, 2009, 07:30:50 pm

note that contribution is a set of 3 pages, so not sure if embedding will work. you might want to check and see if the functionality works before spending a lot of time on the CSS issues

lobo
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

kammac

  • Guest
Re: Vertical Alignment of Labels
October 20, 2009, 08:21:25 pm
It works fine, and has been for a few weeks. I found the embedding instructions somewhere within the standalone documentation. You simply use the url of the live contribution page with &snippet=1 (or whatever contrib page #)  I have two of these live--one a campaign contribution page and one a volunteer sign-up form) with volunteers as a member registration group.

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Vertical Alignment of Labels
October 20, 2009, 08:54:13 pm

snippet=1 basically bypasses the entire header part and only gives you the page content, hence u dont see the stylesheets

u'll probably have to hardcode the stylesheets in your surronding html

lobo
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

kammac

  • Guest
Re: Vertical Alignment of Labels
October 20, 2009, 08:57:09 pm
It's not working on a hard code either unfortunately. Nothing seems to add css to those pages. I've even tried java to force css on the embedded content with no change. It's driving me a bit crazy.  :)
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Vertical Alignment of Labels

This forum was archived on 2017-11-26.