Bolded Headers Video Transcript


To get the most out of this video, you’ll need to understand the importance of proper header for accessibility, search results, and user experience. For that information, see the video in this series titled “Headers - Overview” or see cms.ku.edu/headers.

Before we get started, there are a number of ways to view headers on your Drupal site. You could highlight the header text in the WYSIWYG editor and then look up in the text format and you’ll see Heading 1, Heading 2, Heading 3, and so on. You can view source by selecting the “Source” button in the WYSIWYG editor, and that’ll show you the source code. You can use a browser extension.

I’m going to be using the extension Web Developer by chrispedrick.com, but WAVE is also a good extension that can find in browsers like Google and Firefox.

Bolded headers is often the result of copying and pasting from a previous website. All the headers in KU CMS Sunflower are already bolded by default. So headers with extra bolding applied are inconsistent with KU Sunflower designs and therefore with the other headers on your KU CMS site.

To fix bolded headers, all you need to do is highlight the header and remove the bolding. I’ll show you how to do that in a moment, but first let’s look at some examples. Here we have two example Heading 2s. The first one has additional bolding applied and the second one is correct. And you can see that’s a pretty big difference. It makes a pretty startling difference between the two, especially if you have them on the same page.

Another example below this in the first accordion, we have two example Heading 4s. The first one has extra bolding applied, and the second one is correct. So we just want to strip those off - that extra bolding away, so that they are consistent across your site, and consistent with Sunflower.

To do that, we’ll select Edit. And then we’re going to select the sections we want to make changes to. I’ve got a couple so I’m just going to select “Edit all” so I make sure to get to the right section. And the way to do this, if you highlight the one that has the problem, you can see that bold is still turned on, so we’ll just uncheck that. And now that will be correct. And then down here in our accordions we’ll select Edit. And the same thing. We’ll just highlight that header and remove the bolding and then hit Save. And now both our Heading 2s are correct and both our Heading 4s are correct. 

 

Return to CMS Guide: Video on Headers - Bolded Headers