Hot answers tagged

14

Usually I add a section to the theme's CSS rather than editing any core files in CiviCRM. Note that there is also a "Custom CSS URL" that you can add, and you can also disable the core CiviCRM CSS if you want to. (Administer > System Settings > Resource URLs)


6

One option would be to make a special contact sub-type for this purpose. CiviCRM allows you to use a custom icon per sub-type (just pick one from the internet) which would make the contact appear special in search results, the summary screen, etc.


6

These styles change Radio buttons and checkboxes in Civi Price Sets into colored toggle buttons. Make this a separate file from your primary civi-custom.css so that these styles can be applied to individual price sets, rather than globally: i.e. for donation pages, but not for event registrations. Add the following link tag <link rel="stylesheet" type="...


6

Put your css inside {literal}{/literal} tags to prevent smarty from processing them.


5

I would guess it is likely an issue with domain name and/or HTTPS conflicts. In your civicrm.settings.php file you define a CIVICRM_UF_BASEURL which may or may not include the www or https:// on the domain name. For example, it could be: http://yourdomain.org/ https://yourdomain.org/ http://www.yourdomain.org/ https://www.yourdomain.org/ So my ...


4

If you use a custom CSS style sheet, you avoid the scenario you mention of losing modifications to your CSS upon upgrade. From the top menu, go to Administer > System Settings > Resource URLS and use the Custom CSS URL field. Its help text reads: You can modify the look and feel of CiviCRM by adding your own stylesheet. For small to medium sized ...


4

There is a file css/civicrm.css within your CiviCRM codebase, and that's what determines the layout here, but you should not edit that. Instead, you have two good options for writing CSS that overrides the default CiviCRM CSS: Edit your site's theme. Theme CSS will take effect within CiviCRM forms. Create a custom CSS file. Put your file somewhere that ...


4

What CMS are you using? In Drupal, an easy way to do this would be to add a Block, shown conditionally by role, containing your css.


4

The custom css file do load on every page of civicrm, even the pop ups. Note that the elements in the ajax contains different ids and classes(mostly starts from ui-**) compare to page view. So you need to redefine the css for them on your custom file.


3

We've implemented something similar ("VIP Contacts") for an organisation who wanted to restrict access to VIP supporters. This was done via ACLs, so regular volunteers weren't able to see those contacts at all. The code used to do this ended up as the Wiki example of custom ACL restrictions via hook_civicrm_aclWhereClause - that same org had need to ...


3

Do you see &snippet=1 in your contribute page URL? That parameter can be used to deactivate the theme on a CiviCRM page. Eg - CiviCRM demo donate page as per normal & then without theme CiviCRM profile page as normal & same without theme If that parameter is present in the link to your contribution page, remove it and see if this restores the ...


3

Some of those files should exist in the 4.7.15 filesystem; others shouldn't. The question is why those files are being called at all. Most likely, you have an "HTML Snippet" somewhere in Drupal - perhaps a "sign up for our website" block or similar. HTML snippets really should be removed if possible - but if that's not doable, you should generate a new ...


3

There was a commit that fixed css for shoreditch theme probably that might have caused the regression in Joomla. Can you try to replace the code from the commit and see if it works? If so I can file a issue and submit the patch for regression.


3

I can confirm that restoring the z-index that was removed in root/administrator/components/com_civicrm/civicrm/css/joomla.css corrects this issue. The rest of the removed code makes no difference. This works for me: ul#civicrm-menu { z-index: 1; position: relative;}


3

You might be able to do it with css but I might use jquery instead: {literal} <script type="text/javascript"> CRM.$(function($) { $('#s2id_groups').hide(); }); </script> {/literal} The problem with css might also be that you don't have a <style type="text/css"> tag around your css?


3

It's best to not edit the files directly, but to create your own file. Otherwise it will get overwritten with each upgrade you do. In the version I'm using, I can set the custom CSS file here: /civicrm/admin/setting/url?reset=1 I use the "inspect" option in Chrome to see what CSS is being applied, then I copy it into my custom css file, and edit it.


2

The width for Select2 fields is set as an inline style to the element itself. So, to override the inline width, you'd have to use !important in your CSS. For reference: https://stackoverflow.com/q/16813220


2

To use the native datepicker of the mobile device, the field needs to have type="date". So your code to disable the datepicker popup and use the native device's instead might look like: (function($) { $.ui.datepicker.prototype.options.focus = "button"; $(document).on('crmLoad', function($region) { $('input.dateplugin', $region).each(function() { ...


2

It might be simpler to just tweak the css to apply only to the admin pages using body.wp-admin (there may be more specific CiviCRM or WP classes you can use).


2

This is the correct way to disable civicrm.css on the front end. Put this in the template.php file of your theme: function shriver_css_alter(&$css) { unset($css['sites/all/modules/civicrm/css/civicrm.css']); } Manually enter the path to the css. When I used drupal_get_path('module','civicrm'), it would output sites/all/modules/civicrm/drupal/css/...


2

I edited the custom CSS in the template with some code to change the form label color to black.


2

It looks like you have WP installed in it's own directory as per https://codex.wordpress.org/Giving_WordPress_Its_Own_Directory The short answer is that this is not (yet) supported by CiviCRM. We've been documenting it here: https://wiki.civicrm.org/confluence/display/CRM/WordPress+installed+in+its+own+directory+issues The issue is tracked here : https://...


2

Render all CiviCRM public pages in a responsive CMS theme (eg a bootstrap one) and then add some css for the labels - I typically position the labels above the input boxes (on form) and above the answers (on confirm and thank you) for small screen sizes.


2

You can use the body_class filter, query CiviCRM's state and then add suitably named classes: add_filter( 'body_class', 'my_civi_add_body_classes' ); /** * Add classes to body element if on CiviCRM basepage. * * @param array $classes The existing body classes * @return array $classes The modified body classes */ function my_civi_add_body_classes( $...


2

Following my comment - You need to provide existing path in the resource url and directories page. Click the help icon to see the values of diferent global variables that you can make use of(civicrm.files, etc). You can override these values in civicrm.setting.php file according to your paths. More info at https://civicrm.stackexchange.com/a/19498/245


2

I've discovered that the Shoreditch README states that "At the moment the theme is being developed to work only in Drupal." The CiviCRM extension page for Shoreditch, however, states, "CMS Compatibility: CMS Independent (CiviCRM-native)". Shoreditch, however, is still required for Mosaico, which does work correctly with Joomla. So, apparently, my ...


2

There are 3 solutions on how to achieve this 1 - Adding Javascript in tpl file as mentioned by Demerit {literal} <script type="text/javascript"> CRM.$(function($) { $('.crm-report-form-block select[name="groups"]').closest('td').hide(); }); </script> {/literal} 2 - Adding a code using buildForm hook in an extension function ...


2

This is a core issue (not specific to Shoreditch) and there is an issue with some discussion related to it here: https://lab.civicrm.org/dev/core/issues/378 To tag on to your specific point about Shoreditch's CSS, I have found this to be problematic for the display reasons you mention (conflicts with CSS from the front end theme) but also for performance ...


2

You will need to add your style sheet inside {literal} when adding stylesheet in Message template. For example {literal} <style> your code </style> {/literal}


2

Adding as an answer for future references #crm-container.crm-public .price-set-row input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;} #crm-container.crm-public .price-set-row input.crm-form-checkbox + label{display: inline-block;text-align:left; padding: 8px 8px; cursor: pointer;border: 1px solid #e0e0e0;width: -webkit-fill-...


Only top voted, non community-wiki answers of a minimum length are eligible