Transcript

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