00:00:12:26 - 00:00:15:21
So let's take a quick look at applying
00:00:15:27 - 00:00:21:19
brand colors
and some basic fonts onto your storefront.
00:00:21:26 - 00:00:25:06
So what we have
here is our basic storefront.
00:00:25:06 - 00:00:30:07
We've not done much to it at the moment,
so it's mostly default in its format.
00:00:31:04 - 00:00:33:07
The only thing that would change
so far as we've seen in
00:00:33:07 - 00:00:37:26
previous videos is the logo
at the top of the screen, everything else.
00:00:37:26 - 00:00:42:18
So the font selection on the home page,
the font selection on other pages,
00:00:42:27 - 00:00:46:15
and all the different branding colours
that you can see around
00:00:46:15 - 00:00:47:09
the site
00:00:50:02 - 00:00:51:16
are all default at the moment,
00:00:51:16 - 00:00:55:10
and that's
what we're going to look at changing now.
00:00:55:24 - 00:00:59:05
So if I go over to the admin
side of Infigo
00:01:02:24 - 00:01:03:23
and what I'm going to do
00:01:03:23 - 00:01:06:23
is go to my appearance settings.
00:01:06:23 - 00:01:10:18
So this is the content management
and then appear in settings.
00:01:12:02 - 00:01:12:12
This is
00:01:12:12 - 00:01:15:19
the same place where
we uploaded the logo in an earlier video.
00:01:16:05 - 00:01:21:08
If you come over to the right hand
side of that same window, you can see here
00:01:21:08 - 00:01:25:15
the primary color selections
and you can already see how
00:01:25:15 - 00:01:29:12
those are starting to relate
to the initial storefront.
00:01:29:12 - 00:01:33:13
So we've got sort of a navy blue colour
and a lot of this which you can see
00:01:33:13 - 00:01:36:13
scattered around the site.
00:01:38:29 - 00:01:39:27
And then we've got our font
00:01:39:27 - 00:01:47:28
selection down here.
00:01:47:28 - 00:01:50:24
So defining those colours is really easy.
00:01:50:25 - 00:01:52:29
So each one of these is a color picker.
00:01:53:06 - 00:01:56:01
You've got the ability to either
type in a hex value.
00:01:56:01 - 00:01:58:03
If you have that available,
00:01:58:03 - 00:02:01:07
if you don't know the hex value,
if you only know the RGB value,
00:02:01:08 - 00:02:03:18
then there are online converts
that you can use.
00:02:03:18 - 00:02:08:16
Just type that into Google
and you'll find them straight away.
00:02:09:12 - 00:02:12:04
If you click on that, it's
also a color picker.
00:02:12:20 - 00:02:16:19
And what you'll notice is
if I sort of change that value
00:02:17:11 - 00:02:21:00
and then click off it,
I get this window appearing at the top,
00:02:21:00 - 00:02:26:20
the message appearing
that it will change the base color
00:02:27:12 - 00:02:30:19
and then all colours which derive
from the base will be adjusted as well.
00:02:30:19 - 00:02:34:17
So if I adjust the primary
or the secondary color, it might impact
00:02:34:17 - 00:02:37:16
on some of the color selections too.
00:02:38:07 - 00:02:40:16
So you'll see that, for example,
that I've changed primary.
00:02:41:01 - 00:02:43:26
So all of these are the boxes have changed
to the primary colors.
00:02:43:26 - 00:02:50:04
Well, I can change those individually
if I wish to do so.
00:02:50:04 - 00:02:57:24
Got my secondary,
but we get the same message
00:02:57:24 - 00:03:04:14
if anything derives from the secondary.
00:03:04:14 - 00:03:05:12
My text colour
00:03:07:20 - 00:03:10:04
my button colour that being
00:03:10:04 - 00:03:12:12
just the color of the button background
00:03:12:20 - 00:03:13:21
like so
00:03:18:24 - 00:03:20:15
my link color
00:03:20:15 - 00:03:24:04
and my link visited cover.
00:03:27:08 - 00:03:29:13
Now if I scroll a bit further down,
00:03:29:13 - 00:03:31:18
I've got some additional color
options here
00:03:31:19 - 00:03:35:12
that has to do with MegaEdit,
which is a whole different section
00:03:35:21 - 00:03:39:27
of Infigo's capabilities will be covered
in a different series of videos.
00:03:40:24 - 00:03:45:00
This just controls the color selection
for the MegaEdit interface.
00:03:45:22 - 00:03:50:12
And then a bit further down again,
you have font sizing controls as well.
00:03:50:25 - 00:03:55:22
So font formatting, you've got storefront
section and the MegaEdit section.
00:03:56:15 - 00:03:59:23
Now we're just looking at storefront
so we could change the size here as well
00:03:59:23 - 00:04:08:16
if we wish to do so.
00:04:10:00 - 00:04:11:14
So we talked about font size.
00:04:11:14 - 00:04:13:18
I can also change the front itself.
00:04:13:18 - 00:04:17:01
So there is a list of predefined fonts
that we can choose from.
00:04:17:17 - 00:04:22:24
We do also have the ability to manage
fonts on this or the tab here.
00:04:23:21 - 00:04:27:07
And again, that requires
uploading from an external location,
00:04:27:19 - 00:04:29:27
which again will be covered
in another video.
00:04:29:27 - 00:04:39:04
So today
we'll just focus on the predefined fonts.
00:04:39:04 - 00:04:41:02
Once you've made our changes,
we want to make sure
00:04:41:02 - 00:04:43:05
that we hit the save button
at the top of the screen,
00:04:43:06 - 00:04:44:19
otherwise these won't take effect.
00:04:45:23 - 00:04:46:21
And as soon as you get
00:04:46:21 - 00:04:49:14
some confirmation in the bottom right,
those have been saved.
00:04:50:00 - 00:04:53:00
If we go back over to our storefront
00:04:53:00 - 00:04:57:27
and refresh,
we should see those changes straightaway.
00:04:58:13 - 00:05:02:12
So based on my selection,
doesn't look too much visually different.
00:05:02:12 - 00:05:06:25
However, we can see the background
color of the buttons is changed.
00:05:06:25 - 00:05:09:05
The text font and color has changed.
00:05:09:06 - 00:05:12:17
If I hover over my links,
I get a different color selection
00:05:15:12 - 00:05:18:22
and I can see
I can see my branding colours
00:05:18:22 - 00:05:22:04
appearing in various parts
of all at this stage, very simple
00:05:22:04 - 00:05:23:01
site.
