0:00 [Music]
0:06 this video is a brief introduction on
0:08 using Pro styles with Don plus 2 so
0:13 we've got a page with some buttons on it
0:15 various different styles and you'll
0:17 notice that one of them is a different
0:20 style this is styled to with the custom
0:23 settings in button + to use it we just
0:25 change it to custom from its default
0:28 primary side styles just like that and
0:31 we'll come back to this because we'll
0:33 see how we can use the custom setting to
0:37 override any pro style that we set up so
0:41 let's add a pro-style stack to the page
0:44 now pro-style supports post holes for
0:47 lots of different things backgrounds
0:50 overlays section layouts then it now has
0:54 another entry at the bottom which is a
0:55 booklet us to master style so just like
0:59 the other pro Styles masters when we add
1:01 it it's not assigned to any elements the
1:08 first thing we need to do therefore it
1:10 decide what we're going to apply our
1:11 style too and that's the very first
1:13 setting and this is the master ID now
1:19 we're going to in the first instance
1:22 we're going to choose all button plus
1:24 2's on the page so whatever we set in
1:28 here is going to override everything so
1:31 this is a bit like the swatch eating
1:33 site styles there is one exception
1:35 anything that has its own custom style
1:38 won't get affected so if for instance we
1:43 set our style to custom in our Pro
1:46 Styles master now you'll see instantly
1:49 everything on the page has the default
1:51 custom starts and the bottles to
1:53 settings the pro style settings are
1:56 almost the same as the button trust to
1:59 settings so it's very familiar so if we
2:02 want to change all the buttons on our
2:03 site to read we just change that pro
2:06 style to read and everything that's not
2:08 the custom style button instantly
2:11 changes to read
2:12 now you think well that's great but we
2:15 can do that with foundation swatches
2:17 well you can the pro style gives you a
2:20 lot more choice in styling we can change
2:25 the text color independently we can
2:27 change anything just as we would do with
2:31 an individual button + stack we can
2:34 change the icon colors you can see that
2:35 any buttons that have got an icon on
2:37 them will have this gray color a little
2:40 carrot there and if we have any split
2:43 buttons on the page they would have a
2:44 blue edge so let's change the split
2:46 background to our orange color and we'll
2:50 make the hover the same and we'll change
2:52 the icon to a black and then it'll show
2:56 up against the orange so this is our
3:00 prototype button up here in the master
3:03 this is how they will look so fine now
3:05 just simply take this one on the page
3:07 and change you to a combi button then
3:10 it's got a black icon if I then click
3:13 the split button then we see that the
3:16 split is now taking the orange yellow
3:19 orange color from the master so that's
3:24 great but of course the other thing you
3:26 can't do with simple swatches is
3:29 gradients and and other things like that
3:31 so if we want to apply gradient to all
3:33 our buttons one click and all the
3:36 buttons on that page have now got a
3:38 gradient and I guess we should change
3:40 the the icon colors because the icon
3:42 colors are still black so if we make the
3:46 icon call is slightly off-white there we
3:49 go everyone on the page has changed now
3:52 this is not only convenient it's also
3:55 very light weight on your page the
3:57 pro-style stack just write a single CSS
4:00 class and then any buttons that are set
4:04 to use that pro style will just get that
4:07 class so you've got one piece of code on
4:10 your page that's controlling every
4:12 button it also means that if you put pro
4:15 Sol's in a partial your entire site can
4:19 be consistent and easily styled so it's
4:22 not only convenient for you but it is
4:25 very
4:26 in terms of the final page instead of
4:29 having a gradient for every one of these
4:32 buttons we have one gradient definition
4:35 in our CSS and every button just gets to
4:38 use them now at the moment that's every
4:41 button on the page because we told
4:43 button + master to use / t to apply to
4:47 all buttons horses now if we change that
4:53 so we just select button towards master
4:55 1 so this now is assigned to the master
5:01 113 so I'll only the buttons that we
5:03 give this setting will be affected so if
5:07 for instance will take the split button
5:09 and we'll say in its style control we
5:13 want to give it button + master one and
5:16 there we go and this one above it let's
5:20 have that matching as well so that's
5:22 going to have master one style if we've
5:28 got a bar with some buttons in it we
5:32 could change every button or we can just
5:37 change the style of the bar in a button
5:40 styles to the bottom toastmaster one so
5:44 the first thing you notice is the
5:45 buttons in edit mode are not going to
5:47 change in the bar but what you get is
5:49 this master style preview that shows you
5:51 what the buttons will look like or a
5:54 representation of the colors used for
5:56 the buttons and the gradients etc and
5:58 that bar preview shows us that color as
6:02 well so let's preview that page and
6:05 we'll see that these button bar buttons
6:07 will also get this red and yellow
6:09 styling and there we go there's the
6:15 button bar we haven't changed the hover
6:17 color in our master so it's still going
6:19 blue but all the buttons in that bar
6:22 have instantly changed to our master
6:26 style will be set anything else on the
6:29 page so this button here this button
6:32 group down here and that custom style
6:34 are unaffected because we've told it
6:36 that we only want
6:39 that have been assigned a master style
6:42 of 12 you this so let's create another
6:47 master style we're going to just add
6:51 another button to us master and this
6:55 time we're going to assign it to master
6:58 2 so we can give this a different a
7:02 different set of styles and because
7:04 let's change it to custom and we'll make
7:08 these buttons a green color this time
7:13 we'll we'll remember to do the hover
7:14 color as well shall we or let's give it
7:16 an automatic color color when you press
7:18 this automatic color color it will just
7:20 dark on the button it saves you having
7:21 to set these things and while we're on
7:23 let's go back to master one and just
7:25 turn on the automatic over so back to
7:30 master 2 and we could probably do with
7:32 some iconic colors that show up I'm not
7:36 worried about the actual style here
7:38 let's just get something that looks
7:40 different and without got our master to
7:45 style and as you can see it's applied to
7:48 the button here we could apply to
7:52 anything else we want and instant one of
7:56 the buttons in the bar and this is a
7:58 nice example we've already styled the
8:00 bar to master one style the red but if
8:04 we then override that on a button by
8:07 button basis and give this master to
8:11 style now you see when we apply it to a
8:13 button directly on then you'll see in
8:15 edit mode so let's preview that now so
8:19 you can see now the bar as a whole has
8:22 got the master one style red and yellow
8:25 scheme where is this button we've given
8:28 it its own style just like this button
8:31 here the blue one has got its custom
8:33 style this button in the bar has its own
8:37 custom style which we've told to be
8:39 master to so as you go click all down
8:44 you can override all these settings so
8:48 the Masters will take effect when
8:52 nothing more specific is told to
8:55 override them so this particular button
8:57 here the green one we said right forget
8:59 the master for the bar we want this one
9:00 to be green so if we return to our
9:05 master styles you can see we have a
9:08 design knows that is simply just so that
9:12 you can easily see when you're in edit
9:13 mode what it is it doesn't get published
9:16 and it doesn't do anything other than
9:19 remind you and we get a little mark here
9:22 that says green button so we know which
9:24 was which pretty obviously buttons when
9:26 you see them like this but we'll just
9:29 call that one red book pneus the reason
9:34 for this becomes more apparent because
9:36 with our Styles master we can have lots
9:39 of other things in it I'm going to add a
9:41 couple just to fill up some space will
9:43 have a section background and all that I
9:47 must a background of master overlay now
9:51 in our prospecting we can collapse them
9:53 so it takes up a lot less space in edit
9:55 mode and look for a lot neater and this
9:58 is where our labels come in so we can
10:00 see now easily that our red button is
10:04 assigned to button + master one and our
10:07 green button is assigned to book them to
10:09 us master 2 so that that's all the
10:11 labels are for but very convenient let's
10:14 just get rid of these or their child
10:17 stats for now now there are a few other
10:21 settings in button + masters that you
10:24 won't find in the button + stack first
10:28 up right at the very bottom there's one
10:30 that says show custom font selector for
10:32 font pro and next to our little green
10:36 button it tells you what the custom
10:38 selector is so if you're using font pro
10:41 then this is what you would add in the
10:44 custom selector and you will add your
10:46 font to every one of these buttons now
10:51 that we also have some text size and
10:53 controls and we have customer in advance
10:58 as you do in the button + stack but we
11:03 also have some spacing
11:05 so if you want to adjust the letter
11:10 spacing or the line height then or is in
11:14 the word spacing then you can do that
11:16 here for all of the buttons that have
11:19 that style that's really only necessary
11:21 when you're using custom fonts that need
11:23 some adjustment to their font making and
11:26 if you're using font flow then do it
11:29 through font pro because your custom
11:31 selective is going to handle all that
11:32 for you but if not let's take our red
11:36 buttons and if we just change the letter
11:39 spacing to something larger you can see
11:43 that all our red buttons including our
11:46 master style preview here are getting
11:48 that new letter spacing so that's a
11:51 useful feature if your particular about
11:54 your fonts now there's one last thing
11:58 that we can see in the master settings
12:01 and that's the edit mode background and
12:04 if we just think about our button bar if
12:09 we're making a menu with a button bar
12:10 it's most likely going to have a
12:13 background color and quite often you
12:15 will have white text on that so let's
12:18 just quickly add a background color to
12:21 this button bar so let's make it a sort
12:24 of a dark black as you would have with
12:26 button with menus and if we just quickly
12:31 see how quickly it is to change them all
12:33 back we're going to quickly change these
12:36 back to being normal normal buttons and
12:41 we'll take that master scale off second
12:46 button and let it just get the primary
12:49 side styles so here's our preview
12:52 remember we don't see the master so
12:54 until we preview the bar will go to our
13:01 button master stack and if you're trying
13:05 to make a menu then most likely you
13:07 don't want a background and on this star
13:11 we would want white text so we'll set
13:14 the text color to white
13:17 and of course in edit mode we can't see
13:19 what's going on so that's why we can
13:22 just change the edit mode background it
13:23 doesn't matter whether it matches the
13:25 bar or not but as long as you can use it
13:29 to see so this is what we're aiming for
13:31 with our bar let's preview that and then
13:36 we have our button bar with our three
13:40 items on it in the white text without
13:45 any any background color so that's just
13:47 the clearly in edit mode just to make it
13:51 easier to see what's going on
13:54 and that about wraps up this short
13:56 introduction to match the Styles
13:58 remember you don't have to use them you
14:01 can use side styles swatches for simple
14:04 colors fine they're already there but
14:07 using master soils gives you a lot more
14:09 control particularly if you've got
14:10 buttons with icons and split buttons and
14:13 you can use the gradient background and
14:16 remember that every time you add a
14:19 master style you're adding the code
14:20 wants to the page and everything else
14:23 that uses that master style using that
14:24 one piece of common code so it's a great
14:28 way to do it if you're using a constant
14:30 theme throughout your site with a
14:33 feature that only button + will will
14:35 give you an switches gradient background
14:37 it's going to be very efficient way of
14:39 doing it hope you enjoyed the video and
14:41 I'll see you next time"}]