1 00:00:00,750 --> 00:00:06,150 In this video you'll customize your first Genesys child theme from Studio press inside the student's 2 00:00:06,150 --> 00:00:12,630 sandbox by using a framework arrangement themed developers are able to add more editing and customization 3 00:00:12,630 --> 00:00:14,710 options for their child themes. 4 00:00:14,730 --> 00:00:19,440 We'll check out the Genesis framework and understand the difference between using a child theme that 5 00:00:19,440 --> 00:00:24,690 works with a framework parent theme and creating a child theme yourself from a standard theme. 6 00:00:26,080 --> 00:00:30,380 First navigator's students W.P. of course dotcom. 7 00:00:30,610 --> 00:00:36,370 We're going to be opening up your sandbox environment that you created in a previous chapter. 8 00:00:36,370 --> 00:00:42,400 If you didn't do that yet you can click get your sandbox at the top right or get yours in the center 9 00:00:42,400 --> 00:00:42,930 button. 10 00:00:43,150 --> 00:00:48,820 But if you have created one already you can click log in at the top right and go ahead and log in with 11 00:00:48,820 --> 00:00:50,960 your username and your password. 12 00:00:52,280 --> 00:00:58,430 That will open your website dashboard where at the top you can see the name of the site and the visit 13 00:00:58,430 --> 00:01:03,210 site button might as well right click and open the site itself in a new tab. 14 00:01:03,290 --> 00:01:06,990 So we can go back and forth and do some edits. 15 00:01:07,010 --> 00:01:14,600 You can see that the default site that comes up is the same theme as the one in student dot W.P. of 16 00:01:14,600 --> 00:01:22,160 course dot com it's agenesis theme called parallax pro and I've got a little bit of design work done 17 00:01:22,190 --> 00:01:31,310 inside this theme as your default which is the home page of the Genesis child theme one of the things 18 00:01:31,400 --> 00:01:37,670 that you've learned that I like to do is to go in to the dashboard when I first open my wordpress installation 19 00:01:37,700 --> 00:01:44,420 and edit my profile page and uncheck the toolbar checkbox. 20 00:01:44,750 --> 00:01:50,840 I like to have the toolbar absent from the top of the front facing site when I'm looking at it so that 21 00:01:50,840 --> 00:01:56,060 I know exactly what it looks like as I'm designing it for a client or for myself. 22 00:01:58,160 --> 00:02:05,420 A few of the unique things about the parallax pro child theme is that it's got this background images 23 00:02:05,420 --> 00:02:10,740 that move slightly and give that parallax effect to the background. 24 00:02:10,910 --> 00:02:18,640 And it's got this custom home page template that is powered by widgets within Genesis. 25 00:02:19,010 --> 00:02:24,520 If you haven't already take a small tour of this home page there's a nice button. 26 00:02:24,590 --> 00:02:30,770 It doesn't link anywhere but it's just a small piece of code in the home page widget that provides a 27 00:02:30,770 --> 00:02:33,620 nice button within the Genesis theme. 28 00:02:35,950 --> 00:02:42,450 A sample page brings you to one of the interior pages that posts and pages will look like you can see 29 00:02:42,450 --> 00:02:50,160 that the menu stays in present at the top and that there's a nice white full with background in it. 30 00:02:50,190 --> 00:02:58,530 The interior pages these are pull images that stick out beyond the margins of a column where the words 31 00:02:58,530 --> 00:02:59,020 are. 32 00:02:59,130 --> 00:03:09,060 And there's an easy way that we'll experiment with to place those outside the column or within the column. 33 00:03:09,190 --> 00:03:12,920 We go back to the home page. 34 00:03:13,160 --> 00:03:21,050 We can go down past the next section and you can see that there's also a nice dropdown menu item system 35 00:03:21,300 --> 00:03:28,810 up here and the default color is red. 36 00:03:29,010 --> 00:03:31,730 And so that's like an alternative color. 37 00:03:31,830 --> 00:03:34,080 That's kind of a highlight color within the theme. 38 00:03:34,140 --> 00:03:42,860 Also very changeable using the Genesis parent and child themes from Studio press. 39 00:03:42,950 --> 00:03:50,510 Finally this very bottom footer is a standard footer that looks very similar to this on most of the 40 00:03:50,510 --> 00:03:51,890 Genesys child themes. 41 00:03:51,980 --> 00:03:57,150 And we'll be editing this content using a plugin. 42 00:03:57,150 --> 00:04:04,460 Let's take a look at this theme and it's widgets in the customize or inside of the Wordpress dashboard 43 00:04:05,780 --> 00:04:07,440 go ahead and roll over appearance. 44 00:04:07,440 --> 00:04:12,210 And let's just look at the Customize tab. 45 00:04:12,340 --> 00:04:17,800 We've played with the customize or a little bit before but you can see that there's a lot more items 46 00:04:17,800 --> 00:04:23,920 in the customize or that have been provided by Studio press and the Genesis framework inside of this 47 00:04:23,920 --> 00:04:27,050 parallax pro theme. 48 00:04:27,200 --> 00:04:32,540 Let's just go through each of them in the site identity go ahead and change the title and the tagline 49 00:04:32,690 --> 00:04:33,620 to anything you like. 50 00:04:33,620 --> 00:04:36,700 This is the default tag line. 51 00:04:40,440 --> 00:04:46,050 You can see that as always the customize or gives you a live preview. 52 00:04:51,060 --> 00:04:57,540 Now it's trying to preview the changes but the tagline does not actually appear on the header or the 53 00:04:57,540 --> 00:04:58,760 home page of the site. 54 00:04:58,770 --> 00:04:59,520 In this theme 55 00:05:06,540 --> 00:05:08,430 great now I don't have to save and publish this. 56 00:05:08,430 --> 00:05:12,610 I can still go back and make additional changes. 57 00:05:12,970 --> 00:05:18,940 If you check out the background images these images are the default images that come with the parallax 58 00:05:18,940 --> 00:05:25,780 pro theme and you can see that they're sort of dark and faded black and white images and that's so that 59 00:05:25,780 --> 00:05:30,800 the White copy comes out looking great on top of the background. 60 00:05:30,940 --> 00:05:37,830 You can choose to leave these images the way they are or choose some large images of your own. 61 00:05:37,960 --> 00:05:45,310 And if you like you can even go into Photoshop or Pichler or another imaging image editing program and 62 00:05:45,310 --> 00:05:50,920 Faid them a little bit darker and see what they look like behind the white copy. 63 00:05:50,960 --> 00:05:57,890 I'm going to go ahead and replace one of these images and by going to the live site right clicking and 64 00:05:57,890 --> 00:06:04,490 clicking view background image I can see the background image here and look at its properties to see 65 00:06:04,820 --> 00:06:06,070 how large it is. 66 00:06:10,060 --> 00:06:16,490 This image is 16:00 by 10 50. 67 00:06:16,660 --> 00:06:25,130 I'll hit back so when I go and open my image editor I'll be looking for an image that's at least 6500 68 00:06:25,130 --> 00:06:31,580 pixels I'm in Photoshop and I've opened one of my full size images. 69 00:06:31,610 --> 00:06:34,770 I can see that it's fifty one hundred eighty four pixels wide. 70 00:06:34,940 --> 00:06:41,280 So I would like to change the size of that to 6500 pixels. 71 00:06:41,390 --> 00:06:43,390 Sixteen hundred by ten sixty seven. 72 00:06:43,550 --> 00:06:47,630 That's close to the width and height of the other image. 73 00:06:47,730 --> 00:06:51,200 I'll just look at it at 50 percent so that I can see the whole thing. 74 00:06:51,440 --> 00:06:55,940 And in Photoshop you can just make some general adjustments. 75 00:06:55,940 --> 00:07:03,180 And if I just go to the brightness and contrast tab I can bring the brightness down just a little bit. 76 00:07:05,520 --> 00:07:11,280 I want to be sure that the white copy on the Web site will come out looking nice on top of this background 77 00:07:11,280 --> 00:07:12,500 image. 78 00:07:12,660 --> 00:07:14,200 Now as we've done before. 79 00:07:14,340 --> 00:07:21,060 Click file save for web or something similar or similar within your image editing program and I'll use 80 00:07:21,060 --> 00:07:23,670 a JPEG for a photographic image. 81 00:07:23,670 --> 00:07:25,800 Let's see it medium. 82 00:07:25,830 --> 00:07:29,040 It does look real nice it's only 188 K.. 83 00:07:29,310 --> 00:07:33,650 Now how big does it get when I go to the high setting 392. 84 00:07:33,690 --> 00:07:37,210 That's a little large and the quality is not that much better. 85 00:07:37,410 --> 00:07:39,810 So go to a medium and watch my image. 86 00:07:39,870 --> 00:07:41,040 It looks just fine. 87 00:07:41,370 --> 00:07:51,870 So I click save and under you know I'm going to actually make a new folder on my desktop and I'm in 88 00:07:51,870 --> 00:08:06,460 a car of this one parallax. 89 00:08:06,540 --> 00:08:10,260 I'll save that image with the same file name right inside of it. 90 00:08:10,260 --> 00:08:19,240 And so let's go back to the Web site itself in the customize or I can say change image and I'm going 91 00:08:19,240 --> 00:08:27,360 to go ahead and upload an image from my desktop. 92 00:08:27,590 --> 00:08:35,850 There's the parallax folder open this image uploads pretty fast because it's only 192 K according to 93 00:08:35,850 --> 00:08:38,040 WordPress 6400 pixels wide 94 00:08:42,500 --> 00:08:48,250 great you can see that the whites if you have some whites in your image the White copy could get lost. 95 00:08:50,720 --> 00:08:58,440 Other themes that were within the Genesis framework and the studio press stable of themes have a and 96 00:08:58,460 --> 00:09:06,110 opacity or a dimming factor that allows the images no matter how bright you upload them to be visible 97 00:09:06,200 --> 00:09:08,320 in front of the copy parallax. 98 00:09:08,320 --> 00:09:12,480 You want to make sure you have images that are just dark enough so that they look good. 99 00:09:14,770 --> 00:09:20,440 Let's go back we haven't published any of these changes yet so I'll make sure and remember that if I 100 00:09:20,440 --> 00:09:27,460 want to use an image instead of this all caps copy for the site title that's called a header image here 101 00:09:27,490 --> 00:09:32,040 and it gives me a recommended size 360 by 70. 102 00:09:32,110 --> 00:09:34,840 And so I'm going to open up Photoshop. 103 00:09:35,020 --> 00:09:42,430 I'm going to click file new and I want to create a new file that's exactly the right size for my theme. 104 00:09:43,490 --> 00:09:50,660 360 by 70 pixels there is you can see that it's going to fit in the header there very nicely since I 105 00:09:50,990 --> 00:09:59,630 see that the theme looks like it would look good with a black background and some white a white logo 106 00:09:59,630 --> 00:10:00,690 right here. 107 00:10:00,740 --> 00:10:06,230 I'm going to go ahead go into Photoshop and with black selected. 108 00:10:06,420 --> 00:10:06,890 Yeah. 109 00:10:08,060 --> 00:10:15,190 I'm going to make that a black background and then I'll create my logo. 110 00:10:15,380 --> 00:10:24,200 Just real quick I could use any typeface that I like needs to be a lot smaller than that doesn't it. 111 00:10:24,200 --> 00:10:27,540 There we go maybe about 12 pixels. 112 00:10:30,590 --> 00:10:33,320 24 pixels in the color of white 113 00:10:37,880 --> 00:10:48,540 or I'll just type parallax pro in white. 114 00:10:48,630 --> 00:10:50,710 Looks like I can make it quite a bit larger. 115 00:10:56,380 --> 00:10:57,130 There we go. 116 00:11:04,270 --> 00:11:04,830 Nice. 117 00:11:04,840 --> 00:11:13,570 Now I'll just first save it as a Photoshop document inside of the folder that I have 118 00:11:21,460 --> 00:11:23,920 called parallax logo. 119 00:11:24,030 --> 00:11:27,080 That way I have the original that I can edit if I need to. 120 00:11:27,270 --> 00:11:32,090 But I am going to make that change and save it for web and devices. 121 00:11:32,220 --> 00:11:37,630 And in this case since it's more of a graphic than a photo I should use a PNB file. 122 00:11:37,650 --> 00:11:41,930 Only one kilobyte. 123 00:11:42,240 --> 00:11:44,500 So I'll save that as Parallax logo. 124 00:11:44,550 --> 00:11:48,050 Dot ping. 125 00:11:48,130 --> 00:11:54,730 And as I go back into the editor and the customize or I can upload 126 00:11:58,330 --> 00:12:00,870 the parallax logo PLG file 127 00:12:04,470 --> 00:12:05,550 select and crop. 128 00:12:05,580 --> 00:12:11,110 If you have a different size just like we use the logo image in one of our local sites. 129 00:12:11,340 --> 00:12:17,800 I don't need to crop it because I've made it the exact size that it needs to be in Photoshop. 130 00:12:18,180 --> 00:12:23,820 So there's the parallax pro and as I scroll up you can see that the content slides underneath the menu 131 00:12:24,180 --> 00:12:26,800 and the title and the menu stay there in parallel. 132 00:12:26,810 --> 00:12:31,540 Pro is clickable to the home page. 133 00:12:31,660 --> 00:12:36,610 I'm going to go back here now after editing these first three items. 134 00:12:36,620 --> 00:12:40,340 I'll go ahead and save and publish this to make sure I've saved my changes. 135 00:12:43,500 --> 00:12:49,740 Now that we've made a few changes to the home page you can go through and look at what other changes 136 00:12:49,740 --> 00:12:52,780 are available to make inside of this customized. 137 00:12:52,830 --> 00:12:59,280 One of the largest places to look and to see what all the content is that I've included here as a part 138 00:12:59,280 --> 00:13:01,120 of this sambil Web site. 139 00:13:01,140 --> 00:13:08,040 Are the widgets areas these widgets areas obviously labeled home section 1 through 5 are for the home 140 00:13:08,040 --> 00:13:08,700 page. 141 00:13:08,720 --> 00:13:15,480 The header right is where I've placed this menu and that's how this Genesys theme is designed where 142 00:13:15,480 --> 00:13:23,100 there's not a primary or secondary menu item area for this header but it's a header right widget area 143 00:13:23,100 --> 00:13:27,930 that you can place anything you like up there including a search bar or really anything else that fits 144 00:13:27,930 --> 00:13:28,940 in that area. 145 00:13:28,950 --> 00:13:32,960 So there's a custom menu that I've made and labeled Hetter menu there. 146 00:13:34,480 --> 00:13:41,620 The home sections if you explore them you can see that I've used text widgets and certain little pieces 147 00:13:41,620 --> 00:13:49,100 of HVM l code to call that the nice buttons that they have and the title is formatted like this. 148 00:13:49,150 --> 00:13:55,010 And here is the size of the regular text inside of a text widget right there. 149 00:13:55,910 --> 00:13:59,020 You can explore these places a little bit. 150 00:13:59,060 --> 00:14:03,110 It's all about the same end of each. 151 00:14:03,110 --> 00:14:11,780 Also check out the color scheme there is red default color and parallax pro but then there's also blue 152 00:14:11,780 --> 00:14:14,310 green orange and pink option. 153 00:14:14,560 --> 00:14:22,290 And if I just choose blue and roll over you can see that that would be the blue as well as in the footer. 154 00:14:23,590 --> 00:14:34,850 These actually stay red inside of the social icons widget. 155 00:14:34,890 --> 00:14:39,650 The last thing we'll look at is the breadcrumbs feature there. 156 00:14:39,720 --> 00:14:45,600 Breadcrumbs means it's really a a way to get back to where you were and a way for the Web site to tell 157 00:14:45,600 --> 00:14:47,920 visitors where in the site they are. 158 00:14:48,090 --> 00:14:54,660 So if I say I want breadcrumbs on pages and I might be able to just just take a look here's a sample 159 00:14:54,660 --> 00:15:01,740 page within the Web site and then at the top you can see that you are here Home and we're on the sample 160 00:15:01,800 --> 00:15:03,450 page. 161 00:15:03,630 --> 00:15:09,430 We click back home that's kickable to the home page and I can enable breadcrumbs on pages and maybe 162 00:15:09,430 --> 00:15:18,370 on single posts if I like a click save and publish and then close the customize or 163 00:15:21,400 --> 00:15:27,820 you can see that when you do open the appearance customize window it opens up a modal window in front 164 00:15:27,820 --> 00:15:30,160 of whatever page you are on before. 165 00:15:30,220 --> 00:15:37,510 And so when I close the customize or I'm back to my profile page if I go back to the site that I have 166 00:15:37,510 --> 00:15:44,740 open in my other tab and refresh the page you can see that my changes have been made. 167 00:15:48,910 --> 00:15:53,860 Great. 168 00:15:53,970 --> 00:15:59,550 In this video you started to customize the parallax pro theme from Studio press built on the Genesis 169 00:15:59,550 --> 00:16:05,370 framework by using the customize or you had the logo changed one of the background images on the home 170 00:16:05,370 --> 00:16:10,780 page changed the accent color and added breadcrumbs to help with navigation. 171 00:16:11,250 --> 00:16:16,410 In the next video we'll continue to modify the parallax pro theme within the student's sandbox and look 172 00:16:16,410 --> 00:16:20,670 at exactly how the Genesis framework adds features to the Wordpress editing environment.