adding more structure and id's to the container customization settings menu for more control later

startpage.html

@@ -672,7 +672,8 @@
         document.getElementById("addContainerForm").insertAdjacentHTML(
           "beforeend",
           `
-            <div id=${this.id + "-bookmark-form"} class="formTitle">add bookmarks</div>
+            <div id=${this.id + "-bookmark-menu"} >
+              <h1 class="formTitle">add bookmarks</h1>
               <div>
                 <label> enter url: </label>
                 <input id=${this.id + "-url-input"} type="text" name="url" />
@@ -692,9 +693,11 @@
 
             <br />
 
-            <div id=${this.id + "-settings-form"}>
+            <div id=${this.id + "-customization-menu"}>
+              <h1 class="formTitle">customize layer</h1>
 
-              <div class="formTitle">change background</div>
+              <span id=${this.id + "-background-options"}>
+                <p class="formTitle">change background</p>
                 <div>
                     <label>set background color: </label>
                     <input id=${this.id + "-settings-bg-color"} type="color" />
@@ -703,10 +706,12 @@
                     <label>set background opacity (%): </label>
                     <input id=${this.id + "-settings-bg-alpha"} />
                 </div>
+              </span>
 
               <br />
 
-              <div class="formTitle">change text</div>
+              <span id=${this.id + "-text-options"}>
+                <h1 class="formTitle">change text</h1>
                 <div>
                     <label>change font (see instructions for more info):</label>
                     <input  id=${this.id + "-settings-font-input"} />
@@ -717,6 +722,7 @@
                       this.id + "-settings-font-name"
                     }></span>
                 </div>
+              </span>
 
               <br />