You need to set up a local development environment to customize the look and feel of your Docusaurus static sites.

1. In Heretto CCMS, publish a static site by using a Docusaurus scenario. see Publish Content with Docusaurus.
2. Download the full_project.zip key asset.

   

3. Unzip the downloaded archive.
4. Navigate to the unzipped folder and unzip the full_project.zip file.

5. In the terminal, navigate to the unzipped full_project folder by entering cd publish_filepath
   Where, publish_filepath is the path to the build folder.
   Enter:

   • cd C:\users\your_username\Downloads\publish_name\full_project (Windows)
   • cd /Users/your_username/Downloads/publish_name/full_project (macOS)

   Where:

   • your_username is the name of the account that you are currently logged on your workstation
   • publish_name is the name of the folder that contains the published static site
6. Enter yarn install
7. Enter yarn run start

You can change the default logo by overwriting the logo.svg file or by specifying the path to a logo in a different format.

1. If you have an SVG logo, replace the full_project/static/img/logo.svg file with your own logo.svg file.
   Where full_project is the location of your local Docusaurus project.
2. If you have a logo in a different format than SVG (for example, PNG):
   1. Paste your logo to the following folder full_project/static/img/custom_logo
      Where:

      full_project

      is the location of your local Docusaurus project

      custom_logo

      is the name and extension of your logo file (for example, logo.png)

   2. In the full_project/docusaurus.config.js file, replace src: 'img/logo.svg' with the path to your logo.

          navbar: {
            title: 'My Site',
            logo: {
              alt: 'My Site Logo',
              src: 'img/logo.png',
            },

   3. Save the docusaurus.config.js file.

You can change the default favicon by overwriting the favicon.ico file or by specifying the path to a favicon in a different format.

1. If you have an ICO favicon, replace the full_project/static/img/favicon.ico file with your own favicon.ico file.
   Where full_project is the location of your local Docusaurus project.
2. If you have a favicon in a different format than ICO (for example, SVG):
   1. Paste your favicon to the following folder full_project/static/img/custom_favicon
      Where:

      full_project

      is the location of your local Docusaurus project

      custom_favicon

      is the name and extension of your favicon file (for example, favicon.svg)

   2. In the full_project/docusaurus.config.js file, replace favicon: 'img/favicon.ico' with the path to your favicon.
      favicon: 'img/favicon.svg'
   3. Save the docusaurus.config.js file.

You can customize the default footer by editing the docusaurus.config.js file.

1. In the full_project/docusaurus.config.js file, edit the following code:
   Where full_project is the location of your local Docusaurus project.

       footer: {
         style: 'dark',
         links: [],
         copyright: `Copyright © ${new Date().getFullYear()} Heretto, Inc. Built with Docusaurus.`,
       },

   Tip: For more information, see https://v2.docusaurus.io/docs/api/themes/configuration/#footer.

       footer: {
         style: 'light', //Color scheme. Can take the following values: 'dark' or 'light'
         logo: { //A logo that displays at the bottom of the footer
           alt: 'logo',
           src: 'img/logo.svg',
           href: '#home',
         },
         links: [
           {
             title: 'Company Name, Inc.', //Column title
             items: [
               { //Embedded HTML
                 html: `
                 <p>3345 Wilson Street <br/>
                 Suite 404 <br/>
                 Palm Springs, California <br/>
                 Toll Free: 1-234-557-1122</p>
                 `,
               },
             ],
           },
           {
             title: 'Related Information', //Column title
             items: [
               {
                 label: 'Home Page', //Link text
                 href: '#home', //Link target
               },
               {
                 label: 'About',
                 href: '#about',
               },
               {
                 label: 'FAQ',
                 href: '#faq',
               },
               {
                 label: 'Support',
                 href: '#support',
               },
             ],
           },
           {
             title: 'Community', //Column title
             items: [
               {
                 label: 'Blog',
                 href: '#blog',
               },
               {
                 label: 'Slack',
                 href: '#slack',
               },
             ],
           },
         ],
         copyright: `Copyright © ${new Date().getFullYear()} Company Name, Inc. Website Built with Docusaurus.`, //The text visible at the bottom of the footer
       },

2. Save the docusaurus.config.js file.

You can adjust the default site styling by adding your customizations to the custom.css file.

1. Apply customizations by editing the full_project/src/css/custom.css file.
   Where full_project is the location of your local Docusaurus project.

   Tip: The code in the custom.css impacts the entire site. To restrict your customizations to the central content area, make sure that you select the div.markdown container first.

   For more information, see https://v2.docusaurus.io/docs/styling-layout/.

   /* stylelint-disable docusaurus/copyright-header */
   /**
    * Any CSS included here will be global. The classic template
    * bundles Infima by default. Infima is a CSS framework designed to
    * work well for content-centric websites.
    */
   /* You can override the default Infima variables here. */
   :root {
       --ifm-color-primary: #25c2a0;
       --ifm-color-primary-dark: rgb(33, 175, 144);
       --ifm-color-primary-darker: rgb(31, 165, 136);
       --ifm-color-primary-darkest: rgb(26, 136, 112);
       --ifm-color-primary-light: rgb(70, 203, 174);
       --ifm-color-primary-lighter: rgb(102, 212, 189);
       --ifm-color-primary-lightest: rgb(146, 224, 208);
       --ifm-code-font-size: 95%;
   }
   .docusaurus-highlight-code-line {
       background-color: rgb(72, 77, 91);
       display: block;
       margin: 0 calc(-1 * var(--ifm-pre-padding));
       padding: 0 var(--ifm-pre-padding);
   }
   table {
       width: 100%;
   }
   div.markdown li > p {
       margin-top: 0px;
       margin-bottom: 0px;
   }
   
   /****** CUSTOMIZATIONS */
   
   /*** Global Typography - START*/
   @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
   * {
       font-family: 'Roboto', sans-serif;
       font-size: 0.9rem;
       color: #404040;
   }
   /*** Global Typography - END*/
   
   /*** Content Headers - START */
   /* Colors */
   div.markdown > h1,
   div.markdown > h2,
   div.markdown > h3,
   div.markdown > h4,
   div.markdown > h5,
   div.markdown > h6 {
       color: darkred;
   }
   /* Size */
   div.markdown > h1 {
       font-size: 2.4rem;
   }
   div.markdown > h2 {
       font-size: 2.0rem;
   }
   div.markdown > h3 {
       font-size: 1.6rem;
   }
   div.markdown > h4,
   div.markdown > h5,
   div.markdown > h6 {
       font-size: 1.2rem;
   }
   /*** Content Headers - END */

   

2. Save the custom.css file.

Locally modifying content is useful if you want to troubleshoot your template.

• To edit content, in the full_project/docs folder, edit the Markdown (MD) files.
  Note: Editing Markdown files IDs may break links on your site.
• To add content:
  1. In the full_project/docs folder, create a new Markdown file.
  2. At the beginning of the file add the Docusaurus header.
     For more information about Docusaurus headers, see https://v2.docusaurus.io/docs/markdown-features/#markdown-headers.

     ---
     id: "New-File"
     title: "New File"
     hide_title: true
     ---

  3. Below the decoration, add Markdown or HTML5 content.
  4. Save the Markdown file.
  5. In the full_project/sidebar.js file, add the ID of the Markdown file.

     module.exports = {"someSidebar":["Introduction","Getting-Started","Common-Tasks","New-File"]};

  6. Save the JS file.
• To remove content:
  1. In the full_project/docs folder, remove a Markdown file.
  2. From the full_project/sidebar.js file, remove the ID of the Markdown file.

     module.exports = {"someSidebar":["Introduction","Getting-Started","Common-Tasks","New-File"]};

  3. Save the JS file.