In this video we'll continue editing the parallax pro-child theme in the Genesis framework while making
our edits.
We'll try to preserve the integrity of the child theme by not editing the files as we did before with
our own child theme but instead use a custom CSL plug in to avoid changing the themes files because
frameworks like Genesys use child themes to connect their extra functions to working themes.
You can't create your own child theme to hold your code at its will learn how to edit the C S S without
messing with the child theme in this case.
Let's start by looking at the sample page and talk about how this Genesys theme provides a CSSA class
we can add to an image to make a pull image pull outside of the column with like this open the dashboard
of your sandbox site at W.P. of course dot com and go to pages all pages and then let's look at that
sample page
within the sample page.
It doesn't look exactly like it does while being stifled by the theme itself.
But it's a nice imitation of it.
If you look at any of the images you can click one and click the little pencil edit button and it doesn't
look like everything is different.
Anything is different.
There an on line left.
We have a medium sized defined with no link.
But if you open the Advanced Options dropdown you'll see that there is an image CSSA class here called
pull left.
If I remove that class and update the image and then update the page it doesn't change very much inside
of the editing window but once that's saved and I go to the sample page and refresh you can see that
it doesn't pull the image outside of the border like it does with these others but instead places it
in line to the column with next.
Let's go down to the footer and this footer area which is present on every page of the website.
Like I said is a Genesis standard will use a plugin to access the content on this footer and easily
change it.
So go back to the dashboard and click plugins.
There's a large assortment of plug ins available to you that will be using to customize and experiment
with premium themes and plug ins.
But I want you to go down and find Genesis.
Simple edits just click activate now this plugin is designed for sites that are using Genesys framework
powered themes only and it'll say that if you look at the plug in inside or the plug in inside the plugin
repository.
This is a freely available plug in but it is only designed for Genesys sites.
Now that we have it activated under the Genesis menu there is a simple edits button under simple edits
you could see that it's got an area to edit the Mehta which is above and below the title on post and
the footer credits text is also editable here.
If I want to get rid of the child theme link and the Genesis link because I'm customizing this for a
client I might take out the Wordpress link as well but leave the footer log in and log out button since
it does offer the copyright and a year right here.
I'll usually put the name of the business and let's just use the name of the site that I'm using here.
Right after the copyright save settings and let's go back and refresh the page the footer is available
on every page so I can see OK.
That would be the name of the business.
And then there is a log in and a log out button which can be a convenience for clients that want to
go in and add blog posts or different images or pages to their Web sites.
Back in the dashboard.
Let's open the Customize again and look at some of the extras that Genesis themes and particularly the
parallax pro-Atheism offers for editing inside of the customize or one of the things that Genesis offers
is a standardization of different types of layout.
When you're looking at content within the theme this would be besides the home page but inside on perhaps
one of the sample pages for with content is the default with parallax.
But if you wanted to have content and then a sidebar then you could present the site in that way where
the pull images don't work the same way.
But there's room for a sidebar that could run down the length of the page.
And then there's a layout that is provided with the theme where the sidebars on the left and the content
column is on the right.
I'm going to leave it at for with content.
And let's go back and look at the next one.
Under content archives Genesys always gives us a lot of different options for how we want to display
say category pages or tag archive pages pages that show lists of posts or lists of pages we want to
display the post content or can we let the theme decide how long and how we're going to display post
excerpts instead that way we don't have to manually put in a read more link into each post in a blog
posting area.
We can let the theme take care of our excerpts for us and we can choose how many characters we want
in each of those experts.
Excerpts.
Also we can choose to display the featured image in each of the post listings and which size we want
to do as well as whether you want the featured image to the left or the right or with our alignment.
And then at the bottom of a list of posts there will be some navigation and within Genesys there is
either a previous and next button or a numeric list of posts that can make it easier for the visitors
to the Web site to navigate to different pages.
That's just some examples of how the Genesis framework uses its parent theme and the child themes available
and built on top of it to use some different functionality that the developers can place within the
customized.
Let's go back to the dashboard.
And since I don't want to save my changes I'm going to go ahead and click the leave page button but
my browser is telling me you haven't saved your changes and so is asking me whether I want to stay on
the page to save those.
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
without editing the child theme called parallax pro here.
If we go to a plugin in the list called simple custom C Ss and activate it this will give us a place
to put custom styles that don't get affected or don't get placed within the child theme style sheet.
Under appearance custom CSSA you can see it's a very simple editing window and you just enter your custom
CSSA here and then click update and add it at the end of the stylesheet.
Now what simple edit could we make using CSSA to our parallax site.
What if we wanted to edit the breadcrumbs up here.
Maybe we could make the bread crumbs all caps instead of upper and lower case just then.
As an example of the kind of change that you could make it could be the same colors if you wanted to
use a custom color the size of the fonts the width of the column.
All kinds of different things you can control with the style sheet and making edits using simple custom
CSSA separate from the style sheet.
But one thing I need to do is find where are the CSSA selectors that I need to use and what are they
to edit the bread crumbs.
Well I'm going to open tools web developer under Firefox and use the inspector.
The Chrome Web Developer Tools are also available if you're using that browser and if I want to select
the breadcrumbs area I can look down here under the styles and I can see that it's a class called breadcrumb
dot breadcrumb And here's the a little block of code that I can use if I just select it here and hit
Control C for copy.
Now I can close that and just place that whole piece of code in there.
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
leave it there or I could delete it.
But for now I'll just leave it there if I hit enter.
Use one more tab to line up my code.
I could use a text transform.
Now I know this exists because I've used it before.
But if you look up in Google or another search engine something like Tex transform you can look up all
the CSX properties and look at what they do.
It's a text transform colon uppercase and then with a semicolon after Zardoz copy that
plays it back into my text block my code block and hit update custom C Ss.
Now this is adding this C-s as property not within the child theme but within this plugin that I am
using some not editing the child theme just in case it gets updated.
But if I refresh the page there we are all uppercase.
So we've made a fundamental change to the breadcrumbs on the website without editing the CSSA or the
stylesheet of the child.
The now I know I added an additional line to the CSA selector here but what if I wanted to change something.
That is an existing selector if I wanted to make the font size half as high.
I could just change it from 20 to 10 and these CSSA selectors are going to overwrite the original ones
so that I can make that change.
And I don't have to change the stylesheet of the child theme.
Now that's a little small so I might just go ahead and revert back to something like 16
say that and let's see how it looks great.
That looks nice.
One more change I'd like to make is to go back to the home page and if you recall when we changed to
the color blue for the accent colors within the Genesis theme settings it didn't change our social icons
here to that same color.
So if I just open up the tools again and the web developer toolbar look at the Inspector I can choose
one of these and I can see OK.
Yep that's the simple search social icons.
Well I really just need to find out what color is the blue.
So if I go down to something that turns blue and select that whoops click inspector again select that
with the inspector.
I can see that the blue color here is 4 for a c e 8.
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
actually have to use the simple custom CSSA to make this customisation if I just go into my widgets
area I know that I'm using a.
In fact let's look at this plugin before we go to the widgets area.
This plugin comes activated the simple social icons plug in again for Genesys.
If you look under the widgets it gives you a widget that you can drag into agenesis widget area and
I've done that in Home section 5.
You can see that over here it's a simple social icons widget that I dragged over here and then it's
got some configurations and one of them is the background hover color so I'll select that and I just
had copied the color number.
I'll paste it right in there.
Looks like it's that same blue that I want and I'll hit save
as simple as that.
Another Genesys powered plug in.
That's easily editable and if I go to the bottom of the page.
Now I've got blue icons that match my rollover colors all over the rest of the site.
In this lesson you made further edits to the Genesis child theme parallax pro and even went as far as
adding some CSSA styles using a plugin instead of editing the child theme in the next video will finish
the chapter by exploring other options for adding code to child themes without editing their file structure
which is useful for using frameworks like Gen.