WEBVTT

00:00:04.080 --> 00:00:06.720  
Hi there, welcome back. Let's set up

00:00:07.040 --> 00:00:09.200  
our guess the score block. Here we have

00:00:09.200 --> 00:00:11.100  
it, and I now need to put

00:00:11.100 --> 00:00:14.080  
in, most importantly, my team names,

00:00:15.280 --> 00:00:16.640  
where it says Team 1 and Team 2.

00:00:21.920 --> 00:00:24.720  
Okay, and in our original,

00:00:26.800 --> 00:00:29.100  
you can see I don't have a logo

00:00:29.100 --> 00:00:32.920  
in here actually. Instead, I

00:00:32.920 --> 00:00:34.160  
would just like the team names and a

00:00:34.160 --> 00:00:36.080  
background image for each. So let's add

00:00:36.080 --> 00:00:37.840  
those background images in now.

00:00:38.960 --> 00:00:41.760  
Click on the camera

00:00:41.760 --> 00:00:44.640  
symbol top right. I'm going to

00:00:44.640 --> 00:00:47.600  
use the media in my media library. I've

00:00:47.600 --> 00:00:50.160  
created a folder with the images that I

00:00:50.400 --> 00:00:51.120  
want.

00:00:54.240 --> 00:00:57.040  
And then I've got them in there. Let's

00:00:57.040 --> 00:00:58.400  
do the same for the other one.

00:01:08.400 --> 00:01:10.920  
Okay, and now let's adjust this so that the

00:01:11.120 --> 00:01:12.760  
colors reflect what I wanted in that

00:01:12.760 --> 00:01:15.360  
original with a sort of red and

00:01:15.960 --> 00:01:18.720  
a blue background there. So click

00:01:18.720 --> 00:01:21.200  
on the paintbrush symbol

00:01:22.840 --> 00:01:23.840  
and now I'm going to change that

00:01:23.840 --> 00:01:25.120  
background color to a

00:01:26.800 --> 00:01:29.680  
red color and adjust the transparency

00:01:29.680 --> 00:01:32.240  
down here. Okay,

00:01:33.200 --> 00:01:34.560  
and let's do the same on the other one.

00:01:42.280 --> 00:01:44.960  
Okay, good. If you

00:01:44.960 --> 00:01:46.960  
wanted to, you could also

00:01:47.100 --> 00:01:50.320  
put in the RGBA or hex code down

00:01:50.320 --> 00:01:51.680  
here if you want a specific color that

00:01:51.680 --> 00:01:54.400  
matches your brand or a specific team. So

00:01:54.400 --> 00:01:57.280  
that's another option. Okay,

00:01:57.920 --> 00:01:59.440  
you could also change the text color as

00:01:59.440 --> 00:02:01.920  
you saw here. We've got text color here

00:02:01.960 --> 00:02:04.800  
and I could change that to black, for

00:02:04.800 --> 00:02:06.880  
example, but I prefer it in white. So

00:02:06.880 --> 00:02:08.960  
let's put it back to that,

00:02:09.760 --> 00:02:10.560  
okay.

00:02:13.040 --> 00:02:15.200  
So we're all set up for this

00:02:15.520 --> 00:02:17.600  
block, and in this case actually this

00:02:17.600 --> 00:02:19.800  
whole Riddle as well. Because of course

00:02:19.800 --> 00:02:21.680  
you can put several blocks in one

00:02:21.680 --> 00:02:24.600  
predictor, but these predictor

00:02:24.600 --> 00:02:26.040  
Riddles are very often used as a

00:02:26.040 --> 00:02:28.800  
stand-alone Riddle for that quick

00:02:28.800 --> 00:02:31.520  
interaction in the hours or days

00:02:31.520 --> 00:02:33.760  
before a match, for example, so your

00:02:33.760 --> 00:02:36.560  
audience can engage with the

00:02:38.800 --> 00:02:41.680  
teams, with the event, and

00:02:41.840 --> 00:02:44.120  
then you can share another one for a

