MC-5769: Complete content type tutorial

Updated missed references to old Vendor_Module names and added info about pagebuilder-content-type class to templates

Author: bdenham

docs/create-basic-content-type/step-2-add-templates.md

@@ -44,14 +44,14 @@ The Quote example defines only one `appearance`. Therefore, by convention, set t
 
 ![Create config file](../images/step2-add-templates.png)
 
-These files can be blank initially; they just need to exist in their proper location for now so we can reference them in the `appearance` element of our `quote.xml` configuration file as shown here:
+These files can be blank initially; they just need to exist in their proper location for now so we can reference them in the `appearance` element of our `example_quote.xml` configuration file as shown here:
 
 ```xml
 <appearances>
   <appearance name="default"
               default="true"
-              preview_template="Vendor_Module/content-type/quote/default/preview"
-              render_template="Vendor_Module/content-type/quote/default/master"
+              preview_template="Example_PageBuilderQuote/content-type/example-quote/default/preview"
+              render_template="Example_PageBuilderQuote/content-type/example-quote/default/master"
               reader="Magento_PageBuilder/js/master-format/read/configurable">
     <elements...>
   </appearance>
@@ -154,7 +154,7 @@ The `css` attribute applies CSS classes entered by users on the form to a templa
 
 ### class
 
-Just as with any other html template, you can add your own classes to your template elements. Defining those classes for your content type is discussed in [Step 5: Add styles](step-5-add-styles.md).
+ Just as with any other html template, you can add your own classes to your template elements. However, you should **always add the `pagebuilder-content-type` as the first class in the top node in your `preview.html` template** as shown for the Quote. Page Builder uses the `pagebuilder-content-type` class to visual indicators and mouseover effects to the Admin preview template, such as correctly positioning the options menu. Defining custom LESS/CSS classes for your content type is discussed in [Step 5: Add styles](step-5-add-styles.md).
 
 ### liveEdit
 

docs/create-basic-content-type/step-3-add-components.md

@@ -14,10 +14,10 @@ In your configuration file, reference your JavaScript component (`preview.js`) a
 ```xml
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
-  <type name="example"
-        label="Example"
+  <type name="example_quote"
+        label="Quote"
         component="Magento_PageBuilder/js/content-type"
-        preview_component="Acme_PageBuilderQuote/js/content-type/acme_quote/preview"
+        preview_component="Example_PageBuilderQuote/js/content-type/example_quote/preview"
         master_component="Magento_PageBuilder/js/content-type/master">
         ...
   </type>
@@ -34,7 +34,7 @@ The following table describes each component-related attribute from the Quote co
 
 ## Location
 
-Add them to your module here (`view/adminhtml/web/js/content-type/<content-type-name>/`):
+Add them to your module here (`view/adminhtml/web/js/content-type/example-quote/`):
 
 ![Create config file](../images/step3-add-component.png)