Epik is a difficult theme to customise. But it offers huge opportunity to the adventurous beginner who isn’t afraid of using a little bit of HTML and CSS and a dash of Photoshop.
It’s all you need to make a beautiful site. This video examines a couple of issues that you might encounter when getting started with the Epik Genesis child theme.
The video was created to answer a question asked by one of my Apprentice course members.
Get The Epik Child Theme
Get The Genesis Club Pro Plugin
Get WordPress Hosting At SiteGround
Transcript Of The Video
Epik Child Theme for Genesis – Getting Started – 21:28
Epik is a Genesis child theme created by third party Genesis theme designer at AppFinite. It’s a Storyboard theme, and as such, has a number of widget areas on the homepage, into which you can place anything you want. There’s an area suitable for a slider, or large image here at the top.
As you move down the page you can see there are many horizontal widget areas, one after another, with different background colors, white, grey, black. The purpose of this video is to show you how to get started with Epik’s homepage and provide answers to two common questions: how to change the background colors of these horizontal widget areas and also how to place the slider so that it displays without gaps above and below.
This demo site shows you how good Epik can look once it’s been set up. But this is what it looked like on my web hosting account, at site ground, straight after I’d installed it, it looks nothing like the demo. So let’s see if we can take some initial steps to address this.
Okay this is the dashboard to my site and I am going to be using the Genesis Club Pro plugin and also the Jet Pack plugin. Jet Pack has many settings but the one that I need for this is the custom CSS because I want somewhere to put my CSS edits. Genesis Club Pro does lots of different things, it’s our plugin and of course I do recommend it, but the reason I’m using it today is because it also includes a slider and I’ll be using that slider to demonstrate how to place a slider at the top of Epik.
I’m going to create a slider very quickly, a very simple one, using six images of London. Each of my images is a certain size because I want my particular slider to be a big slider that fills the top of Epik right to the edges, so it’s not going to be a slider that sits in the middle. It’s going to be one that expands to fill the space, and I’ve found the most optimum size for that is 1600 pixels in width. Because I don’t want to use too much vertical screen real estate, I will keep the image to only 600 pixels in depth, so these images are all 1600 pixels by 600 pixels. I also try to make them as lightweight as possible so they won’t be the best quality; I’m going to save them at quite low quality resolution.
OK, in order to build a slider, I just click on Genesis Club Slider, and then on add new. Give my slider a name, so I’ll call it homepage slider, and then click on add slider.
OK now I’m going to set my slider dimensions, so that’s 1600 by 600 as we decided earlier, and it’s to be responsive, but also I don’t want it to go on forever and ever, so I’m setting a limit to 2,500 pixels in case anyone stretches their screen that wide, and all the other values I’m just going to leave for now.
My slider will be full width but I don’t need to force the issue here by setting this full width setting because the Epik theme actually includes a full width widget area, and we’ll just use that, as you’ll see.
Next I’ll click over to the slideshow tab and I’m going to leave all the settings as they are here. This is to be a simple slider so we don’t need to change anything here.
Next I’ll click over to the appearance tab and here I’m going to choose a skin for my slider, and that means like buttons and controls, but I actually want nothing, no skin, no buttons, no controls. I’m going to choose a background color, I don’t know what black is going to look like, whether it’s going to be a good idea or not, but I’ve chosen black anyway. That’s as much as I’ll do with the appearance for now, and save that.
Next I’ll click over to the navigation area tab and here I’m going to switch off everything. Now the skin I chose would have done this, but I’m just doing this for completeness. I’m switching off every single control because I don’t want anything to show other than my images, I don’t want buttons or arrows or any sort of navigation on the slider.
Okay, I’ve already uploaded all my slider images into my media library, so they’re already there and all I need to do now is click onto slides and go and actually put them into the slider, so to do that, I click on that button, and get the first image, press on the insert, and that’s my first image, and that’s my slider there. Then onto the next one. Click the next image in the media library, and insert that, and then the third, the fourth, and then the fifth, and finally, the last one, the sixth image, then I’ll just do one save to save all six of those images into the slider.
Next I’d like to just show you a preview of the slider and you’ll see that because we haven’t allocated any specific transitions, if you don’t do that then the slider will just take one of 200 transitions randomly to allocate to each slide, and that means that you’re going to get this bizarre mixed bag of transitions on a slider, unless you specifically set each slide to have a particular transition, and that’s what I’ll do.
To do that, all I have to do is click on select transitions for the first slide, and choose an appropriate transition, I’m going for number 12 here, and then I’m going to apply it to all the other slides, so that’s it. They’ve all got the same transition now, and then I can save those changes.
If we enter the preview, you’ll see that the transition is now the fading in from the left. Okay that’s as much as I want to do on the slider, and so I’m going over to the dashboard now and I’m going to have a look at the widgets within the Epik theme, now, look at them, there’s a whole load of widgets in Epik, there’s lots of them, and one of the problems with Epik is that we don’t often know where these widgets are or what they look like, so the first thing I always suggest you do is just put a test widget with some random text in it into every single widget area just like I’m doing here.
Now I’m using the Geneses Text Club widget, which has one or two other capabilities but you can use any test widget, it doesn’t matter, just use the ordinary one, and drag the test widget into the widget areas one by one as I’m doing. This means that you’re generating some dummy homepage content and once you have that content you’ll be able to see what the homepage is capable of, but without that content, it just collapses in on itself and you can’t see anything. Now I’m not going to sit here and do this in front of you for all of them, so I’ll go away and finish this off and come back.
Okay I’m back, I’ve put text into every dragged widget that I’ve put into the widget area, that one there I’ve actually put a bit more text, because it slide wide and it needed a bit more text but everywhere else I’ve just put one sentence of random text in. That means my homepage will look a bit better. I’m also going to go to Genesis Club Pro now and just add a logo quickly because I want my homepage to have a bit of a normal look about it, so I’m just adding a bit of a normal look about it so I’m just adding a quick logo image here, and adding the logo text. Genesis Club Pro makes logos very easy to upload and also makes them responsive so
I’m just giving it a quick logo, and now this is what my page looks like. I’ve got a quick logo and I’ve got all my widget areas filled in with these bits of random text and you can see the layout of the land very clearly, you can see the different background colors, whether the text is scented, how many pieces of text, for example there’s four bits of text in a row there, but the text above it is just single line and you can see the different items, the different layouts you’ve got to play with, there’s a group of two there and a group of three there, for example.
Alright, I’m back in my wordpress dashboard and I’m just going to go to appearance widgets and look at slider wide, that widget area, and just delete the dummy text that I had in there, by removing that widget and instead I’m going to replace it with a slider widget, so we’ve got something called the Genesis Club fix slider widget, now if you’re using a different slider you’ll have a different method, but I’m dragging in a Genesis Club fix slider widget, and I’ve only got one slider as you know, and that’s the one its selecting, so I’ll just hit save, and then we can go across over to my other tab and just refresh and see the slider in place and just there it goes, and notice we do have all our other widgets still in place to make sure that our homepage has got some structure, but notice we do have that rather annoying gap at the top of the slider and there’s possibly one underneath but I’m not sure just by looking at it there, but certainly there’s one on top of the slider there, and we need to get rid of that.
When you see some CSS that looks like this, with full values after a word like padding or margin, it’s important to realize that the full values have a very specific order. The first number refers to the top, the next to the right, the next to the bottom and the last to the left. So in other words, it’s a bit like going clockwise around a clock. Top, right, bottom, left. When all four pixel numbers are the same as in this example and the padding or margin is say, 10 pixels in all directions, then it’s written like this, collapsed into just one number. Padding 10px means 10 pixels in all four directions. When you see some shorthand CSS involving only three values, as in this example of padding, the first value refers to the top, the last value refers to the bottom and the value in the middle refers to both left and right, so this shorthand would in fact be equivalent to this.
Similarly, if you see shorthand that’s only got two values, like it’s shown here then this refers to the top and the bottom and this number to the left and the right, so the equivalent written out in full would be like this. It’s not compulsory to use the short form for paddings and margins in CSS, here are the usual ways to address padding top, right, bottom and left. You can address them individually too. Hopefully that will help to make more sense of what happens next when I go looking for problems with my homepage.
Okay I’m now going to try and investigate why we’ve got this gap in the top of video. Right click right on it, and inspect element. As I move my cursor to the site container area in the code, notice the whole of the above the code section, the actual site turns blue, a blue overlay is added. This means that I’ve identified the site container, that’s the area described by the piece of code that I’ve highlighted. So I’m going to click to get inside there and now go looking for anything that could be causing this gap that’s above my video. As soon as I land on the head wrap section, I can see there’s an orange shading, now orange stands for margins, so that means I should be able to identify in the code some margin because of the orange clue that I’ve been given. If I can eliminate that, that should help me to eliminate the gap. When I look over to the side, I can see here, that there is indeed a margin, so that’s what I’m going to go for.
Okay so if I move over and just temporarily take the margin off you can see that the gap reduces significantly, in fact by 40 pixels, I’m now going to copy that so that I can use it later in my CSS and just remind myself that the important bit of that code that I’ve copied was that margin line and looking back to how we were talking about how paddings and margins are written you can see that this particular code uses three numbers, so the first number refers to the top, the middle number refers to left and right, in this case they’re both zero but the bottom refers to the padding, and if you remember, the orange area that was highlighted just now, was at the bottom of the head wrap, so it’s nothing to do with the slider, it was actually a gap that was being caused by an element above the slider, and hence the margin that was giving us trouble was at the bottom, so I’m going to eliminate that.
Now I’m going off in search of the rest of the gap that we haven’t yet eliminated so I slowly go into each element and look for the colors, and look there I can see some green. Now green stands for padding, it’s a clue for padding, so I’m looking now on the right hand side to see if I can see any code that refers to padding, and I do. Okay so I’ve found the padding that appears to be giving me the problem, so let me just switch it on and off and you can see the gap reduces, so together with the last bit of CSS that I copied, if I copy this one and apply changes to both of those things, I should eliminate the gap altogether. Notice that I’m pretty confident because the padding that I’ve highlighted as the problem is associated with the slider, the slider widget area in fact called slider wide, and because 30 pixels is the first number, that’s referring to the top padding, so there is some padding at the top of the slider and certainly our green highlight suggests that that’s the case. So let’s go and add this to our CSS file.
Right, so now I want to eliminate this gap and to do that I’m going over to my dashboard, and then to appearance and then edit CSS. The edit CSS option is there because I set it up in Jet Pack. I’m just going to paste in a comment that I prepared earlier and this describes the code that I’m about to paste, it’s a good idea to do that. Now I’m going to go and get the CSS I saved in my notepad document and literally paste it in.
The comment describes my change so I don’t look at it next week and wonder what on earth I was doing. Now I’m deleting all the lines that I didn’t arrow because those were nothing to do with the problem and I do not need to override those. Then I’ll delete the arrows and now I’m left with just the lines that were causing me the trouble. To eliminate the 40 pixel margin, I simply change everything to zero, and to eliminate the padding, I change that to zero, so that will now override the existing CSS that provided the margins and if I go back to my homepage and refresh, that annoying gap should be gone.
Okay, that’s an example of how you investigate and then eliminate problems caused by CSS in your theme.
Okay so let’s investigate how to change the colors of a couple of these horizontal areas. It will of course involve doing a right click, inspect element to figure out what we’re dealing with, so let’s do that right now in this darker area here. The minute I highlight welcome I can see it’s gone blue which means I’ve selected the right area and I can change the color real time, just by changing the background there, so that’s easy to do, so I’ll just copy that and put it into my notepad document. Okay, there it is and I’ll just put that in and put an arrow by the significant line. Okay so let’s move down and try to change the color of one of the other horizontal areas. You’ll see here we’ve identified that complete area, see it’s all blue and notice that it’s got a background image, and it’s identified by the class start HF1, so I’m just copying that whole thing. I don’t want to have a background image, I just want to have a background color so I’ve remembered that whole thing and arrowed the important line, well there is only one line and now I’m copying it all and going over to my CSS file.
Go to appearance, edit CSS and just paste all of that in. Okay, so let’s get rid of the line there that has nothing to do with anything, and now if I want the background color to say, I don’t know, what color do I want, well that would be up to you but let’s just have navy, as in navy blue for now. Here, whenever you see an image, a background image, it’s usually best to say none, to make sure you get rid of it completely, because I actually want to replace that with a color so by telling the image to be none, my color stands the chance of coming through, because if there was an image there, then the color probably wouldn’t appear. So I’m just choosing red now for that color, and if I do a refresh, I’ve got red on that area, and blue on the welcome area. Now all the other horizontal sections are identified by similar classes, dot HF2, HF3, so to change those, you would do the same thing, as I’ve done for HF1.