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) »
  • Discussion (deprecated) »
  • Alpha and Beta Release Testing »
  • 3.2 Release Testing »
  • stylesheet rule name is too generic, getting clobbered by CMS theme
Pages: [1]

Author Topic: stylesheet rule name is too generic, getting clobbered by CMS theme  (Read 3874 times)

SarahG (FountainTribe)

  • Ask me questions
  • ****
  • Posts: 782
  • Karma: 29
  • CiviCRM version: 4.4.7
  • CMS version: Drupal 6, Drupal 7
  • MySQL version: 5.5
  • PHP version: 5.3
stylesheet rule name is too generic, getting clobbered by CMS theme
August 28, 2010, 07:01:30 am
I am running into funky layout issues with certain themes when I have a profile in my contribution pages.  This is due to the very generic style sheet name used for profile elements.  For example: <div class="label">   <div class="content"> are using classes that are getting funky styling because "content" and "label" are used in a different manor in the theme. If I switch to a different theme, then the issue is gone.
  
Below is the snippet of HTML that I took from my contribution page with the profile.

    <div class="crm-group custom_pre_profile-group">
          <fieldset><legend>Main Contact</legend><div class="crm-section individual_prefix-section"><div class="label"><label for="individual_prefix">Individual Prefix</label></div><div class="content"><select name="individual_prefix" id="individual_prefix" class="form-select">
   <option value="">- select -</option>
   <option value="20">Bishop</option>
   <option value="12">Brother</option>
   <option value="6">Cantor</option>

   <option value="19">Cardinal</option>
   <option value="15">Deacon</option>
   <option value="4">Dr.</option>
   <option value="9">Father</option>
   <option value="7">Hazzan</option>
   <option value="17">Imam</option>

   <option value="14">Minister</option>
   <option value="10">Mother</option>
   <option value="3">Mr.</option>
   <option value="1">Mrs.</option>
   <option value="2">Ms.</option>
   <option value="16">Mullah</option>

   <option value="8">Pastor</option>
   <option value="5">Rabbi</option>
   <option value="21">Reverend</option>
   <option value="18">Shaykh</option>
   <option value="11">Sister</option>
   <option value="13">the Very Reverend</option>

</select></div><div class="clear"></div></div><div class="crm-section first_name-section"><div class="label"><label for="first_name">  First Name
     <span class="crm-marker" title="This field is required.">*</span>
</label></div><div class="content"><input maxlength="64" size="30" name="first_name" type="text" id="first_name" class="form-text big required" /></div><div class="clear"></div></div><div class="crm-section last_name-section"><div class="label"><label for="last_name">  Last Name
     <span class="crm-marker" title="This field is required.">*</span>
</label></div><div class="content"><input maxlength="64" size="30" name="last_name" type="text" id="last_name" class="form-text big required" /></div><div class="clear"></div></div><div class="crm-section phone-Primary-1-section"><div class="label"><label for="phone-Primary-1">  Phone (Primary)
     <span class="crm-marker" title="This field is required.">*</span>
</label></div><div class="content"><input maxlength="32" size="20" name="phone-Primary-1" type="text" id="phone-Primary-1" class="form-text medium required" /></div><div class="clear"></div></div></fieldset>

Which CiviCRM file do I need to update to modify this output?  I need to adjust this for several CiviCRM 3.2 sites.

Thanks,
Sarah
« Last Edit: August 28, 2010, 09:53:03 am by sgladstone »
Did I help you? Please donate to the Civi-Make-It-Happen campaign  CiviCRM for mobile devices! 

ken

  • I live on this forum
  • *****
  • Posts: 916
  • Karma: 53
    • City Bible Forum
  • CiviCRM version: 4.6.3
  • CMS version: Drupal 7.36
  • MySQL version: 5.5.41
  • PHP version: 5.3.10
Re: stylesheet rule name is too generic, getting clobbered by CMS theme
September 02, 2010, 12:47:14 am
Sarah,

You ought to be able to fix your CSS appearance issues with a change to the CSS rather than a change to the HTML.

In CSS parlance you need to use a "descendant selector". So rather than applying the style using the selector ".label" you use the selector ".crm-section .label". What this selector means is "apply this style to an element of class 'label' nested inside an element of class 'crm-section'". Because it is more 'specific' than a ".label" selector, the CSS protocol gives it preference over the ".label" styles.

You can either change css/civicrm.css or add a custom css file. I note that css/civicrm.css already has a style for ".crm-section .label" so I suspect your "funky" style is one of the other ".label" styles. Find which one is giving you grief (Firebug in Firefox is superb), and either edit the style in css/civicrm.css or add a custom CSS file with a ".crm-section .label" style.

Ken
« Last Edit: September 02, 2010, 12:53:25 am by ken »

Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Discussion (deprecated) »
  • Alpha and Beta Release Testing »
  • 3.2 Release Testing »
  • stylesheet rule name is too generic, getting clobbered by CMS theme

This forum was archived on 2017-11-26.