added themes section TEDU-131

docs/links/theme.py

@@ -0,0 +1,7 @@
+from . import link
+
+link_name = "create a Theme" 
+link_text = "create a Theme" 
+link_url = "https://developer.mautic.org/#themes" 
+
+link.xref_links.update({link_name: (link_text, link_url)})

docs/links/theme_directory_structure.py

@@ -0,0 +1,7 @@
+from . import link
+
+link_name = "themes developer documentation"
+link_text = "themes developer documentation"
+link_url = "https://developer.mautic.org/#theme-directory-structure"
+
+link.xref_links.update({link_name: (link_text, link_url)})

docs/themes/code_mode.rst

@@ -1,6 +1,48 @@
 .. vale off
 
-Code Mode
+Code mode
 ##########
 
-.. vale on
+.. vale on
+
+Code Mode is an option available in the Email and Landing Page edit Form. It allows you to create/insert/edit your content in HTML code. It's helpful for situations where you don't want to use a Mautic Theme and you want to use an HTML Theme copied from a third party Theme builder, or if you prefer editing HTML code directly.
+
+The other option to edit Landing Page/Email content is to use the built-in drag-and-drop GrapesJS Builder. Read more in the :doc:`/builders/email_landing_page` section.
+
+Select the Code mode
+********************
+
+If you want to work with existing HTML, select code mode from the Theme selector. To open the code mode Builder, click the advanced tab which appears.
+
+.. image:: images/code-builder.png
+    :width: 600
+    :alt: Screenshot of code mode builder 
+
+Limitations
+===========
+
+If you use a Mautic Theme to create the Landing Page/Email and you subsequently want to edit the HTML code, you should think carefully about doing this.
+
+Once you switch from a Theme to Code Mode, content becomes HTML and you can't switch back to the Theme again. 
+
+Selecting a Theme replaces the content with that of the default Theme, so you'll lose your modifications. 
+
+Instead, to make small code changes to an existing Theme, it's recommended to use the code mode built into the GrapesJS Builder.
+
+.. image:: images/theme-list.png
+    :width: 600
+    :alt: Screenshot of code mode
+
+.. vale off
+
+Edit the HTML content in the code mode Builder
+==============================================
+
+.. vale on
+
+In code mode, you can see the HTML content in the text area under the Advanced tab. There is no preview at this time.
+
+Mautic tokens
+=============
+
+You can use the tokens in the code mode Builder by typing them directly into your code. For example when you type ``{contactfield=firstname}``.

docs/themes/customizing_themes.rst

@@ -3,4 +3,29 @@
 Customizing Themes
 ##################
 
-.. vale on
+.. vale on
+
+It's possible to customize Themes, or even to create your own from scratch, with Mautic. To do this go to the Theme Manager, open the drop down menu next to the pre-installed Theme you want to modify and download it.
+
+.. vale off
+
+Customizing an existing Theme
+*****************************
+
+.. vale on
+
+To customize the downloaded Theme, review the :xref:`themes developer documentation` for detailed guidance.
+
+
+
+
+
+
+
+
+
+
+
+
+
+

docs/themes/manage_themes.rst

@@ -3,4 +3,192 @@
 Manage Themes
 #############
 
