1 00:00:00,550 --> 00:00:06,520 In this video we'll continue editing the parallax pro-child theme in the Genesis framework while making 2 00:00:06,520 --> 00:00:07,260 our edits. 3 00:00:07,330 --> 00:00:12,520 We'll try to preserve the integrity of the child theme by not editing the files as we did before with 4 00:00:12,520 --> 00:00:19,270 our own child theme but instead use a custom CSL plug in to avoid changing the themes files because 5 00:00:19,270 --> 00:00:24,150 frameworks like Genesys use child themes to connect their extra functions to working themes. 6 00:00:24,340 --> 00:00:30,430 You can't create your own child theme to hold your code at its will learn how to edit the C S S without 7 00:00:30,430 --> 00:00:33,000 messing with the child theme in this case. 8 00:00:33,010 --> 00:00:41,590 Let's start by looking at the sample page and talk about how this Genesys theme provides a CSSA class 9 00:00:41,590 --> 00:00:50,380 we can add to an image to make a pull image pull outside of the column with like this open the dashboard 10 00:00:50,380 --> 00:00:58,000 of your sandbox site at W.P. of course dot com and go to pages all pages and then let's look at that 11 00:00:58,000 --> 00:00:58,910 sample page 12 00:01:02,080 --> 00:01:03,270 within the sample page. 13 00:01:03,270 --> 00:01:09,260 It doesn't look exactly like it does while being stifled by the theme itself. 14 00:01:09,430 --> 00:01:11,980 But it's a nice imitation of it. 15 00:01:12,070 --> 00:01:18,840 If you look at any of the images you can click one and click the little pencil edit button and it doesn't 16 00:01:18,840 --> 00:01:20,460 look like everything is different. 17 00:01:20,460 --> 00:01:21,690 Anything is different. 18 00:01:21,690 --> 00:01:23,200 There an on line left. 19 00:01:23,250 --> 00:01:25,730 We have a medium sized defined with no link. 20 00:01:25,920 --> 00:01:32,850 But if you open the Advanced Options dropdown you'll see that there is an image CSSA class here called 21 00:01:33,120 --> 00:01:34,850 pull left. 22 00:01:34,860 --> 00:01:41,970 If I remove that class and update the image and then update the page it doesn't change very much inside 23 00:01:41,970 --> 00:01:48,270 of the editing window but once that's saved and I go to the sample page and refresh you can see that 24 00:01:48,270 --> 00:01:53,520 it doesn't pull the image outside of the border like it does with these others but instead places it 25 00:01:53,820 --> 00:01:58,100 in line to the column with next. 26 00:01:58,220 --> 00:02:04,570 Let's go down to the footer and this footer area which is present on every page of the website. 27 00:02:04,580 --> 00:02:14,660 Like I said is a Genesis standard will use a plugin to access the content on this footer and easily 28 00:02:14,720 --> 00:02:15,550 change it. 29 00:02:16,870 --> 00:02:20,420 So go back to the dashboard and click plugins. 30 00:02:22,330 --> 00:02:27,700 There's a large assortment of plug ins available to you that will be using to customize and experiment 31 00:02:27,940 --> 00:02:30,400 with premium themes and plug ins. 32 00:02:30,550 --> 00:02:33,640 But I want you to go down and find Genesis. 33 00:02:33,670 --> 00:02:43,030 Simple edits just click activate now this plugin is designed for sites that are using Genesys framework 34 00:02:43,030 --> 00:02:49,480 powered themes only and it'll say that if you look at the plug in inside or the plug in inside the plugin 35 00:02:49,480 --> 00:02:50,520 repository. 36 00:02:50,650 --> 00:02:55,210 This is a freely available plug in but it is only designed for Genesys sites. 37 00:02:55,360 --> 00:03:02,960 Now that we have it activated under the Genesis menu there is a simple edits button under simple edits 38 00:03:02,970 --> 00:03:10,680 you could see that it's got an area to edit the Mehta which is above and below the title on post and 39 00:03:11,220 --> 00:03:15,340 the footer credits text is also editable here. 40 00:03:15,630 --> 00:03:23,610 If I want to get rid of the child theme link and the Genesis link because I'm customizing this for a 41 00:03:24,030 --> 00:03:34,550 client I might take out the Wordpress link as well but leave the footer log in and log out button since 42 00:03:34,550 --> 00:03:38,910 it does offer the copyright and a year right here. 43 00:03:38,930 --> 00:03:45,980 I'll usually put the name of the business and let's just use the name of the site that I'm using here. 44 00:03:46,340 --> 00:03:57,420 Right after the copyright save settings and let's go back and refresh the page the footer is available 45 00:03:57,420 --> 00:03:59,500 on every page so I can see OK. 46 00:03:59,520 --> 00:04:01,540 That would be the name of the business. 47 00:04:01,650 --> 00:04:06,600 And then there is a log in and a log out button which can be a convenience for clients that want to 48 00:04:06,600 --> 00:04:11,490 go in and add blog posts or different images or pages to their Web sites. 49 00:04:13,780 --> 00:04:15,270 Back in the dashboard. 50 00:04:15,460 --> 00:04:22,090 Let's open the Customize again and look at some of the extras that Genesis themes and particularly the 51 00:04:22,090 --> 00:04:30,620 parallax pro-Atheism offers for editing inside of the customize or one of the things that Genesis offers 52 00:04:30,620 --> 00:04:34,740 is a standardization of different types of layout. 53 00:04:34,880 --> 00:04:42,080 When you're looking at content within the theme this would be besides the home page but inside on perhaps 54 00:04:42,080 --> 00:04:48,420 one of the sample pages for with content is the default with parallax. 55 00:04:48,540 --> 00:04:56,070 But if you wanted to have content and then a sidebar then you could present the site in that way where 56 00:04:56,190 --> 00:04:59,190 the pull images don't work the same way. 57 00:04:59,520 --> 00:05:04,440 But there's room for a sidebar that could run down the length of the page. 58 00:05:04,800 --> 00:05:11,100 And then there's a layout that is provided with the theme where the sidebars on the left and the content 59 00:05:11,100 --> 00:05:14,480 column is on the right. 60 00:05:14,620 --> 00:05:16,490 I'm going to leave it at for with content. 61 00:05:16,900 --> 00:05:19,780 And let's go back and look at the next one. 62 00:05:20,650 --> 00:05:27,720 Under content archives Genesys always gives us a lot of different options for how we want to display 63 00:05:28,110 --> 00:05:39,120 say category pages or tag archive pages pages that show lists of posts or lists of pages we want to 64 00:05:39,120 --> 00:05:46,380 display the post content or can we let the theme decide how long and how we're going to display post 65 00:05:46,680 --> 00:05:53,280 excerpts instead that way we don't have to manually put in a read more link into each post in a blog 66 00:05:53,280 --> 00:05:54,460 posting area. 67 00:05:54,660 --> 00:06:01,650 We can let the theme take care of our excerpts for us and we can choose how many characters we want 68 00:06:01,650 --> 00:06:03,260 in each of those experts. 69 00:06:03,270 --> 00:06:04,860 Excerpts. 70 00:06:04,860 --> 00:06:13,800 Also we can choose to display the featured image in each of the post listings and which size we want 71 00:06:13,800 --> 00:06:22,140 to do as well as whether you want the featured image to the left or the right or with our alignment. 72 00:06:22,430 --> 00:06:28,880 And then at the bottom of a list of posts there will be some navigation and within Genesys there is 73 00:06:28,880 --> 00:06:36,290 either a previous and next button or a numeric list of posts that can make it easier for the visitors 74 00:06:36,290 --> 00:06:40,500 to the Web site to navigate to different pages. 75 00:06:40,690 --> 00:06:48,230 That's just some examples of how the Genesis framework uses its parent theme and the child themes available 76 00:06:48,250 --> 00:06:53,950 and built on top of it to use some different functionality that the developers can place within the 77 00:06:53,990 --> 00:06:56,560 customized. 78 00:06:56,790 --> 00:06:58,660 Let's go back to the dashboard. 79 00:06:58,800 --> 00:07:04,830 And since I don't want to save my changes I'm going to go ahead and click the leave page button but 80 00:07:05,010 --> 00:07:10,440 my browser is telling me you haven't saved your changes and so is asking me whether I want to stay on 81 00:07:10,440 --> 00:07:12,600 the page to save those. 82 00:07:12,600 --> 00:07:20,160 In any case let's go to plug ins and what I'd like to do is to make a custom change to the style sheet 83 00:07:20,370 --> 00:07:24,690 without editing the child theme called parallax pro here. 84 00:07:24,690 --> 00:07:33,270 If we go to a plugin in the list called simple custom C Ss and activate it this will give us a place 85 00:07:33,510 --> 00:07:41,450 to put custom styles that don't get affected or don't get placed within the child theme style sheet. 86 00:07:42,440 --> 00:07:51,440 Under appearance custom CSSA you can see it's a very simple editing window and you just enter your custom 87 00:07:51,440 --> 00:07:58,350 CSSA here and then click update and add it at the end of the stylesheet. 88 00:07:58,430 --> 00:08:05,240 Now what simple edit could we make using CSSA to our parallax site. 89 00:08:05,240 --> 00:08:07,550 What if we wanted to edit the breadcrumbs up here. 90 00:08:07,640 --> 00:08:14,050 Maybe we could make the bread crumbs all caps instead of upper and lower case just then. 91 00:08:14,120 --> 00:08:19,580 As an example of the kind of change that you could make it could be the same colors if you wanted to 92 00:08:19,580 --> 00:08:24,170 use a custom color the size of the fonts the width of the column. 93 00:08:24,320 --> 00:08:30,140 All kinds of different things you can control with the style sheet and making edits using simple custom 94 00:08:30,140 --> 00:08:32,850 CSSA separate from the style sheet. 95 00:08:33,350 --> 00:08:40,160 But one thing I need to do is find where are the CSSA selectors that I need to use and what are they 96 00:08:40,460 --> 00:08:42,510 to edit the bread crumbs. 97 00:08:42,950 --> 00:08:48,760 Well I'm going to open tools web developer under Firefox and use the inspector. 98 00:08:49,100 --> 00:08:55,280 The Chrome Web Developer Tools are also available if you're using that browser and if I want to select 99 00:08:55,340 --> 00:09:04,060 the breadcrumbs area I can look down here under the styles and I can see that it's a class called breadcrumb 100 00:09:04,070 --> 00:09:12,580 dot breadcrumb And here's the a little block of code that I can use if I just select it here and hit 101 00:09:12,580 --> 00:09:15,210 Control C for copy. 102 00:09:15,220 --> 00:09:21,670 Now I can close that and just place that whole piece of code in there. 103 00:09:21,680 --> 00:09:27,710 I know that I want to leave much of this the same in fact I'm leave all that the same so I can just 104 00:09:27,710 --> 00:09:30,780 leave it there or I could delete it. 105 00:09:31,040 --> 00:09:33,740 But for now I'll just leave it there if I hit enter. 106 00:09:33,880 --> 00:09:36,350 Use one more tab to line up my code. 107 00:09:36,710 --> 00:09:40,880 I could use a text transform. 108 00:09:40,880 --> 00:09:43,760 Now I know this exists because I've used it before. 109 00:09:43,910 --> 00:09:50,840 But if you look up in Google or another search engine something like Tex transform you can look up all 110 00:09:50,840 --> 00:09:54,440 the CSX properties and look at what they do. 111 00:09:54,470 --> 00:10:01,160 It's a text transform colon uppercase and then with a semicolon after Zardoz copy that 112 00:10:04,530 --> 00:10:10,700 plays it back into my text block my code block and hit update custom C Ss. 113 00:10:10,710 --> 00:10:16,620 Now this is adding this C-s as property not within the child theme but within this plugin that I am 114 00:10:16,620 --> 00:10:20,710 using some not editing the child theme just in case it gets updated. 115 00:10:21,560 --> 00:10:27,510 But if I refresh the page there we are all uppercase. 116 00:10:27,550 --> 00:10:33,910 So we've made a fundamental change to the breadcrumbs on the website without editing the CSSA or the 117 00:10:33,960 --> 00:10:35,400 stylesheet of the child. 118 00:10:35,410 --> 00:10:43,950 The now I know I added an additional line to the CSA selector here but what if I wanted to change something. 119 00:10:43,950 --> 00:10:49,590 That is an existing selector if I wanted to make the font size half as high. 120 00:10:49,680 --> 00:10:57,720 I could just change it from 20 to 10 and these CSSA selectors are going to overwrite the original ones 121 00:10:58,020 --> 00:10:59,750 so that I can make that change. 122 00:10:59,880 --> 00:11:04,460 And I don't have to change the stylesheet of the child theme. 123 00:11:04,470 --> 00:11:10,080 Now that's a little small so I might just go ahead and revert back to something like 16 124 00:11:14,070 --> 00:11:17,800 say that and let's see how it looks great. 125 00:11:17,870 --> 00:11:18,840 That looks nice. 126 00:11:20,220 --> 00:11:27,120 One more change I'd like to make is to go back to the home page and if you recall when we changed to 127 00:11:27,120 --> 00:11:35,580 the color blue for the accent colors within the Genesis theme settings it didn't change our social icons 128 00:11:35,580 --> 00:11:37,640 here to that same color. 129 00:11:37,740 --> 00:11:45,120 So if I just open up the tools again and the web developer toolbar look at the Inspector I can choose 130 00:11:45,120 --> 00:11:48,470 one of these and I can see OK. 131 00:11:48,510 --> 00:11:51,460 Yep that's the simple search social icons. 132 00:11:51,460 --> 00:11:56,020 Well I really just need to find out what color is the blue. 133 00:11:56,100 --> 00:12:02,760 So if I go down to something that turns blue and select that whoops click inspector again select that 134 00:12:02,760 --> 00:12:04,170 with the inspector. 135 00:12:04,170 --> 00:12:10,000 I can see that the blue color here is 4 for a c e 8. 136 00:12:10,150 --> 00:12:16,890 So I'm just going to hit control-C and copy that and I know that I can get out of here and if I don't 137 00:12:16,890 --> 00:12:26,760 actually have to use the simple custom CSSA to make this customisation if I just go into my widgets 138 00:12:26,760 --> 00:12:30,240 area I know that I'm using a. 139 00:12:30,240 --> 00:12:34,640 In fact let's look at this plugin before we go to the widgets area. 140 00:12:34,680 --> 00:12:41,610 This plugin comes activated the simple social icons plug in again for Genesys. 141 00:12:41,730 --> 00:12:47,580 If you look under the widgets it gives you a widget that you can drag into agenesis widget area and 142 00:12:47,580 --> 00:12:49,830 I've done that in Home section 5. 143 00:12:49,890 --> 00:12:54,870 You can see that over here it's a simple social icons widget that I dragged over here and then it's 144 00:12:54,870 --> 00:13:02,760 got some configurations and one of them is the background hover color so I'll select that and I just 145 00:13:02,760 --> 00:13:05,790 had copied the color number. 146 00:13:05,790 --> 00:13:07,270 I'll paste it right in there. 147 00:13:08,460 --> 00:13:12,090 Looks like it's that same blue that I want and I'll hit save 148 00:13:14,980 --> 00:13:16,240 as simple as that. 149 00:13:16,270 --> 00:13:18,490 Another Genesys powered plug in. 150 00:13:18,520 --> 00:13:22,960 That's easily editable and if I go to the bottom of the page. 151 00:13:23,170 --> 00:13:28,430 Now I've got blue icons that match my rollover colors all over the rest of the site. 152 00:13:31,090 --> 00:13:37,060 In this lesson you made further edits to the Genesis child theme parallax pro and even went as far as 153 00:13:37,060 --> 00:13:43,450 adding some CSSA styles using a plugin instead of editing the child theme in the next video will finish 154 00:13:43,450 --> 00:13:49,090 the chapter by exploring other options for adding code to child themes without editing their file structure 155 00:13:49,330 --> 00:13:51,880 which is useful for using frameworks like Gen.