Uploaded image for project: 'CiviCRM'
  1. CiviCRM
  2. CRM-11567

Use .crm-container instead of #crm-container when possible

    Details

    • Type: Task
    • Status: Done/Fixed
    • Priority: Minor
    • Resolution: Fixed/Completed
    • Affects Version/s: 4.2.0
    • Fix Version/s: 4.3.0
    • Component/s: Core CiviCRM
    • Labels:
      None

      Description

      Because popups, blocks, and some snippets are outside the #crm-container div they do not get any of our css applied to it.

      Proposed solution:
      -On the main civicrm template that generates the crm-container div, add the class crm-container (without removing the id)
      -In civicrm.css, change some instances of #crm-container to div.crm-container as necessary

      Because we don't remove the id #crm-container from our markup, anyone who targets it in their custom css files will not be affected.

      Note: css selectors containing ids always trump those which do not, so we need to be careful when changing our css - removing the id from the selector may cause some CMS styles to override ours. For now we'll only change those which are actually needed for specific popups. If necessary we can use the following verbose but effective pattern in our stylesheet to cover both the main div and other crm-containers:

      #crm-container .messages,
      .crm-container .messages

      { ... }

        Attachments

        1. ContactTabs4.2.PNG
          34 kB
          David Greenberg
        2. Screen Shot 2013-01-15 at 3.47.27 PM.PNG
          58 kB
          David Greenberg

          Issue Links

            Activity

              People

              • Assignee:
                colemanw Coleman Watts
                Reporter:
                colemanw Coleman Watts
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: