00:00:11:25 - 00:00:13:16
In this tutorial, we'll explore
00:00:13:16 - 00:00:16:25
how to change the color scheme
utilized by the MegaEdit editor.
00:00:17:24 - 00:00:23:05
This allows the editor
to match the branding.
00:00:23:05 - 00:00:26:22
So we modify the appearance
of our MegaEdit editor
00:00:27:02 - 00:00:29:14
within our appearance settings.
00:00:29:14 - 00:00:33:00
Now we've seen appearance settings
in previous tutorials.
00:00:33:14 - 00:00:35:25
We first go to the admin area of Infigo
00:00:36:13 - 00:00:40:03
and then we're going to go to our content
management
00:00:40:17 - 00:00:44:00
and appearance settings.
00:00:46:03 - 00:00:48:24
Now you will recognize the section
at the top here.
00:00:48:25 - 00:00:54:19
We've covered that in some of the early
tutorials in the Storefront Build series
00:00:55:01 - 00:00:59:01
and we've also got some color choices
over on the right hand side.
00:00:59:12 - 00:01:03:22
Now these are for your actual storefront
itself, not for your MegaEdit editor.
00:01:04:20 - 00:01:06:07
So if we scroll down a little bit,
00:01:07:17 - 00:01:08:06
you'll see there's a
00:01:08:06 - 00:01:11:00
separate section here, which is
00:01:12:13 - 00:01:16:12
additional color options for MegaEdit.
00:01:17:11 - 00:01:19:27
So these tickers that I use
to manually select a color
00:01:20:13 - 00:01:24:03
or to specify a hex value
to choose a specific cover.
00:01:24:17 - 00:01:28:16
So any one of these options here,
so let's say let's focus on the top bar
00:01:28:16 - 00:01:29:29
and sidebar.
00:01:29:29 - 00:01:33:27
If I click on this,
I get a color picker or I can copy
00:01:33:27 - 00:01:38:27
and paste or type in a hex value.
00:01:38:27 - 00:01:41:06
So if we specify
some initial color choices.
00:01:51:15 - 00:01:54:00
so I've specified oMegaEdit colors here.
00:01:54:24 - 00:01:57:22
So we've got a top bar in our sidebar,
which are the primary ones.
00:01:58:12 - 00:02:00:03
I'll go back to my MegaEdit editor.
00:02:00:03 - 00:02:03:00
So we've got a top bar here and a sidebar
00:02:04:28 - 00:02:06:26
that we've got buttons, preview,
00:02:06:26 - 00:02:11:04
loading and primary, which will be used in
various locations throughout the editor.
00:02:11:27 - 00:02:14:17
So let's take a look at how this changes.
00:02:14:17 - 00:02:17:06
So if I just go to the top of our screen
and click Save,
00:02:17:06 - 00:02:19:27
just to apply those alterations
00:02:21:01 - 00:02:24:11
and then I'm going
to reload our MegaEdit editor
00:02:26:11 - 00:02:28:11
so we can see already
that the loading screen
00:02:28:11 - 00:02:32:04
has changed color
to a very bright yellow in this case.
00:02:32:25 - 00:02:35:16
And once the editor actually loads itself,
you can see
00:02:35:16 - 00:02:38:21
that we've got an updated color
on the top bar.
00:02:38:25 - 00:02:42:04
We've got an updated color scheme on the
the main menu
00:02:42:14 - 00:02:45:29
and all the buttons have changed to suit.
00:02:49:09 - 00:02:51:16
It's also possible to apply a logo
00:02:51:16 - 00:02:54:14
to our MegaEdit editor loading screen.
00:02:55:12 - 00:02:58:18
To begin,
we navigate to our editable content area
00:02:59:10 - 00:03:02:05
and then we're just going to scroll down
00:03:02:05 - 00:03:06:02
into Section three
and look for the editable content block
00:03:06:09 - 00:03:10:21
named MegaEdit Loading screen Logo.
00:03:11:01 - 00:03:14:19
Then hit edit over on the right hand side.
00:03:14:19 - 00:03:16:08
Now we want to get an image in here.
00:03:16:08 - 00:03:21:02
We can use a few of these different body
text editor types to do this.
00:03:21:16 - 00:03:24:06
However, the easiest way to accomplish
it is with content
00:03:24:06 - 00:03:27:04
template editors.
00:03:28:12 - 00:03:30:12
I'm going to specify that I want to use
00:03:30:13 - 00:03:35:23
the content template, which allows me to
00:03:36:18 - 00:03:39:07
just directly specify elements
00:03:39:27 - 00:03:42:18
to use within this content block
such as an image.
00:03:43:29 - 00:03:46:21
So if I've got content
selected over on the bottom
00:03:46:21 - 00:03:48:17
right hand side, I can add content
00:03:49:15 - 00:03:53:09
and I'm going to locate an image.
00:03:53:09 - 00:03:57:04
And then it's just a case of uploading
the logo that we want to utilize
00:04:03:08 - 00:04:05:25
and then hit save.
00:04:07:03 - 00:04:10:15
Now if I go over to a MegaEdit product
and I'm going to launch the editor,
00:04:11:24 - 00:04:14:05
we should see that on the loading screen.
00:04:14:05 - 00:04:21:13
Our new logo has been incorporated.
