Added custom styling to docs

README.md

@@ -54,14 +54,20 @@ See [enhancements](https://gitlab.com/cppit/jucipp/issues?scope=all&state=opened
 ## Screenshots
 <table border="0">
 <tr>
-<td><img src="https://gitlab.com/cppit/jucipp/raw/master/docs/images/screenshot1c.png" width="380"/></td>
+<td><img src="docs/images/screenshot1c.png" width="380"/></td>
-<td><img src="https://gitlab.com/cppit/jucipp/raw/master/docs/images/screenshot2c.png" width="380"/></td>
+<td><img src="docs/images/screenshot2c.png" width="380"/></td>
 </tr><tr>
-<td><img src="https://gitlab.com/cppit/jucipp/raw/master/docs/images/screenshot3c.png" width="380"/></td>
+<td><img src="docs/images/screenshot3c.png" width="380"/></td>
-<td><img src="https://gitlab.com/cppit/jucipp/raw/master/docs/images/screenshot4b.png" width="380"/></td>
+<td><img src="docs/images/screenshot4b.png" width="380"/></td>
 </tr>
 </table>
 
+## Installation
+See [installation guide](docs/install.md).
+
+## Custom styling
+See [custom styling](docs/custom_styling.md).
+
 ## Dependencies
 * boost-filesystem
 * boost-serialization
@@ -74,9 +80,6 @@ See [enhancements](https://gitlab.com/cppit/jucipp/issues?scope=all&state=opened
 * [libclangmm](http://gitlab.com/cppit/libclangmm/) (downloaded directly with git --recursive, no need to install)
 * [tiny-process-library](http://gitlab.com/eidheim/tiny-process-library/) (downloaded directly with git --recursive, no need to install)
 
-## Installation
-See [installation guide](docs/install.md).
-
 ## Documentation
 See [how to build the API doc](docs/api.md).
 

docs/custom_styling.md

@@ -0,0 +1,64 @@
+# Custom Styling
+
+You can change the style by creating and modifying a custom style file ~/.config/gtk-3.0/gtk.css.
+
+For instance, the screenshot (background was created with the Gimp render filter Flame):
+
+<img src="images/custom_style.png" width="760"/>
+
+was made with the following ~/.config/gtk-3.0/gtk.css:
+
+```css
+.juci_window {
+  background: url("/home/eidheim/Pictures/juci_background.png");
+  background-size: 100% 100%;
+}
+
+.juci_directories * {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.juci_directories *:selected {
+  background-color: rgba(200, 200, 200, 0.6);
+}
+
+.juci_directories button * {
+  background: transparent;
+}
+
+.juci_terminal {
+  background: transparent;
+}
+
+.juci_terminal * {
+  background: transparent;
+}
+
+.juci_terminal_scrolledwindow {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.juci_notebook {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.juci_notebook * {
+  background: transparent;
+}
+
+textview.view text selection {
+  background-color: #4a90d9;
+}
+
+.juci_entry {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.juci_status_box {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.juci_status_overlay {
+  color: white;
+}
+```