00:02:44.120 --> 00:02:47.120  
different game, for example. One

00:02:47.120 --> 00:02:49.560  
thing I would like to do, or I suggest

00:02:49.560 --> 00:02:51.960  
doing, is you can also put the date here.

00:02:52.080 --> 00:02:54.720  
People often write,

00:02:54.720 --> 00:02:57.440  
for example, and then the

00:02:57.440 --> 00:03:00.080  
date, whenever that game might be.

00:03:00.680 --> 00:03:03.040  
This is obviously imagined because it's

00:03:03.040 --> 00:03:04.560  
not really going on right now.

00:03:08.720 --> 00:03:10.560  
And now in the preview, you can see

00:03:11.600 --> 00:03:13.400  
we've got that there. But I'd like to

00:03:13.440 --> 00:03:15.400  
adjust one thing with the

00:03:15.600 --> 00:03:17.760  
styling. You can see

00:03:17.760 --> 00:03:19.100  
here in our original

00:03:20.400 --> 00:03:22.760  
that the text for the

00:03:22.880 --> 00:03:25.200  
countries is slightly bigger and also

00:03:25.280 --> 00:03:27.120  
slightly higher. I wanted to do that

00:03:27.120 --> 00:03:28.800  
because I haven't put a logo in. Of

00:03:28.800 --> 00:03:31.680  
course, that space is saved here

00:03:31.680 --> 00:03:33.400  
for you to put in your logo up here. If

00:03:33.600 --> 00:03:35.600  
you have an enterprise or business

00:03:35.600 --> 00:03:38.120  
account, you can use CSS to

00:03:39.120 --> 00:03:41.840  
change specific elements in each

00:03:41.880 --> 00:03:44.640  
block or in a Riddle. And so I'll just

00:03:44.640 --> 00:03:46.080  
show you how to do that so we can

00:03:46.240 --> 00:03:48.800  
replicate this original design here that

00:03:48.800 --> 00:03:51.640  
I went for. Go on to

00:03:51.680 --> 00:03:53.480  
Palette, and we're going to

00:03:54.800 --> 00:03:57.120  
copy and edit this to create a new

00:03:57.680 --> 00:04:00.480  
palette. Call it GameDay.

00:04:01.280 --> 00:04:03.080  
And scroll right down, click on Edit

00:04:03.080 --> 00:04:05.840  
under CSS. And now I've got some

00:04:05.840 --> 00:04:08.800  
CSS here that

00:04:09.360 --> 00:04:12.160  
I've created that I'm going to

00:04:12.160 --> 00:04:14.100  
copy and paste into

00:04:15.920 --> 00:04:18.320  
this gray field here. So

00:04:18.640 --> 00:04:21.360  
it's this predictor card element

00:04:23.040 --> 00:04:25.640  
that targets the text box here

00:04:26.720 --> 00:04:29.680  
for the predictor cards. Okay, and

00:04:29.680 --> 00:04:32.200  
I've changed the margin and the

00:04:32.320 --> 00:04:34.320  
font size, and now I'll click on Format

00:04:34.320 --> 00:04:36.080  
Code and Save, and now you can see these

00:04:36.080 --> 00:04:38.840  
changes going live here on the right-hand

00:04:38.840 --> 00:04:41.680  
side. So you don't have to do that, but I

00:04:41.680 --> 00:04:43.360  
want to do that because I'm not adding in

00:04:43.400 --> 00:04:45.560  
a logo here. That's up to

00:04:45.600 --> 00:04:47.840  
you. So,

00:04:48.560 --> 00:04:51.040  
go back into Preview, and yeah, that's

00:04:51.040 --> 00:04:53.920  
how I want it to look. So in the next

00:04:53.960 --> 00:04:56.880  
step, we will look at the other sort

00:04:56.920 --> 00:04:59.520  
of predictor block. Play around with

00:05:00.040 --> 00:05:02.320  
score block for now, and I'll see you in

00:05:02.320 --> 00:05:02.880  
the next step.