Hot answers tagged

14 votes
Accepted

Can I use a custom style sheet (CSS) for user modifications?

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 ...
user avatar
6 votes

Kid gloves and hotspot flagging

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 ...
user avatar
  • 16.2k
6 votes
Accepted

Styling Contribution pages with buttons

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 ...
user avatar
6 votes
Accepted

How to modify System workflow message with a modern look Header?

Put your css inside {literal}{/literal} tags to prevent smarty from processing them.
user avatar
  • 17.9k
5 votes

Why would my CiviCRM CSS file not load correctly?

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 ...
user avatar
5 votes
Accepted

Editing RelationshipSelector.tpl section of a UserDashboard

The section is generated using the datatable, and data is called using ajax method. You could use ajaxsuccess to call after the data is retrieved from ajax.
user avatar
4 votes
Accepted

How can I preserve changes to civicrm.css when civicrm is updated?

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 ...
user avatar
4 votes

civicrm theming

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 ...
user avatar
  • 7,357
4 votes
Accepted

Edit button and allowing some users to edit subtype

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.
user avatar
  • 16.2k
4 votes
Accepted

How to load custom css into admin popup boxes?

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 ...
user avatar
4 votes

Adding CSS to extra tpl file

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-...
user avatar
3 votes

Kid gloves and hotspot flagging

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 ...
user avatar
3 votes

How do I disable civicrm.css on public pages in Drupal?

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/...
user avatar
  • 181
3 votes

The contribution payment verification page has lost the site theme styling

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 ...
user avatar
3 votes
Accepted

What are all these missing CiviCRM CSS and jQuery files?

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 - ...
user avatar
3 votes

Anyone else seeing an overlapping admin/civi menu bug with Joomla 3.8.13 and CiviCRM 5.6.0?

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 ...
user avatar
3 votes
Accepted

Anyone else seeing an overlapping admin/civi menu bug with Joomla 3.8.13 and CiviCRM 5.6.0?

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. ...
user avatar
  • 549
3 votes
Accepted

Adding CSS to extra tpl file

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 ...
user avatar
  • 17.9k
3 votes

CiviPledge custom styling

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: /...
user avatar
2 votes

Setting Select2 widths

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/...
user avatar
2 votes
Accepted

How to disable datepicker UI for a mobile device

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($) {...
user avatar
  • 16.2k
2 votes

How do I disable custom css on frontend with Wordpress?

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).
user avatar
  • 1,004
2 votes

Contribution form looks different on live site

I edited the custom CSS in the template with some code to change the form label color to black.
user avatar
2 votes
Accepted

404 errors for loading CSS on Event pages (Wordpress)

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 ...
user avatar
2 votes
Accepted

Contribution pages look strange on mobile

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 ...
user avatar
2 votes
Accepted

HTML & Event Pages: Unspecific IDs and Classes at the top

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 ...
user avatar
2 votes
Accepted

After upgrade to 4.7.23., icons do not show (Civicrm on WordPress) (SOLVED)

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....
user avatar
2 votes
Accepted

back-end checkboxes not displaying after switch to Shoreditch

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 ...
user avatar
2 votes
Accepted

Can you restrict Shoreditch from injecting CSS on Public pages with CiviCRM content?

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 ...
user avatar
2 votes

When adding CSS in civimail (under source) getting an error when trying to see or send test

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

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