CSS Styling For Your Theme | Episode 5/10 | Getting Started With Content Hub for WordPress Devs

Let's talk about styling our theme. The Bowler plate comes with two style sheets, the main and Theme Override style sheets. In the main style sheet, we have smaller partials called with the include tag, and it's calling all of these from the CSS folder. If you provide theme settings with the fields JSON file, then users can customize the theme with those fields, and we handle all of these customizations in the Theme Override CSS file. All of the dynamic values are called with the theme object in Hubble. For my theme, I'm going to phase out the Theme Overrides stylesheet and map each field to a CSS custom property. So let me switch to my styles branch and we'll take a look at my progress, add our own custom theme fields, and look at inherited values, the theme settings. So in my styles branch, I've created a CSS variable style sheet and I've added some of my own partials, like the Footer utility flexgrid and some others. And after I did that, I made sure to include my partials in the main CSS file, and then I started mapping fields listed in the Theme Overrides file to custom properties in the CSS variables file. Let me clean some things up real quick and change to Hubble. That way things look a little bit better. Perfect. Now I'm going to go to the base HTML file, and I want you to notice how I'm calling the CSS variable stylesheet. Instead of using the require CSS function, I am using the Require CSS tag, and I'm including the CSS variables content inside of an HTML style tag. This allows me to inline my CSS variables and save on an HTTP request, as well as show you a different way to call something. Now, mapping everything in the CSS variable style sheet is a work in progress, but the next step is to replace all of the Hubble inside of the theme overrides with all of my custom properties. You can see, for example, the body's color I've replaced with a CSS custom property. This has been a breeze, mapping all of these fields, because everything has been listed out in the Theme Overrides file. But what if I want to add a field that doesn't exist in my fields file? Well, let's explore what that looks like. First, let's go to our CSS variables, and do note that we've added some color fields already. So for example, the theme only comes with a primary and secondary color, but we've added a tertiary dark dark alternative and even a Light color. Now let's add a light alternative color to our theme. So I'll go to the fields JSON file and scroll to the end of the global group. Now I can see the light color. What I can do is copy this and change the values accordingly. Or I could install the Hubble language extension in VS code. I'll show you what it can do. I'll type in the word field and I can see all of these available snippets. I'm going to choose color and format this. Now, before I save, I do need to be running the hswatch command. So I'm going to bring up my terminal and I will run hs watch the source and I'll upload it to my PT styles theme. This is the theme where I'm tracking all the changes in my styles branch. I'm going to upload that now. Perfect. And I've saved it should be uploaded and I'm going to refresh now expand the global colors. All right, we see a color field. Unfortunately, we see an opacity field as well. And I want to hide that just like these are hidden. So how do I do that? I'll look at what exists and I can see there's this visibility field and opacity under hidden subfields is set to true. So it's being set to be hidden and I need to add that to the color field. I could add that or could just copy this. For simplicity's sake and to make this video short, I'm going to just copy and change some of the words and I'll update the default value to match my CSS variables file. Copy this. All right, now I will refresh. Expand the global colors and I can see my light alternative color. Perfect. Now let's talk about the inherited values in the font field. These are some things that might trip you up when you're first starting out. As you can see, the primary color is being reflected across my text. If I change this, we can see it change in the text. Let me expand some other fields. The global font field looks like it's inheriting that value. Let's change it again to test. Yeah, When I change the primary field color, everything else seems to be linked to it. And this is done with inherited values. So I'm going to go to the global fonts group in the fields file. And I can see there's an inherited value property. You can give it the property value paths. And there's the color, and there's the primary color right there. I'm going to change that to dark. And there was that other field that was changing as well. Yeah, I'm going to change that to be linked to my dark color. I'm going to reset this and my text is still this primary color. And I see that's not reflected. So let's see if we have any errors or if we just need to save. I might not have refreshed. Let me try that. Perfect. Everything seems to be working. I'll change that to purple. And my text did not change. Awesome. So let's go and move on to the font fields. The font field is one of the more complicated theme fields. I highly suggest you have the font documentation open. It even gives you some examples as well as information on the field. I'm going to go to the theme editor and we're going to look at some of the font fields in action. Do note we have Google fonts available to us. There are two font sets that we can use in HubSpot as of July 2021, and that is a Google Font and a default font set. In our theme panel, we can see in the global fonts, there's only a font name and color field available to us. But if I expand the typography panel, there's a font name, there's size options, and there's even styling options. So let's look at why that is in our global fonts. It looks like we are using the visibility parameter and we are hiding the size and styles. Let me hide the color as well. That way you can see that example. Oh, no. All right, I'm going to refresh. Expand that global fonts parameter and that color option is gone. Let me add that back in. And now that we've looked at adding our own fields and we've looked at the visibility and subfields parameters, we've even looked at inherited values. I'm going to finish styling this theme and we'll move on to the next video and we'll create a HubDB table with our property details in it. Let's get some properties in this properties theme. I'll see you all there.