Why is the title heading showing up in all caps?

If DesignPLUS was installed at your institution before we started using CSS variables and imports, then some of the theme headings use all caps as a default style.

Note: This article is relevant to the legacy DesignPLUS Sidebar installed before July 2023. If your institution installed or updated the DesignPLUS Sidebar after July 2023, please check the New Sidebar Guides and the New Sidebar FAQ.

 

When this style was updated, we didn't want to force the change to all existing customers, so it was added to the new CSS that comes with the new method of customizing themes.


If you would like to make the change to remove all caps from your theme headings, then it will require adding extra lines of code to your institution's existing CSS file.  

Copy the code below and add it to the end of the CSS file in your institution's Canvas theme.  If you'd like assistance with this process, feel free to contact support@cidilabs.com

#kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default), #kl_wrapper_3.kl_basic_color_panel_nav h3:not(.ui-state-default), #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_basic_color h3:not(.ui-state-default), #kl_wrapper_3.kl_basic_color.variation_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right, #kl_wrapper_3.kl_colored_headings_box_left #kl_banner h2, #kl_wrapper_3.kl_colored_headings #kl_banner h2, #kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle, #kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle, #kl_wrapper_3.kl_colored_headings_box_left #kl_modules h3, #kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_modules h3, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings_box_left h4, #kl_wrapper_3.kl_apple.kl_colored_headings_box_left h5, #kl_wrapper_3.kl_colored_headings_box_left h5, #kl_wrapper_3.kl_colored_headings_box_left h6, #kl_wrapper_3.kl_colored_headings h4, #kl_wrapper_3.kl_apple.kl_colored_headings h5, #kl_wrapper_3.kl_colored_headings h5, #kl_wrapper_3.kl_colored_headings h6, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_modules h3, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings.variation_2 #kl_modules h3, #kl_wrapper_3.kl_colored_headings.variation_2 > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_flat_sections_main #kl_banner h2, #kl_wrapper_3.kl_flat_sections #kl_banner h2, #kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default), #kl_wrapper_3.kl_flat_sections_main h4, #kl_wrapper_3.kl_apple.kl_flat_sections_main h5, #kl_wrapper_3.kl_flat_sections_main h5, #kl_wrapper_3.kl_flat_sections_main h6, #kl_wrapper_3.kl_flat_sections h4, #kl_wrapper_3.kl_apple.kl_flat_sections h5, #kl_wrapper_3.kl_flat_sections h5, #kl_wrapper_3.kl_flat_sections h6, #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left, #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right, #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle, #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset #kl_banner .kl_subtitle, #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_rounded_inset.variation_2 h3:not(.ui-state-default) { text-transform: none;
}