From 84b6823d4fad4175f29d92a1a28a1a4c5d3037ea Mon Sep 17 00:00:00 2001
From: jdnicholas <jdnicholas10@gmail.com>
Date: Wed, 20 Sep 2023 19:16:49 +0200
Subject: [PATCH] Update custom-css.md

Added updated code snippet for custom unsplash background images
---
 docs/en/advanced/custom-css.md | 45 ++++++++++++----------------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/docs/en/advanced/custom-css.md b/docs/en/advanced/custom-css.md
index dce535c..722f152 100755
--- a/docs/en/advanced/custom-css.md
+++ b/docs/en/advanced/custom-css.md
@@ -59,24 +59,6 @@ body .main-editor-wrapper .cm-editor{
     font-family: '<your-font-name here>', <placeholder>;
 }
 ```
-
-### Visualising Line Endings
-
-In case you want to see where your linefeeds are, you can display the pilcrow symbol (¶) at the end of your lines by using the following Custom CSS:
-
-```css
-.cm-line:not(:last-child)::after {
-  content: "¶";
-  color: #666;
-}
-```
-
-![A preview of Zettlr using above snippet](../img/custom_css_pilcrow.png)
-
-!!! warning
-
-    The example CSS Code Snippets above have been tested with v3.0.1, but the ones below haven't been updated in some time, so are unlikely to work out of the box.
-
 ### Custom Background Images
 
 With the following code, you can make your editor have a different background image everytime you start it. The images are taken from Unsplash.com, a nice site with free photos. It uses the `Source API`, which will simply spit out a different image every time the URL is visited. You can test it out by simply [visiting the page and refreshing a few times](https://source.unsplash.com/random)! Please refer to the [Unsplash Source API reference](https://source.unsplash.com/) for more options (such as using an image of the day).
@@ -88,35 +70,35 @@ With the following code, you can make your editor have a different background im
 ```css
 /* Enter your custom CSS here */
 
-#editor {
+.main-editor-wrapper .cm-editor{
     background-color: transparent;
     background-image: url('https://source.unsplash.com/random');
     background-size: cover;
     background-position: center center;
 }
 
-body #editor .CodeMirror-sizer, body #editor .CodeMirror-gutter {
+body .main-editor-wrapper .cm-editor .cm-content{
     background-color: rgba(255, 255, 255, .8);
-    height: 100%;
 }
-
-body.dark #editor .CodeMirror-sizer, body.dark #editor .CodeMirror-gutter {
-    background-color: rgba(0, 0, 0, .8);
+body .main-editor-wrapper .cm-editor{
+    background-color: rgba(255, 255, 255, .8);
 }
-
-#editor .CodeMirror {
-    background-color: transparent;
+body.dark .main-editor-wrapper .cm-editor .cm-content{
+    background-color: rgba(0, 0, 0, .8);
 }
 ```
+*Light Mode*
+![A preview of a Zettlr installation using above snippet](../img/custom_css_unsplash_light.png)
 
-![A preview of a Zettlr installation using above snippet](../img/custom_css_unsplash.png)
+*Dark Mode*
+![A preview of a Zettlr installation using above snippet](../img/custom_css_unsplash_dark.png)
 
 ### Visualising Line Endings
 
 In case you want to see where your linefeeds are, you can display the pilcrow symbol (¶) at the end of your lines by using the following Custom CSS:
 
 ```css
-.CodeMirror-line:not(:last-child)::after {
+.cm-line:not(:last-child)::after {
   content: "¶";
   color: #666;
 }
@@ -124,6 +106,11 @@ In case you want to see where your linefeeds are, you can display the pilcrow sy
 
 ![A preview of Zettlr using above snippet](../img/custom_css_pilcrow.png)
 
+!!! warning
+
+    The example CSS Code Snippets above have been tested with v3.0.1, but the ones below haven't been updated in some time, so are unlikely to work out of the box.
+
+
 ### Set a maximum width for the text
 
 If you have a large screen, you may find that lines of your text are very long.