In this video you'll customize your first Genesys child theme from Studio press inside the student's
sandbox by using a framework arrangement themed developers are able to add more editing and customization
options for their child themes.
We'll check out the Genesis framework and understand the difference between using a child theme that
works with a framework parent theme and creating a child theme yourself from a standard theme.
First navigator's students W.P. of course dotcom.
We're going to be opening up your sandbox environment that you created in a previous chapter.
If you didn't do that yet you can click get your sandbox at the top right or get yours in the center
button.
But if you have created one already you can click log in at the top right and go ahead and log in with
your username and your password.
That will open your website dashboard where at the top you can see the name of the site and the visit
site button might as well right click and open the site itself in a new tab.
So we can go back and forth and do some edits.
You can see that the default site that comes up is the same theme as the one in student dot W.P. of
course dot com it's agenesis theme called parallax pro and I've got a little bit of design work done
inside this theme as your default which is the home page of the Genesis child theme one of the things
that you've learned that I like to do is to go in to the dashboard when I first open my wordpress installation
and edit my profile page and uncheck the toolbar checkbox.
I like to have the toolbar absent from the top of the front facing site when I'm looking at it so that
I know exactly what it looks like as I'm designing it for a client or for myself.
A few of the unique things about the parallax pro child theme is that it's got this background images
that move slightly and give that parallax effect to the background.
And it's got this custom home page template that is powered by widgets within Genesis.
If you haven't already take a small tour of this home page there's a nice button.
It doesn't link anywhere but it's just a small piece of code in the home page widget that provides a
nice button within the Genesis theme.
A sample page brings you to one of the interior pages that posts and pages will look like you can see
that the menu stays in present at the top and that there's a nice white full with background in it.
The interior pages these are pull images that stick out beyond the margins of a column where the words
are.
And there's an easy way that we'll experiment with to place those outside the column or within the column.
We go back to the home page.
We can go down past the next section and you can see that there's also a nice dropdown menu item system
up here and the default color is red.
And so that's like an alternative color.
That's kind of a highlight color within the theme.
Also very changeable using the Genesis parent and child themes from Studio press.
Finally this very bottom footer is a standard footer that looks very similar to this on most of the
Genesys child themes.
And we'll be editing this content using a plugin.
Let's take a look at this theme and it's widgets in the customize or inside of the Wordpress dashboard
go ahead and roll over appearance.
And let's just look at the Customize tab.
We've played with the customize or a little bit before but you can see that there's a lot more items
in the customize or that have been provided by Studio press and the Genesis framework inside of this
parallax pro theme.
Let's just go through each of them in the site identity go ahead and change the title and the tagline
to anything you like.
This is the default tag line.
You can see that as always the customize or gives you a live preview.
Now it's trying to preview the changes but the tagline does not actually appear on the header or the
home page of the site.
In this theme
great now I don't have to save and publish this.
I can still go back and make additional changes.
If you check out the background images these images are the default images that come with the parallax
pro theme and you can see that they're sort of dark and faded black and white images and that's so that
the White copy comes out looking great on top of the background.
You can choose to leave these images the way they are or choose some large images of your own.
And if you like you can even go into Photoshop or Pichler or another imaging image editing program and
Faid them a little bit darker and see what they look like behind the white copy.
I'm going to go ahead and replace one of these images and by going to the live site right clicking and
clicking view background image I can see the background image here and look at its properties to see
how large it is.
This image is 16:00 by 10 50.
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
pixels I'm in Photoshop and I've opened one of my full size images.
I can see that it's fifty one hundred eighty four pixels wide.
So I would like to change the size of that to 6500 pixels.
Sixteen hundred by ten sixty seven.
That's close to the width and height of the other image.
I'll just look at it at 50 percent so that I can see the whole thing.
And in Photoshop you can just make some general adjustments.
And if I just go to the brightness and contrast tab I can bring the brightness down just a little bit.
I want to be sure that the white copy on the Web site will come out looking nice on top of this background
image.
Now as we've done before.
Click file save for web or something similar or similar within your image editing program and I'll use
a JPEG for a photographic image.
Let's see it medium.
It does look real nice it's only 188 K..
Now how big does it get when I go to the high setting 392.
That's a little large and the quality is not that much better.
So go to a medium and watch my image.
It looks just fine.
So I click save and under you know I'm going to actually make a new folder on my desktop and I'm in
a car of this one parallax.
I'll save that image with the same file name right inside of it.
And so let's go back to the Web site itself in the customize or I can say change image and I'm going
to go ahead and upload an image from my desktop.
There's the parallax folder open this image uploads pretty fast because it's only 192 K according to
WordPress 6400 pixels wide
great you can see that the whites if you have some whites in your image the White copy could get lost.
Other themes that were within the Genesis framework and the studio press stable of themes have a and
opacity or a dimming factor that allows the images no matter how bright you upload them to be visible
in front of the copy parallax.
You want to make sure you have images that are just dark enough so that they look good.
Let's go back we haven't published any of these changes yet so I'll make sure and remember that if I
want to use an image instead of this all caps copy for the site title that's called a header image here
and it gives me a recommended size 360 by 70.
And so I'm going to open up Photoshop.
I'm going to click file new and I want to create a new file that's exactly the right size for my theme.
360 by 70 pixels there is you can see that it's going to fit in the header there very nicely since I
see that the theme looks like it would look good with a black background and some white a white logo
right here.
I'm going to go ahead go into Photoshop and with black selected.
Yeah.
I'm going to make that a black background and then I'll create my logo.
Just real quick I could use any typeface that I like needs to be a lot smaller than that doesn't it.
There we go maybe about 12 pixels.
24 pixels in the color of white
or I'll just type parallax pro in white.
Looks like I can make it quite a bit larger.
There we go.
Nice.
Now I'll just first save it as a Photoshop document inside of the folder that I have
called parallax logo.
That way I have the original that I can edit if I need to.
But I am going to make that change and save it for web and devices.
And in this case since it's more of a graphic than a photo I should use a PNB file.
Only one kilobyte.
So I'll save that as Parallax logo.
Dot ping.
And as I go back into the editor and the customize or I can upload
the parallax logo PLG file
select and crop.
If you have a different size just like we use the logo image in one of our local sites.
I don't need to crop it because I've made it the exact size that it needs to be in Photoshop.
So there's the parallax pro and as I scroll up you can see that the content slides underneath the menu
and the title and the menu stay there in parallel.
Pro is clickable to the home page.
I'm going to go back here now after editing these first three items.
I'll go ahead and save and publish this to make sure I've saved my changes.
Now that we've made a few changes to the home page you can go through and look at what other changes
are available to make inside of this customized.
One of the largest places to look and to see what all the content is that I've included here as a part
of this sambil Web site.
Are the widgets areas these widgets areas obviously labeled home section 1 through 5 are for the home
page.
The header right is where I've placed this menu and that's how this Genesys theme is designed where
there's not a primary or secondary menu item area for this header but it's a header right widget area
that you can place anything you like up there including a search bar or really anything else that fits
in that area.
So there's a custom menu that I've made and labeled Hetter menu there.
The home sections if you explore them you can see that I've used text widgets and certain little pieces
of HVM l code to call that the nice buttons that they have and the title is formatted like this.
And here is the size of the regular text inside of a text widget right there.
You can explore these places a little bit.
It's all about the same end of each.
Also check out the color scheme there is red default color and parallax pro but then there's also blue
green orange and pink option.
And if I just choose blue and roll over you can see that that would be the blue as well as in the footer.
These actually stay red inside of the social icons widget.
The last thing we'll look at is the breadcrumbs feature there.
Breadcrumbs means it's really a a way to get back to where you were and a way for the Web site to tell
visitors where in the site they are.
So if I say I want breadcrumbs on pages and I might be able to just just take a look here's a sample
page within the Web site and then at the top you can see that you are here Home and we're on the sample
page.
We click back home that's kickable to the home page and I can enable breadcrumbs on pages and maybe
on single posts if I like a click save and publish and then close the customize or
you can see that when you do open the appearance customize window it opens up a modal window in front
of whatever page you are on before.
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
open in my other tab and refresh the page you can see that my changes have been made.
Great.
In this video you started to customize the parallax pro theme from Studio press built on the Genesis
framework by using the customize or you had the logo changed one of the background images on the home
page changed the accent color and added breadcrumbs to help with navigation.
In the next video we'll continue to modify the parallax pro theme within the student's sandbox and look
at exactly how the Genesis framework adds features to the Wordpress editing environment.