How To Customize GeneratePress Theme Colors 2021

In this Articles to show you how to customize the colors of the how to create an online course tutorial  website while that is a long stretch there hi my name is Vinay from were I release a ton of content to help you get better results with WordPress faster I’m talking about LifterLMS this is the plug-in we used to create the online course website that you find in this article tutorial article here and this is the organized playlist I’ll have a link to this in the article description box if you have not been following along in order there’s 22 articles here that go over every aspect of setting up an online course website using WordPress now I’ve been asked a few times here’s what the website looks like and I was a can change anything colors in the layout and everything were using Elementor for the pages here but I did make some interesting choices in my color scheme I’ll be the one to admit that you can see when I do the hover we’ve got this morbid feminine color and ominously had to change colors like that and the active colors that blue a minute I’m in a show you how to change that and when you scroll to the footer arm initially had to change some of these colors right now now if you remember we are using the GeneratePress theme so I go to appearances and I click on themes we have a GeneratePress right here in a custom Child theme now here is the website to GeneratePress that I do have a link in the article description box for this and if you did click on the link iron as small amount of money from GeneratePress so the first and easiest option is to by the premium version of GeneratePress it’s only 40 bucks and it gives you more topography options just options on top of options that are all easy to implement in the customizer area of WordPress now I’m not going to purchase it in this article and show you how to use a paid version of the show you customizes without the paid version if perhaps you don’t have it or don’t want to purchase it or are unable to so I actually kind of touched on this a little bit in one of the articles that we were setting up everything my guess is it probably would’ve been this article right here at the how to configure WordPress after installation most likely it would’ve been that one so but it was just a tiny bit at the end of the article so here it is so with anything with WordPress when there’s a free version and then a paid version you could do all the stuff in the paid version in the free version but you just have to get your hands a little bit more dirty and spend a little bit more of your time in order to accomplish what you want so in your WordPress installation under appearance you should have an option here that says editors now if you don’t have this editor option typically maybe you have a security plug-in installed that is hiding it from you so that you don’t accidentally break something by going in there I do know that iThemes Security does that night talk a lot about how great that plug-in is and you might have it on my recommendation and you’ll have to go into the settings of iThemes Security to disable this actual option I’m sure you just Google it would come right up or just temporarily disable iThemes Security so that you can get back into the editor area right here some to go ahead and click on its and working to see these files right here now if you’re not using the child theme that I provided you will see something totally different this is just for the people using the child theme I provided to create the website and what we need to do is click on where it says functions right here are some of the go-ahead actually that’s the theme functions sorry him already making mistakes click on theme functions and cake in order to see a bunch of code don’t worry about a lot of it here when you scroll down is going to start to make sense for you so when we scroll down just a little bit to see these options that look like this and they’re all kind of nice in organizers a bunch here and there’s a bunch here and I think there’s one more block a bunch of them right here in case you get these x-ray and you have another one these are all the settings that if you had the paid version you would have a visual interface to change but because were using the free version we have to change it back here so each of these blocks of settings each little line will do something okay so let me should go to the first one so here’s height title let me go to one like see we have these names here were to start seeing them that have color codes so right here background color in here is the color code now I do have a article in this article about colors and I talked about color codes and everything so this should be a little familiar to you so you have a color code here we have a color code here this is one of those colors this is probably that light color that pinkish color so if you wanted to change the link color for links in your content you just change this hex code I have to be careful it needs this little’ deal in the front and the back and you can’t get rid of that; or you might break something so just make sure you’re changing the color code only okay and when I scroll down here and have more settings header background color let’s see so here’s those navigation colors that we are talking about so here’s the navigation text color which is kind of that off black colors you can see these have the off black when they’re just sitting there like that and then here’s the navigation background hover color we are using that it’s the text hover color so this effort right here that is what’s generating when I hover that Pinker whatever that is and that’s gonna be right there so you would change this to the color you wanted so actually I want to demonstrate this right now this would be really easy one so right now demonstrating I’m hovering and I’m getting this color right there now meant to go ahead and change it to black by entering 333333 so there it is I just change the numbers I didn’t mess with the apostrophes or anything like that so I click on update file like this it’s can update I can go here I can do a refresh and if I did it right now when I hover you see it doesn’t change to that purple anymore I’m sorry the pink I’m get my colors all mixed up so that’s how you do it and when you scroll down EV’s all these colors should start making sense to you so that was the navigation colors and here it is the text current color this is generating that blue right here I can change that to whatever color I want or if I wanted to make it the same black I could do that as well in all of these you could just read them and they just kinda makes sense but you can spot the ones where I changed by knowing the hex code for those colors that I had chosen she can just go through here and change whatever you wanted so there’s also that footer area so it’s a footer widget background color so if I wanted to turn this so let me see if I go here and scroll to the very bottom it’s going to probably be the background color behind this right here so let me go ahead and change that this might be at this might not be it’s let me change this to all threes just like that I entered six of them on a scroll down to do is save and that might be the right area it might not be depends on the terminology some of the refresh and okay so that wasn’t it I wasn’t positive that that would be it so let’s see actually II entered the wrong one it’s footer background color I don’t have widgets that’s why I didn’t change so this is where I should change it when I enter my threes just like that I will do a save and update file and then let me go here and do a refresh and that should change my color right there and see there it is I got it changed it right there so this is how you just go through here and change these colors to whatever you want know when you scroll down you got other options or some font stuff here you might want to be a little careful but you can change some default sizes here so site tagline font to size it’s that the 20 that’s going to be the font right here this tagline right here and set the 20 so I can make it a lot lower if that mattered to me so I can maybe set this to 16 and then if I do is say let’s update this file as to refresh and that should go down in size see it’s smaller so it’s just playing around with the settings here so these this section here is mainly like the fonts the sizes and then this last one is about spacing so these are in pixels so if I wanted to change these spacings a bit I would go ahead and play with these numbers and that is pretty much all there is to it so this is how you would go through and start changing these different colors if you didn’t like the colors that I chose and I totally get it if you don’t like it and I’m in a redo this entire article article in 2018 and I’ll probably have more tone down colors but this is it for here now you can also purchase GeneratePress premium it’s a fabulous plug and it would really go to support the developer Tom who provides phenomenal support and also get you access to that phenomenal support and like I said I have links to everything down below so that should probably answer all your questions that you may have about the colors that I chose if you have any more questions feel free to leave it in the comment section down below I’d like to hear from you and I do want to release more articles on this how to create an online course article article hey thank you for watching this article in a C in the next one 

Leave a Comment

Send this to a friend