We love Genesis themes, but they do need a little tweaking to make them your own. This video shows you how to make a basic color change to a child theme (using the Parallax Pro theme as an example). However you can apply the same steps to any of the Genesis child themes.
In the video I referred to a number of products and I also created a small demo site.
- Parallax Pro
- This is the theme I used in the video. It’s a beautiful theme by StudioPress which lets your content do the talking. There’s an opportunity to make bold statements on the home page, enticing your visitors into find out more.
- Genesis Club Pro Plugin
- This is our plugin, developed to give you access to some of the additions and tweaks we regularly place on our sites.
- Parallax Pro
- When you have done the basic color changes to the udnerlying style.css file, you’ll need to add all your CSS tweak to a separate CSS file to keep your main changes away from the theme’s CSS. You can use the free JetPack plugin for this, or the premium Genesis Extender. I prefer Extender. It has a lot more going for it and helps to make editing CSS easier if you use it in helper mode. I don’t, but you might.
This video is about taking the child theme Parallax Pro and just changing the colors the theme uses. As you know, each Genesis child theme does come with some color options built in. If I go into theme settings, for example on the dashboard you will see that you can go to the color style and, in this case, pick four different colors.
The default color is the one that I’ve got on the theme at the moment and that is basically a red highlight. And if I drag it down to the bottom you will see that I’ve got this big red area. The red is quite a dull red it’s not a vibrant red but it’s a red. And if you want to have blue, green, orange, or pink you can pick any of these.
Let’s just change that to green and if I go back and refresh you will see that we get highlighted links now in green and this area at the bottom is green, not red. However when I place my logo, which I’m about to do, here instead of my blog name it could be that my logo and the color scheme actually clashes.
And if that’s the case then I might want to change the colors that are being used to be those that are closer to my business colors, my company colors. So I’ll just go now and put the logo in. I’m just using Genesis Club Pro plugin to do that. So I’m going to add the logo, the chili. A nice red chili. And just get the URL off that which is here and go into Genesis Club Pro and just place that. And remove the blog text and save. Okay that will put my logo onto my home page for me. There you see I have a nice red chili.
The green color I’ve got isn’t really the same green as the green of the chili nor is the red the same color as the default theme. So if I go into Genesis theme setting once more and just change it back to default and refresh. I can see that the red looks okay but it’s not quite as vibrant and I may want to change it. The first thing I would do is use a color picker. You can use any color picker you like but that’s the one I use. It’s called Color Schemer Studio and just pick this color out. Once I know what it is put it into a notepad document so red used equals and make a note of it like that so that I don’t forget it. Next, I’m going to go into the native style sheet that come with the theme and I’m just going to swap out that red for a red that I’d rather have. So the red I’d rather have I’m going to pick from my logo like this. A bit more vibrant. And put that here. Preferred red.
Then I’m just going to go into the theme and go into appearance and then editor and have a look throughout here for every occurrence of the first color and simply swap it out for the second color. Before I do that thought I’m going to delete all the alternative colors from this theme because once I set this up to be the red I want I’m really not interested in all this extra CSS, which is in the style.css file here.
So I’m scrolling down until I can find all the different colors. They’re usually all in one group together. Color styles are here and I’m just going to go from the comment and highlight all of those until I have them all. They end there and I’m just going to delete those from the style sheet because they’re making my styles a lot too heavy when I’m not going to be using them. And having done that – that was in style.css. I’m now going into functions.php and very look for the place in the code where the colors are actually enabled. And if you see it says add support for additional color styles and I’m just going to go from the bottom of that code all the way to the top and delete it and then update that. Okay so I’ve removed the color options from the dashboard and I’ve also removed the colors themselves from style.css.
So now if I go into Genesis theme settings there is no longer an option to change colors. Marvelous. If I now go back into the editor my next job is just to swap out that dull red that was in the default of the style sheet coloring. This red that was originally used from my one. So all I’d do is copy that and look for it from the top of the file.
So control find and now I’m looking for every instance of this and I’m going to change it out to this color instead. Very simple. Go like that and then I go to the next one. And so as I change each one of these this number less becomes one less and I can see that I only have five to go. And now because I’ve done that this has changed to zero so I’m pretty sure that there are none left. All the original red colors have been changed to my red color. So all I have to is update the file.
Now I’m not suggesting that this is the end of your work. All I’m saying is this is a way to reset the default theme to at least basically the color you want to start with. And then any further CSS that you change should go into and additional CSS file. Either through Jetpack or Genesis Extender so use a plug-in that allows you to separate your CSS changes from the original style sheet because in fact we’ve made very few changes to this original style sheet.
We’ve literally removed all the excess color stuff that we were never going to use which make our CSS file slightly lighter and we’ve taken the default red, that we weren’t that fond of, and changed it for a red that actually occurred in our logo. So we’ve kind of reset that style sheet. After this we will make no more changes to this style sheet at all because it is essentially the same with just one color substituted.
So now if we go back to our homepage we will see that this is the old red but if we do a refresh we will see the new red is a little bit more vibrant. Now I’ve already done that in this window so that I can switch between them and that’s the result. So our hover links are popping a little bit more. The section at the bottom is also a lot more red than what it was before. If you see the difference there. Okay that’s it.