Add Custom Branding to a Gatsby Website that Sources Content from TakeShape CMS

Colby Fayock: [0:00] We're going to start with a Gatsby site that uses TakeShape CMS. We've already seen that we can change our heading to manage the content on our site, but what if we wanted to update the branding, like the colors and the logo? We also want to make sure that our company name is used throughout the site, like in the footer.

[0:13] Let's start off with that footer update. To get started, we have some metadata in our Gatsby config. With the companyName, we can call it egghead.io. Since in this instance, the author is the same as the company, let's change the authorName to egghead.io. To make sure we're linking to the right place, let's change takeshape to egghead. Once we open up our site, we can see our first change of egghead.io.

[0:36] We were able to update the company name from Shape Startup to egghead, but how do we update that logo? Our logo is managed inside the Header.js file. Here, we're importing and using an svg logo for our site. You can also see that we're using our companyName for the alt, which we previously updated.

[0:51] In order to update the logo, we need our new logo, so I imported the egghead.io logo into our images directory. With our updated logo, let's update the file name. We'll add egghead-logo. Instead of svg, let's call that png.

[1:06] If we reload our site, we can see our logo, but it's really big. To change the size, we can open up our _header.scss file. Here we can see we are setting styles for svg, but that doesn't relate to png. Here we can update the svg to img. If we reload our site, we can see our logo smaller, but the aspect ratio is skewed. To fix that, we need to update the height, so instead of 6, we're going to set this to 3.5.

[1:28] Now though it still looks a little small, it looks a lot better. From here, you can update that width and height to make sure that your logo is the size you want.

[1:35] Finally, purple isn't one of the egghead's colors. If you look in _colors.scss, you can see that we're defining that blue-magenta color. Egghead.io usually has a dark background, so let's use that. In the _colors file, let's call that color-dark-gray. I will change all of the instances of that color. We can search for that variable name and see everywhere that it's used.

[1:55] For this example, let's update the color of the hero. To update the hero, we'll open the _hero.scss file. There, we can update our blue-magenta to dark-gray. Once we reload our page, we can see that it's dark-gray.

[2:07] As you notice, there's a lot more on this site that uses the blue-magenta. We can use that same technique by finding the instances of that variable and updating them to what we want.

[2:14] In review, we had a Gatsby site with TakeShape CMS that we wanted to update the branding. We were able to change components like the header to update the logo. We were also able to update metadata in the gatsby-config that's used throughout the site. After adding a new color for our brand and using it to update our styles, we were able to see our new logo and colors on the site.