Sweeping documentation updates (#548)

--- Co-authored-by: Zachary Svoboda <93960196+Zsvoboda87@users.noreply.github.com>
coderedcorp · May 24, 2024 · a195027 · a195027
1 parent 4ba33d7
commit a195027
Show file tree

Hide file tree

Showing 305 changed files with 2,074 additions and 1,274 deletions.
diff --git a/docs/advanced/advanced01.rst b/docs/advanced/advanced01.rst
diff --git a/docs/advanced/advanced02.rst b/docs/advanced/advanced02.rst
diff --git a/...vanced/img/advanced_folder_structure1.png → ...ed/img/A01/advanced_folder_structure1.png b/...vanced/img/advanced_folder_structure1.png → ...ed/img/A01/advanced_folder_structure1.png
diff --git a/docs/advanced/img/A01/after.jpeg b/docs/advanced/img/A01/after.jpeg
diff --git a/docs/advanced/img/A01/before.jpeg b/docs/advanced/img/A01/before.jpeg
diff --git a/docs/advanced/img/A01/css_demo.jpg b/docs/advanced/img/A01/css_demo.jpg
diff --git a/docs/advanced/img/A01/custom_css.jpeg b/docs/advanced/img/A01/custom_css.jpeg
diff --git a/docs/advanced/img/A01/custom_navbar.jpeg b/docs/advanced/img/A01/custom_navbar.jpeg
diff --git a/docs/advanced/img/A01/logo_centered.jpeg b/docs/advanced/img/A01/logo_centered.jpeg
diff --git a/docs/advanced/img/A01/navbar_html.jpeg b/docs/advanced/img/A01/navbar_html.jpeg
diff --git a/docs/advanced/img/A02/plp_as_child.jpeg b/docs/advanced/img/A02/plp_as_child.jpeg
diff --git a/docs/advanced/img/A02/plp_editor.jpeg b/docs/advanced/img/A02/plp_editor.jpeg
diff --git a/docs/advanced/img/A02/plp_preview.jpeg b/docs/advanced/img/A02/plp_preview.jpeg
diff --git a/docs/advanced/img/A02/pp_editor.jpeg b/docs/advanced/img/A02/pp_editor.jpeg
diff --git a/docs/advanced/img/A02/pp_preview.jpeg b/docs/advanced/img/A02/pp_preview.jpeg
diff --git a/docs/advanced/img/A02/pp_preview2.jpeg b/docs/advanced/img/A02/pp_preview2.jpeg
diff --git a/docs/advanced/img/advanced_customcss1.png b/docs/advanced/img/advanced_customcss1.png
diff --git a/docs/advanced/img/advanced_footer_front.png b/docs/advanced/img/advanced_footer_front.png
diff --git a/docs/advanced/img/advanced_footer_overall_padding.png b/docs/advanced/img/advanced_footer_overall_padding.png
diff --git a/docs/advanced/img/advanced_improved_website1.png b/docs/advanced/img/advanced_improved_website1.png
diff --git a/docs/advanced/img/advanced_two_tiered_navbar.png b/docs/advanced/img/advanced_two_tiered_navbar.png
diff --git a/docs/advanced/img/cupcake_landing_published.png b/docs/advanced/img/cupcake_landing_published.png
diff --git a/docs/advanced/img/cupcake_page_published.png b/docs/advanced/img/cupcake_page_published.png
diff --git a/docs/contributing/index.rst b/docs/contributing/index.rst
@@ -303,10 +303,10 @@ Output will be in ``docs/_build/html/`` directory.
 Updating Tutorial Documentation
 -------------------------------
 
-From time to time, the documentation for the tutorial will need to be updated. You can work directly in
-the tutorial site by loading the fixture file for its database (read more at :ref:`load-data`).
+.. From time to time, the documentation for the tutorial will need to be updated. You can work directly in
+.. the tutorial site by loading the fixture file for its database (read more at :ref:`load-data`).
 
-However, once you have worked in the tutorial site and gotten new screenshots for the **Getting Started** documentation,
+Once you have worked in the tutorial site and gotten new screenshots for the **Getting Started** documentation,
 you will also need to update the fixture file, which is located in ``tutorial > mysite > website > fixtures``.
 
 **These are the steps for updating the fixture:**
@@ -317,7 +317,7 @@ you will also need to update the fixture file, which is located in ``tutorial >
 
 3. Move the ``database.json`` file into the ``fixtures`` folder.
 
-4. For testing ``loaddata``, please review the steps at  :ref:`load-data`.
+.. 4. For testing ``loaddata``, please review the steps at  :ref:`load-data`.
 
 
 Publishing a New Release

diff --git a/docs/features/blocks/contentblocks/accordion.rst b/docs/features/blocks/contentblocks/accordion.rst
diff --git a/docs/features/blocks/contentblocks/carousel.rst b/docs/features/blocks/contentblocks/carousel.rst
diff --git a/docs/features/blocks/contentblocks/image.rst b/docs/features/blocks/contentblocks/image.rst
diff --git a/docs/features/blocks/contentblocks/imagegallery.rst b/docs/features/blocks/contentblocks/imagegallery.rst
diff --git a/docs/features/blocks/contentblocks/img/blocks_choose_doc.png b/docs/features/blocks/contentblocks/img/blocks_choose_doc.png
diff --git a/docs/features/blocks/contentblocks/img/blocks_download.png b/docs/features/blocks/contentblocks/img/blocks_download.png
diff --git a/docs/features/blocks/contentblocks/img/blocks_html.png b/docs/features/blocks/contentblocks/img/blocks_html.png
diff --git a/docs/features/blocks/contentblocks/img/blocks_table_edit.png b/docs/features/blocks/contentblocks/img/blocks_table_edit.png
diff --git a/docs/features/blocks/contentblocks/img/card_settings.png b/docs/features/blocks/contentblocks/img/card_settings.png
diff --git a/docs/features/blocks/contentblocks/img/carousel_block.png b/docs/features/blocks/contentblocks/img/carousel_block.png
diff --git a/docs/features/blocks/contentblocks/img/carousel_published.png b/docs/features/blocks/contentblocks/img/carousel_published.png
diff --git a/docs/features/blocks/contentblocks/img/carousel_snippet.png b/docs/features/blocks/contentblocks/img/carousel_snippet.png
diff --git a/docs/features/blocks/contentblocks/img/cupcake_modal_sample.png b/docs/features/blocks/contentblocks/img/cupcake_modal_sample.png
diff --git a/docs/features/blocks/contentblocks/img/embedmedia1.png b/docs/features/blocks/contentblocks/img/embedmedia1.png
diff --git a/docs/features/blocks/contentblocks/img/embedmedia2.png b/docs/features/blocks/contentblocks/img/embedmedia2.png
diff --git a/docs/features/blocks/contentblocks/img/googlemap_published.png b/docs/features/blocks/contentblocks/img/googlemap_published.png
diff --git a/docs/features/blocks/contentblocks/img/googlemap_settings.png b/docs/features/blocks/contentblocks/img/googlemap_settings.png
diff --git a/docs/features/blocks/contentblocks/img/image_chooser_block.png b/docs/features/blocks/contentblocks/img/image_chooser_block.png
diff --git a/docs/features/blocks/contentblocks/img/image_gallery_block.png b/docs/features/blocks/contentblocks/img/image_gallery_block.png
diff --git a/docs/features/blocks/contentblocks/img/image_gallery_published.png b/docs/features/blocks/contentblocks/img/image_gallery_published.png
diff --git a/docs/features/blocks/contentblocks/img/latestpages1.png b/docs/features/blocks/contentblocks/img/latestpages1.png
diff --git a/docs/features/blocks/contentblocks/img/latestpages2.png b/docs/features/blocks/contentblocks/img/latestpages2.png
diff --git a/docs/features/blocks/contentblocks/img/pagepreview_edit.png b/docs/features/blocks/contentblocks/img/pagepreview_edit.png
diff --git a/docs/features/blocks/contentblocks/img/pricelist_block.png b/docs/features/blocks/contentblocks/img/pricelist_block.png
diff --git a/docs/features/blocks/contentblocks/img/pricelist_sample.png b/docs/features/blocks/contentblocks/img/pricelist_sample.png
diff --git a/docs/features/blocks/contentblocks/img/quote_published.png b/docs/features/blocks/contentblocks/img/quote_published.png
diff --git a/docs/features/blocks/contentblocks/img/quoteblock.png b/docs/features/blocks/contentblocks/img/quoteblock.png
diff --git a/docs/features/blocks/contentblocks/img/reusable_content_block.png b/docs/features/blocks/contentblocks/img/reusable_content_block.png
diff --git a/docs/features/blocks/contentblocks/img/table_published.png b/docs/features/blocks/contentblocks/img/table_published.png
diff --git a/docs/features/blocks/contentblocks/img/textblock.png b/docs/features/blocks/contentblocks/img/textblock.png
diff --git a/docs/features/blocks/index.rst b/docs/features/blocks/index.rst
diff --git a/docs/features/blocks/layoutblocks/cardgrid.rst b/docs/features/blocks/layoutblocks/cardgrid.rst
diff --git a/docs/features/blocks/layoutblocks/img/card_grid_example.png b/docs/features/blocks/layoutblocks/img/card_grid_example.png
diff --git a/docs/features/blocks/layoutblocks/img/card_grid_images.png b/docs/features/blocks/layoutblocks/img/card_grid_images.png
diff --git a/docs/features/blocks/layoutblocks/img/hero_block.png b/docs/features/blocks/layoutblocks/img/hero_block.png
diff --git a/docs/features/blocks/layoutblocks/img/html_layout_block.png b/docs/features/blocks/layoutblocks/img/html_layout_block.png
diff --git a/docs/features/blocks/layoutblocks/img/responsive_grid_row1.png b/docs/features/blocks/layoutblocks/img/responsive_grid_row1.png
diff --git a/docs/features/contentblocks/accordion.rst b/docs/features/contentblocks/accordion.rst
@@ -0,0 +1,46 @@
+.. _accordion-block:
+
+Accordion Block
+===============
+
+Creates a collapsible section with a button to toggle.
+Each Accordion has multiple sections or panels.
+
+`View example live <https://crxpharma.codered.cloud/demo-blocks/accordion-block/>`_
+
+
+Example:
+
+.. figure:: images/accordion_closed.jpeg
+    :alt: demo accordion closed
+
+    Demo accordion closed
+
+.. figure:: images/accordion_open.jpeg
+    :alt: demo accordion with panel open
+
+    Demo accordion with panel open
+
+Field Reference
+---------------
+
+Fields and purposes:
+
+* **Accordion** - Choose a preexisting accordion snippet, created under snippets.
+
+Editor:
+
+.. figure:: images/accordion_demo.jpeg
+    :alt: Editing screen for accordion
+
+    Editing screen for accordion
+
+Each Accordion panel needs a name and content.  After you make a second panel,
+arrows will appear to allow you to change the order of the panels.
+
+.. figure:: images/accordion_arrows.jpeg
+    :alt: arrows on the accordion panels
+
+    Arrows on the accordion panels. They appear after you make a second panel.
+
+Additional Information in the `bootstrap docs <https://getbootstrap.com/docs/5.2/components/accordion/>`_
diff --git a/...eatures/blocks/contentblocks/baselink.rst → docs/features/contentblocks/baselink.rst b/...eatures/blocks/contentblocks/baselink.rst → docs/features/contentblocks/baselink.rst
diff --git a/.../features/blocks/contentblocks/button.rst → docs/features/contentblocks/button.rst b/.../features/blocks/contentblocks/button.rst → docs/features/contentblocks/button.rst
@@ -4,6 +4,15 @@ Button Block
 The button block renders an HTML anchor styled as a button. This can be used to
 link to pages, documents, or external links.
 
+Example:
+
+.. figure:: images/button_example.jpeg
+    :alt:  default button styles
+
+    default button styles
+
+Note this screen shot was taken using the default bootstrap colors.  If you use a theme or change global colors with sass,
+they will likely be different colors.
 
 Field Reference
 ---------------

diff --git a/docs/features/blocks/contentblocks/card.rst → docs/features/contentblocks/card.rst b/docs/features/blocks/contentblocks/card.rst → docs/features/contentblocks/card.rst
@@ -1,12 +1,16 @@
+.. _card-block:
+
 Card Block
 ==========
 
-Allows the user to fill out information to be displayed in a card. Crops the image to a 3:2 ratio. 
+Allows the user to fill out information to be displayed in a card. Crops the image to a 3:2 ratio.
 
 .. note::
-    There is also a :ref:`card-grid` which groups cards into a grid and is a Layout Block; 
+    There is also a :ref:`card-grid` which groups cards into a grid and is a Layout Block;
     this Card Block only displays a single card.
 
+Example: See below.
+
 Field Reference
 ---------------
 
@@ -22,5 +26,14 @@ Fields and purposes:
 
 * **Links > Button Link** - The button link to include at the bottom of the card, set to link to a page or external link
 
+* **Advanced Settings > Template** - Multiple options for Card layouts.  See Below for reference.
+
+Here is the same card, using different templates in the advanced settings:
+
+.. figure:: images/card_layout_options.jpeg
+    :alt: Grid of a card with different layout templates selected
+
+    A Grid of a card with different layout templates selected.
+
 Explore `Bootstrap Cards <https://getbootstrap.com/docs/4.0/components/card/>`_ to get an understanding of the
-appearance and function of cards. 
+appearance and function of cards.
diff --git a/docs/features/contentblocks/carousel.rst b/docs/features/contentblocks/carousel.rst
@@ -0,0 +1,79 @@
+.. _carousel-block:
+
+Carousel Block
+==============
+
+Allows the user to create a carousel with image backgrounds and relevant blocks.
+Carousels automatically change slides, but also have arrow controls for the user to advance or return to the previous slide.
+Make a Carousel by going to **Snippets > Carousels** and clicking Add Carousel.
+
+Example:
+    .. figure:: images/carousel_example.jpeg
+        :alt:  default button styles
+
+        default button styles
+
+
+Field Reference
+---------------
+
+Fields and purposes:
+
+* **Carousel** - Choose a Carousel
+
+If you don't have any carousels already made, you can build a carousel by clicking **Choose A Carousel** and
+clicking on "Why not **create one now**?" in the popup box. This will take you to **Snippets > Carousels** where
+you can create a carousel to add to the page.  Here is a carousel editor with three slides; each slide has a caption:
+
+.. figure:: images/carousel_editor.jpeg
+    :alt: Building a carousel in Snippets
+
+    The edit mode for building a carousel snippet
+
+Save your work and now you can select that carousel in a page editor. This one is named Demo.  Here is a preview of for one of our slides:
+
+.. figure:: images/carousel_preview.jpeg
+    :alt: Our carousel published on the page
+
+    The carousel published on a page
+
+You'll notice it's hard to see the caption because the bootstrap default text is white.  Let's look at customizing our carousel two different ways.
+
+First, you can override the CSS class.  If you look at the `bootstrap docs <https://getbootstrap.com/docs/5.2/components/carousel/>`_ or the template.
+You'll find the class for caption is ``carousel-caption``.  For our example, let's add a background-color and border-radius.
+
+.. code:: CSS
+
+        .carousel-caption{
+            background-color: rgba(60, 60, 60, 0.5);
+            border-radius: 10px;
+        }
+
+Add this to your custom.css file (basic installation) or the custom.scss file (sass installation).
+Save the file, compile the sass(sass install only), and hard refresh the browser.  See :ref:`adding_custom_css` for more details.
+
+.. figure:: images/carousel_preview_bg.jpeg
+    :alt: Our carousel published on the page
+
+    The carousel published on a page
+
+The second option would be to alter the template.
+Looking at the `bootstrap docs <https://getbootstrap.com/docs/5.2/components/carousel/>`_ you can find there is a dark variant.
+See :ref:`customizing_templates` for a more detailed tutorial on overriding templates.
+
+* To alter our template you need to copy the template from `github <https://github.com/coderedcorp/coderedcms/blob/dev/coderedcms/templates/coderedcms/blocks/carousel_block.html>`_
+* Paste the file in the correct directory so it overrides the default template. Our file path: **mysite>website>templates>coderedcms>blocks>carousel_block.html**
+* In carousel_block.html on line 4; add carousel-dark to the class attribute.  The line should now look like this:
+
+.. code:: html
+
+    <div id="carousel-{{self.carousel.id}}" class="carousel carousel-dark slide" data-bs-ride="carousel">
+
+* Save the file and refresh the browser.
+
+.. figure:: images/carousel_preview_dark.jpeg
+    :alt: Our carousel published on the page
+
+    The carousel published on a page
+
+(In this example, I removed the custom css for .carousel-caption from the previous example)