Headings: Change subtitle heading on homepage

Example:

This heading style is shared by a many section modules like Image and text, Text columns with images, Collection list, Featured collection, Maps, Blog posts and Rich text. Changing this font size or font family will affect all the headings on the page. 

Sample code to increase the size:

/* -- code to modify subtitle heading font size -- */
.template-index .home__subtitle { font-size:1.5em; }
/* - end - */

The value 1.5em can be adjusted, use small increments like 1.4em; or 1.6em;

To remove the underline style for the subtitle, use this code:

/* -- code remove subtitle heading underline -- */
.template-index .home__subtitle::after  { display:none;  }
.template-index .home__subtitle {
    margin-bottom: 0.75em;
}
/* - end - */

To change the subtitle underline color:

/* -- code to change subtitle heading underline color -- */
.template-index .home__subtitle::after  { 
  background: #cc0000;
  opacity: 0.9;
}
/* - end - */

Use a standard hex color code for the value of color (#cc0000 is a red color):

http://www.colorhexa.com/web-safe-colors

Adjust the opacity to dim the effect. The default is 0.2 (very light). 


Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us