{"id":19713374,"url":"https://github.com/ctsit/redcap_css_injector","last_synced_at":"2025-04-29T18:31:12.358Z","repository":{"id":40005312,"uuid":"141312467","full_name":"ctsit/redcap_css_injector","owner":"ctsit","description":"Allow REDCap administrators to inject CSS into surveys and data entry forms.","archived":false,"fork":false,"pushed_at":"2024-05-24T15:42:30.000Z","size":295,"stargazers_count":14,"open_issues_count":1,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-05T18:52:09.528Z","etag":null,"topics":["redcap","redcap-external-module","redcap-repo"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctsit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-17T15:57:15.000Z","updated_at":"2024-08-18T06:18:48.000Z","dependencies_parsed_at":"2024-11-11T23:16:03.682Z","dependency_job_id":null,"html_url":"https://github.com/ctsit/redcap_css_injector","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctsit%2Fredcap_css_injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctsit%2Fredcap_css_injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctsit%2Fredcap_css_injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctsit%2Fredcap_css_injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctsit","download_url":"https://codeload.github.com/ctsit/redcap_css_injector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251559855,"owners_count":21609088,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["redcap","redcap-external-module","redcap-repo"],"created_at":"2024-11-11T22:21:31.791Z","updated_at":"2025-04-29T18:31:11.556Z","avatar_url":"https://github.com/ctsit.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REDCap CSS Injector\nAllows administrators to inject CSS into survey pages, data entry pages, and every other project page.\n\n[![DOI](https://zenodo.org/badge/141312467.svg)](https://zenodo.org/badge/latestdoi/141312467)\n\n\u003e **Important:** Version 2.0.0 of this module is a breaking change. If you are upgrading from a version prior to 2.0.0, please review this [section](#migration-from-version-1xx-to-200)  of the README for changes to the configuration. If you are new to this module, you can ignore this section.\n\n## Prerequisites\n- REDCap \u003e= 8.0.3\n\n## Easy Installation\n- Obtain this module from the Consortium [REDCap Repo](https://redcap.vanderbilt.edu/consortium/modules/index.php) from the Control Center.\n\n\n## Manual Installation\n- Clone this repo into `\u003credcap-root\u003e/modules/redcap_css_injector_v\u003cversion_number\u003e` .\n- Go to **Control Center \u003e Manage External Modules** and enable REDCap CSS Injector.\n\n## Configuration\nAccess **Manage External Modules** section of your project, and then click on CSS Injector configuration button.\n\nIn the configuration form, you can either create a global style for your project or define multiple styles for different contexts. Each context is defined by choosing a list of forms/instruments and/or limiting the scope to surveys or data entries or other pages in the project. You can also define a style for all pages in the project by selecting all three checkboxes.\n\nThe configuration form also provides an enable/disable switch for each one of your styles. Make sure to enable your styles.\n\nIf more than one style is applied to the same page, the CSS rules are applied in the order of appearance in the configuration form.\n\n![Configuration screen](img/config_v2.png)\n\n\n## Migration from version 1.X.X to 2.0.0\n\nIf you are upgrading from a version prior to 2.0.0, you will need to reconfigure your styles. To make this easier, we have a MySQL query that will help you migrate your current styles to the new configuration format. Your administrator will need to run this query on the REDCap database.\n\n\n```sql\nSTART TRANSACTION;\n\nCREATE UNIQUE INDEX redcap_external_module_settings_UK1\non redcap_external_module_settings (external_module_id, project_id, `key`);\n\nINSERT INTO redcap_external_module_settings (external_module_id, project_id, `key`, type, value)\nSELECT \n    s.external_module_id,\n    s.project_id,\n    k.`key`,\n    'json-array',\n    (\n        SELECT \n            JSON_ARRAYAGG(\n                CASE\n                    WHEN JSON_UNQUOTE(JSON_EXTRACT(s2.value, CONCAT('$[', jt.idx - 1, ']'))) = 'all' THEN CAST(TRUE AS JSON)\n                    WHEN JSON_UNQUOTE(JSON_EXTRACT(s2.value, CONCAT('$[', jt.idx - 1, ']'))) = k.`key` THEN CAST(TRUE AS JSON)\n                    ELSE CAST(FALSE AS JSON)\n                END\n            )\n        FROM \n            redcap_external_module_settings s2\n        CROSS JOIN JSON_TABLE(\n            s2.value,\n            '$[*]' COLUMNS(\n                idx FOR ORDINALITY\n            )\n        ) AS jt\n        WHERE \n            s2.external_module_id = s.external_module_id\n            AND s2.project_id = s.project_id\n            AND s2.`key` = 'style_type' \n    ) AS new_value\nFROM \n    redcap_external_module_settings s\nCROSS JOIN (\n    SELECT 'survey' AS `key`\n    UNION ALL \n    SELECT 'data_entry' AS `key`\n    UNION ALL \n    SELECT 'other' AS `key`\n) k\nWHERE \n    s.`key` = 'style_type'\n    AND s.external_module_id IN (\n        SELECT external_module_id\n        FROM redcap_external_modules\n        WHERE directory_prefix = 'redcap_css_injector'\n    )\nGROUP BY \n    s.external_module_id, \n    s.project_id, \n    k.`key`;\n\nDROP INDEX redcap_external_module_settings_UK1 on redcap_external_module_settings;\n\nCOMMIT;\n```\n\n\u003e **Note:**\nThis query requires MySQL 8.0 or later. \n\nIf you run this query shortly before upgrading CSS Injector, the migrated settings will be in place for the module upgrade. The module will start working correctly immediately. You can run the script after the module upgrade, but the module will have no effect until you either run the settings migration script or set the _Apply to survey pages / data entry pages / other project pages_ checkboxes manually.\n\nThe query should be run in against the MySQL database of your REDCap instance. After running the query, you should see a message saying that some rows were inserted. The module will start working immediately. In the project home page go to the **External Module \u003e Manage** and click on the REDCap CSS Injector configure button. You should see your styles migrated to the new configuration format.\n\n## Sample CSS\n\nFor CSS ideas you could try in CSS injector see the [sample CSS files](samples/). These files were tested against surveys in REDCap 8.7.0. Please verify they work as desired in your REDCap before using them in production. Each is dependent on REDCap's style names. As those style names can change over time, they probably won't hold value forever.\n\n## Writing CSS for the CSS Injector\n\nTo learn how to craft your own CSS for use in REDCap CSS Injector, you'll need to use the developer tools for your web browser. Chrome supports the [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/).  Firefox supports [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools).  Using one of these tools you can access a REDCap page and inspect an element of the page you want to change. The dev tools allow you to see what CSS controls an element's appearance. You can change the values you think might give you the effect you want and review the result in real time on that page.  Once you get the result you like, copy that CSS, trim it down to the part you care about, and test it in CSS inspector.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctsit%2Fredcap_css_injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctsit%2Fredcap_css_injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctsit%2Fredcap_css_injector/lists"}