cc.tadpole.csshelper issueshttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues2018-04-25T13:46:27Zhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/1Member Directory2018-04-25T13:46:27ZKevin CristianoMember DirectoryThis extension allows for better styling of CiviCRM pages on the front end. However, it still requires the use of CiviCRM forms. The most problematic use of this is a "Directory".
Many Organizations collect data in CiviCRM and wish...This extension allows for better styling of CiviCRM pages on the front end. However, it still requires the use of CiviCRM forms. The most problematic use of this is a "Directory".
Many Organizations collect data in CiviCRM and wish to display on the front end. Currently we do this in civicrm-drupal using the Views Module, in WordPress we have to use a Search Profile. The Search Profile defaults to a table layout when results are returned, and although we have added selectors to allow this to be styled, there is push back as many percieve this to be the "old Web".
As we cannot duplicate the Drupal Views functionality, and all WP plugins we have tested that claim to be View plugins only look at default WP Tables, we are looking at creating a WordPress plugin to work in conjunction with this extension to give a better user experience.
We will use the CiviCRM api to obtain the data, and we will use standard WP functionality to display it. In stage one (Directory) we will define common fields that the plugin will return data from. These will primarily be Contact Fields (including the Address and Email Enities), but will be predefined by the plugin. For Stage One a customizable field list is out of scope. As all organizations use Custom Fields, we will provide the ability to alter this plugin based on individual organizations to include their custom fields. This will be a code change for each org, and the org will not be able to chabge the fields once set on their own.
We will allow for a search, these fields will need to be predefined as well. The API data will be returned as JSON. The plugin will provide output in standard markup (bootstrap classes preferred) that will allow styling.
Goal is to have Stage one (The Directory) complete by August 31st.
Directory - Stage OneKevin CristianoKevin Cristianohttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/9Remove `!important` from extension CSS2019-07-24T15:08:08ZDana SkallmanRemove `!important` from extension CSS@jackrabbit can we remove the `!important` from the generic extension? Adding a note to the readme that if it's needed do in the theme? From what I can see there two now:
* Line 236
```
/* force auto width on profile search option menu...@jackrabbit can we remove the `!important` from the generic extension? Adding a note to the readme that if it's needed do in the theme? From what I can see there two now:
* Line 236
```
/* force auto width on profile search option menu */
.select2-drop.select2-drop-above.select2-drop-active, .crm-container.crm-public .select2-container, .crm-container.crm-public .select2-drop{
width:auto !important;
}
```
* Line 278
```
/* 100% WIDTH option menus */
div.crm-container.crm-public .select2-container,
div.crm-container.crm-public .select2-results {
width: 100% !important;
}
```
By removing the `!important` the drop down it goes from full-widt to same-sh size as rest of fields on form:
![bzc-state-field-full-width](/uploads/2956d24c670e1514e31c3cfb5d9ea1f3/bzc-state-field-full-width.png)
![demo-not-important-full-width](/uploads/36ae03277738b55d1fc0699e3e086c3f/demo-not-important-full-width.png)JackJackhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/8CiviDiscount Section needs some CSS love2017-11-16T21:01:21ZDana SkallmanCiviDiscount Section needs some CSS loveI added a CiviDiscount to this membership page to see it https://civi47.tadpole.cc/membership/
But when discount is applied, there is text overlap and that 90s button.
![cividiscount-css-needs](/uploads/29962d2b558bc06a31277d42b0cdb69b...I added a CiviDiscount to this membership page to see it https://civi47.tadpole.cc/membership/
But when discount is applied, there is text overlap and that 90s button.
![cividiscount-css-needs](/uploads/29962d2b558bc06a31277d42b0cdb69b/cividiscount-css-needs.png)JackJackhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/7Dropdown field is wider than the rest2017-08-31T12:37:50ZDana SkallmanDropdown field is wider than the restSo now it seems the dropdown field, both in the price set area and address area is quite a bit wider than the text areas.
https://civi47.tadpole.cc/civicrm/?page=CiviCRM&q=civicrm/contribute/transact&reset=1&id=4
https://civi47.tadpol...So now it seems the dropdown field, both in the price set area and address area is quite a bit wider than the text areas.
https://civi47.tadpole.cc/civicrm/?page=CiviCRM&q=civicrm/contribute/transact&reset=1&id=4
https://civi47.tadpole.cc/donate/
See state and home fields.JackJackhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/6Select filter display squished and has extra white space2017-08-28T21:57:06ZDana SkallmanSelect filter display squished and has extra white spaceIs there a way we can make the select work better within the search filter? Depending on the site it looks really squished and always has the white space to the right. Here's a couple example screenshots, but can be seen here: https://na...Is there a way we can make the select work better within the search filter? Depending on the site it looks really squished and always has the white space to the right. Here's a couple example screenshots, but can be seen here: https://nadoi.org/education/courses-approved-for-ceus-civi/
![select-dropdown-display-white-space](/uploads/c2a299c5c4a6fe267a4af0948bbfd445/select-dropdown-display-white-space.png)
![select-dropdown-display-white-space-another-example](/uploads/8d62af1d29f818816c2a83b5783fb5d9/select-dropdown-display-white-space-another-example.png)JackJackhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/5Width display of profiles is less than full width2017-08-28T22:01:35ZDana SkallmanWidth display of profiles is less than full widthCan this be set to 100%?
```
div#crm-container {
max-width: 640px;
}
```
Since not all themes use that same width, it looks odd. Also when using full page width it just leave a lot of blank space.
Current use: https://nadoi.org/...Can this be set to 100%?
```
div#crm-container {
max-width: 640px;
}
```
Since not all themes use that same width, it looks odd. Also when using full page width it just leave a lot of blank space.
Current use: https://nadoi.org/education/courses-approved-for-ceus-civi/JackJackhttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/4Edit :focus2017-06-08T16:11:04ZTadpoleEdit :focusCaldera input fields have styles for the :focus pseudo element. This results in unwanted results. Can be viewed on https://www.seismosoc.org/publications/srl/Caldera input fields have styles for the :focus pseudo element. This results in unwanted results. Can be viewed on https://www.seismosoc.org/publications/srl/JackJack2017-06-16https://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/3Proper Loading of CSS2017-10-17T23:16:25ZKevin CristianoProper Loading of CSSCiviCRM loads the css wrong.
http://wpmaster.demo.civicrm.org/contribution-page/ and view-source:http://wpmaster.demo.civicrm.org/contribution-page/ shows that CiviCRM injects it's WHOLE HEADER as the last item before `</head>`
Exa...CiviCRM loads the css wrong.
http://wpmaster.demo.civicrm.org/contribution-page/ and view-source:http://wpmaster.demo.civicrm.org/contribution-page/ shows that CiviCRM injects it's WHOLE HEADER as the last item before `</head>`
Example:
```
<!-- CiviCRM html header -->
<script type="text/javascript">
var CRM = {"config":{"isFrontend":true,"entityRef":{"contactCreate":false},"wysisygScriptLocation":"\/wp-content\/plugins\/civicrm\/civicrm\/js\/wysiwyg\/crm.ckeditor.js","CKEditorCustomConfig":{"default":"http:\/\/wpmaster.demo.civicrm.org\/wp-content\/uploads\/civicrm\/persist\/crm-ckeditor-default.js"}}};
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery/dist/jquery.min.js?r=KLQ7A">
</script>
<script type="text/javascript">
CRM.config.creditCardTypes = {"visa":"Visa","mastercard":"MasterCard","amex":"Amex","discover":"Discover"};
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-ui/jquery-ui.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/lodash-compat/lodash.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.mousewheel.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/select2/select2.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.form.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.timeentry.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.blockUI.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/datatables/media/js/jquery.dataTables.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-validation/dist/jquery.validate.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.ui.datepicker.validation.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/Common.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/crm.ajax.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/wysiwyg/crm.wysiwyg.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/crm.wordpress.js?r=KLQ7A">
</script>
<script type="text/javascript" src="http://wpmaster.demo.civicrm.org/contribution-page/?page=CiviCRM&q=civicrm/ajax/l10n-js/en_US&r=KLQ7A">
</script>
<link href="/wp-content/plugins/civicrm/civicrm/css/crm-i.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/datatables/media/css/jquery.dataTables.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/font-awesome/css/font-awesome.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/select2/select2.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/css/civicrm.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/templates/CRM/Core/BillingBlock.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/noconflict.js?r=KLQ7A">
</script>
</head>
```
This has forced us to
A) Disable Core CiviCRM css
```php
/**
* Implements hook_civicrm_enable().
*
* @link http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_enable
*/
function csshelper_civicrm_enable() {
_csshelper_civix_civicrm_enable();
civicrm_api3('Setting', 'create', array('disable_core_css' => 1,));
}
```
B) addd civicrm.css back to admin and front end via:
````php
/*Enqueue default CiviCRM CSS in admin. Create a filter to allow themes and other plugins to overrride */
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('admin_enqueue_scripts', 'csshelper_register_admin_civicrm_styles');
};
function csshelper_register_admin_civicrm_styles() {
$tc_civi_css_admin = (plugin_dir_url('civicrm') . 'civicrm/civicrm/css/civicrm.css');
$tc_civi_css_admin = apply_filters('tc_civicss_override_admin', $tc_civi_css_admin);
wp_enqueue_style ('tad_admin_civicrm', $tc_civi_css_admin );
}
/*Enqueue default CiviCRM CSS on Front End. Do this so we can use wp_enqueue_style as opposed to the way civicrm forces its styles to load the Drupal way in WP*/
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('wp_print_styles', 'csshelper_register_default_civicrm_styles', 100);
};
function csshelper_register_default_civicrm_styles() {
$tc_civi_css_default = (plugin_dir_url('civicrm') . 'civicrm/civicrm/css/civicrm.css');
$tc_civi_css_default = apply_filters('tc_civicss_override_default', $tc_civi_css_default);
wp_enqueue_style ('tad_default_civicrm', $tc_civi_css_default );
}
/*Enqueue custom CiviCRM CSS in front end of site. Create a filter to allow themes and other plugins to overrride */
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('wp_print_styles', 'csshelper_register_civicrm_styles', 110);
};
function csshelper_register_civicrm_styles() {
$tc_ext_url = CRM_Core_Resources::singleton()->getUrl('cc.tadpole.csshelper');
$tc_civi_css = ( $tc_ext_url . 'css/tad-civicrm.css') ;
$tc_civi_css = apply_filters ( 'tc_civicss_override' , $tc_civi_css ) ;
wp_enqueue_style ('tad_civicrm', $tc_civi_css );
}
```
I have asked for this to be changed in core and failed.
TODO: Another stab at it at St Louis sprint - see if AGH and Jamie would buy in
TODO: Create Shoreditch branch so we can use the new css but load it the WP wayKevin CristianoKevin Cristianohttps://develop.tadpole.cc/extensions/cc.tadpole.csshelper/-/issues/2Create Generic civicrm.css for 4.72018-05-03T13:31:37ZKevin CristianoCreate Generic civicrm.css for 4.7using civi47.tadpole.cc create a new css file that loads the generic stylings for Civi 4.7, Can use civi46.tadpole.cc to see our current "generic styles"using civi47.tadpole.cc create a new css file that loads the generic stylings for Civi 4.7, Can use civi46.tadpole.cc to see our current "generic styles"JackJack