Change the color of the homepage welcome text

By default, the color of the "Welcome to..." statement on the homepage (the homepage title) is set to a dark blue:

The homepage of a live knowledge base. An arrow points to the The homepage welcome statement

To change it to another color:

  1. Go to Customize > Style (HTML & CSS).
  2. In the Customize HTML, CSS, and JS section, select Custom CSS.
  3. If your Custom CSS begins with a long comment and General structure,like the code sample below, follow the Update existing CSS instructions. If the Custom CSS section doesn't start with this comment, continue with these instructions.
    /******************************************************** General structure ****************************/
    /* define most colors */
  4. Copy the code below and paste it into your Custom CSS pane:
    /* Change color of homepage title */
    .ko-homepage-top .hg-article-title {
        color: #000000; /* Update to use the color of your choice */
    }
  5. Replace the #000000 on row 3 with the hex code or rbg value of your choice.
  6. You can Preview Changes to see the difference.
  7. Be sure to Save once you've got it looking the way you'd like.

Update existing CSS

If your Custom CSS begins with this code:

/******************************************************** General structure ****************************/
/* define most colors */

You don't need to add any new CSS. You'll just need to update what's there.

  1. In Customize > Style (HTML & CSS).
  2. In the Customize HTML, CSS, and JS section, select Custom CSS.
  3. Scroll about halfway down the Custom CSS pane until you find the Homepage Top and General section, which is usually near row 350:
    /******************************************************** Homepage Top and General */
    /* get rid of background banner and add some padding to top of homepage */
    .hg-minimalist-theme .ko-homepage-top {
      background: none;
      padding-top: 2em;
      padding-bottom: 0em;
    }
  4. Look for the third commented section here for change default color for homepage title, shown here in rows 5-8:
    /* make sure category title is clickable */
    .hg-minimalist-theme .hg-home-page .category-header {
      z-index: 2;
    }
    /* change default color for homepage title */
    .hg-minimalist-theme .ko-homepage-top .hg-article-title {
      color: var(--primary-color);
    }
    		
    /******************************************************** Content Lists */
  5. Update the color listed in that section from var(--primary-color). You can do this in two ways:
    1. Use a different variable: If the color you'd like to use is already defined in the :root color variables at the top of your Custom CSS pane, update the variable used here to reference that variable color. Replace --primary-color with the variable color you'd prefer to use. For example, this code will use your defined secondary-color instead: color: var(--secondary-color);.
    2. Use a hard-coded color: If you don't have a variable defining this color or if your theme doesn't currently include variables, replace the variable with a hex or rgb value for the color. For example, this CSS will use the hex code #005497 instead: color: #005497;.
  6. Be sure to Save your changes once you're done!