Merge branch 'release/1.0.1'

Author: marlycormar

CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log
+All notable changes to the REDCap CSS Injector module will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [1.0.1] - 2019-04-04
+### Added
+- Add CSS Samples and 'Writing CSS for the CSS Injector' (Philip Chase)
+
+### Changed
+- Fixing REDCap minimal version on README. (Tiago Bember Simeao)
+
+
+## [1.0.0] - 2018-07-17
+### Summary
+ - Created the REDCap CSS Injector module.

README.md

@@ -21,3 +21,11 @@ The configuration form also provides an enable/disable switch for each one of yo
 If more than one style is applied to the same page, the CSS rules are applied in the order of appearance in the configuration form.
 
 ![Configuration screen](img/config.png)
+
+## Sample CSS
+
+For 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.
+
+## Writing CSS for the CSS Injector
+
+To 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.

samples/hide_reset_button.css

@@ -0,0 +1,3 @@
+.resetLinkParent {
+    visibility: hidden;
+}

samples/set_body_font.css

@@ -0,0 +1,3 @@
+body * {
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial',sans-serif !important;
+}

samples/set_text_color.css

@@ -0,0 +1,7 @@
+body * {
+    color: #666666 !important;
+}
+
+button {
+    color: #666666 !important;
+}

samples/unbold_surveys.css

@@ -0,0 +1,15 @@
+.labelrc {
+    font-weight: unset;
+}
+
+#surveytitle {
+    font-weight: unset;
+}
+
+button {
+    font-weight: unset;
+}
+
+.header.toolbar {
+    font-weight: unset;
+}