From 581d7c2d2dff77169c4e2df06566fcb05a174eff Mon Sep 17 00:00:00 2001
From: AcuGIS <acugis@noreply.localhost>
Date: Thu, 28 Mar 2024 14:03:51 +0000
Subject: [PATCH] Update docs/source/css.rst

---
 docs/source/css.rst | 62 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/docs/source/css.rst b/docs/source/css.rst
index 8448db8..9f8913b 100644
--- a/docs/source/css.rst
+++ b/docs/source/css.rst
@@ -1,19 +1,47 @@
-.leaflet-popup-content > table img {
-    width: 300px;
-   }
- .leaflet-popup-content > img { /*for other leaflet maps you can add rule as well*/
-    width: 300px;
-   }
+CSS
+=======
 
 
-   .modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    pointer-events: auto;
-    background-clip: padding-box;
-    border-radius: 20px;
-    outline: 0;
-    color: black;
-}
\ No newline at end of file
+Quartz provides CSS overrides at map level.
+
+To override the default CSS, enter your CSS into the Map CSS box on the map edit page.
+
+
+Example: Image Sizing
+--------------------------------
+
+To change pop-up image sizing, you can use something like below.
+
+.. code-block:: css
+
+  .leaflet-popup-content > table img {width: 300px;}
+  .leaflet-popup-content > img { width: 300px;}
+
+
+Example: Modal Info Box
+------------------------------------------
+
+To change Modal Info Box, you can use something like below.
+
+.. code-block:: css
+
+  .modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  pointer-events: auto;
+  background-clip: padding-box;
+  border-radius: 20px;
+  outline: 0;
+  background-color: cadetblue;
+  color: #fff;
+  }
+
+
+
+There is no need to add "!important" to CSS elements as map.css is loaded last and has precendence.
+
+
+
+  
\ No newline at end of file