-.. vale on
+.. vale on
+
+Themes control the look and feel of the Mautic Landing Pages, Emails, Forms and Message screens. 
+
+A basic Mautic installation comes pre-packaged with a number of Themes for you to use 'as-is' or adapt to suit specific projects. 
+
+It's also possible to :xref:`create a Theme` for Mautic from scratch.
+
+Access the Theme Manager via the Admin Menu. Click the cog icon in the top right corner to open it and select the Theme menu item.
+
+The Themes section displays the list of Themes with the following details:
+
+**Title** - The name or title of the Theme.
+
+**Author** - The name of the author or creator of the Theme.
+
+**Feature** - The list of features and Builders that the Theme supports.
+
+.. image:: images/mautic-themes-list.png
+    :width: 600
+    :alt: Screenshot of Theme list
+
+This list of Themes appears as selectable options in Forms, as this allows you to provide styling for Forms. 
+
+Additionally, you can edit and customize Themes in the Email and Landing Page builders to meet your needs. 
+
+With the Email and Landing Page builders, you can start from a template and build your own variations using the drag-and-drop Builder. For more information, see :doc:`Email builder</builders/email_landing_page>` and :doc:`Landing Pages</components/landing_pages>`.
+
+.. vale off
+
+Installing a Theme
+******************
+
+.. vale on
+
+It's necessary to install a new or edited Theme as a zip package. The zip package must have the same structure as the preinstalled Themes and the config.json file must be present in the root folder of the zip package. The :xref:`themes developer documentation` contains more on that.
+
+.. note:: 
+
+    You must select and zip all the files when creating the zip package. Ensure that you don't zip the files within a folder, otherwise the Theme won't install.
+
+You can build and install your own Forms Theme using Twig, and you can also install BeeFree templates as Themes.
+
+To install a Theme:
+
+1. Log in to Mautic.
+
+2. Click the **Settings** icon.
+
+3. Click **Themes**.
+
+4. On the Themes section, in the top-right corner, click **Choose file**.
+
+5. Browse and select the Theme.
+
+6. Click **Install**.
+
+.. vale off
+
+Deleting a Theme
+****************
+
+.. vale on
+
+To delete a user-created Theme:
+
+1. Log in to Mautic.
+
+2. Click the **Settings** icon.
+
+3. Click **Themes**.
+
+4. In the Themes section, locate the Theme that you want to delete.
+
+5. Select the drop-down before the Theme, and click **Delete**.
+
+6. In the confirmation dialog box, click **Delete**.
+
+.. vale off
+
+Previewing a Theme
+******************
+
+.. vale on
+
+To preview a Theme:
+
+1. Log in to Mautic.
+
+2. Click the **Settings** icon.
+
+3. Click **Themes**.
+
+4. In the Themes section, locate the Theme that you want to preview.
+
+5. Select the drop-down before the Theme, and click **Preview**.
+
+6. Mautic displays the preview of the Theme.
+
+.. vale off
+
+Downloading a Theme
+*******************
+
+.. vale on
+
+To download a Theme:
+
+1. Log in to Mautic.
+
+2. Click the **Settings** icon.
+
+3. Click **Themes**.
+
+4. In the Themes section, locate the Theme that you want to download.
+
+5. Select the drop-down before the Theme, and click **Download**.
+
+Upon downloading a Theme on your local machine, you can modify it following the structure outlined in the :xref:`create a Theme` section of the Developer Documentation before reinstalling it for use in your instance.
+
+.. vale off
+
+Update an old Theme
+*******************
+
+.. vale on
+
+Mautic overwrites old Theme files when installing a Theme which already exists in Mautic. Therefore, the Theme updates can be also done by uploading the Theme with the new changes.
+
+Pre-installed Themes can't be overwritten, because the changes would return again after a Mautic update. If you want to change these Themes, download them and modify them to create a new, custom Theme, as outlined previously.
+
+.. vale off
+
+Assigning a default Theme
+*************************
+
+.. vale on
+
+You can assign your Mautic instance a default Theme for Landing Pages. Then use the Landing Page Builder to fill in the content for each new Landing Page you create.
+
+.. image:: images/theme.png
+    :width: 600
+    :alt: Screenshot of Theme
+
+.. note:: 
+
+    Changing the Theme after building the Page may cause content to not display if the two Themes don't use the same placeholders.
+
+To assign a default Theme:
+
+1. Log in to Mautic.
+
+2. Click the **Settings** icon.
+
+3. Click **Configuration**.
+
+4. Click Theme **Settings**.
+
+5. From the dropdown menu, select the Theme that you want to use as default.
+
+6. Click **Save & Close**.
+
+Themes are available to select for Emails and Landing Pages when creating them - this setting pre-selects the Theme chosen by default.
+
+.. image:: images/themes2.jpeg
+    :width: 600
+    :alt: Screenshot of all Themes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

docs/themes/theme_structure.rst

@@ -3,4 +3,6 @@
 Theme Structure
 ###############
 
-.. vale on
+.. vale on
+
+Visit the :xref:`themes developer documentation` about Themes for details about the Theme structure.