By default, the color of the "Welcome to..." statement on the homepage (the homepage title) is set to a dark blue:
The homepage welcome statementTo change it to another color:
- Go to Customize > Style (HTML & CSS).
- In the Customize HTML, CSS, and JS section, select Custom CSS.
- 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 */ - 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 */ } - Replace the #000000 on row 3 with the hex code or rbg value of your choice.
- You can Preview Changes to see the difference.
- 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.
- In Customize > Style (HTML & CSS).
- In the Customize HTML, CSS, and JS section, select Custom CSS.
- 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; } - 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 */ - Update the color listed in that section from
var(--primary-color). You can do this in two ways:- 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-colorwith the variable color you'd prefer to use. For example, this code will use your defined secondary-color instead:color: var(--secondary-color);. - 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;.
- 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
- Be sure to Save your changes once you're done!