SharePoint Power Hour Episode 98: Color Palette Tool

all right hello everyone welcome this is sharepoint power hour it's good to have you today um sharepoint power hour is our weekly show that we do every wednesday at 11 central and power hour is just all about solutions in sharepoint and how to do things without writing code or um you know nothing super custom and being able to knock things out and be able to be more efficient in sharepoint we've had we've had about i don't know i think this is episode this is episode 98 so we've got our episodes out there um this is i'm laura rogers and this is my team of sharepoint consultants at rackspace consultant at rackspace hosting and lockspace consulting and we've got a whole list we've got this youtube channel of course that you might be watching right now and it's uh sharepoint rax is the name of the youtube channel and we put a whole bunch of every time we do a power hour it's just recorded and it stays out there so um today's episode is going to be ryan keller here doing some fun branding stuff um just but just in the meantime a couple of we're going to do just a little housekeeping information and just get everybody introduced um if you are watching this in youtube in youtube you will have a link to the google hangout a little yellow link on the youtube video and that will take you over to the google hangout where it has a q a so if you'd like to if you're watching this live and you like to ask us questions that's that's the fun part that's kind of one of the reasons we do it live so that we can have that great audience interaction um if you so once you get over to the google hangout you're gonna see some little squares at the top right corner and default it will show this app called showcase which is where we can share link where we share links with you but the other app it lets you switch to is the q a app so feel free to go in there if you want to at any point and just say hi you know tell us that you found the q a and um yeah just keep in mind that you can ask us questions the whole time and just have a nice little discussion going also we have our team here so we'll go ahead and start introducing people i'll just uh let's see we'll just go in the order that i see you at the bottom of my screen um so i'm laura rogers i'm a microsoft mvp i am a manager of the sharepoint consultants at rackspace and i've been doing sharepoint for about 12 years or something like that it's ridiculous and um let's see let's go in the order uh pory then kevin then ryan or then tanya and then when ryan goes he can just start doing his demo okay so corey i've uh i've been doing sharepoint for about 10 years now i work in rackspace pretty new still kind of green hence my lower third uh and yeah kevin kevin's laughing uh good morning i'm kevin hughes sharepoint architect here at rackspace on moore's team and my role on the team is that i interact with our customers to figure out what they need from a business perspective and technical perspectives and then uh figure out how to implement uh solutions for them in sharepoint and work with the rest of our team to get that done i'm based out of kansas city and uh coming up on my one year anniversary here at rackspace congratulations so that's on the six everybody so get ready to congratulate him also working with the last couple of years so i'm actually based at our headquarters in san antonio the castle and i run our internal sharepoint environment so i get to see every day a lot of the same problems that you know our our users and our customers experience um we're going through legacy migrations sharepoint 2007 and 10. so i get to deal a lot of those special little issues that come up when you migrate to 2013 and again i've been with rackspace for about three years and working on the sharepoint team for about a year all right i guess that means it's my turn now hi everybody i'm ryan keller i am the branding guy here on the sharepoint team at rackspace and if you've been watching this for any amount of time uh that means that you know that my job is to make sharepoint pretty so that means that today we're actually going to look at some way to make sharepoint pretty let's see if i can get the screen share thing going hopefully everything will cooperate all right one moment sorry things aren't quite working yet and also a suggestion that we've gotten before i don't know how easy that will be on the fly is to make your resolution a little lower for the screen you're sharing and it just makes it easier for the watching it later on let's try doing that real quick as i'm getting things set so ryan's gonna do the sharepoint color palette tool for us today show us and that is a free download i'll go ahead and put that link in the um in the little showcase uh app that you guys will see over let's see um let me go ahead and get that takes a second to show that all right so if you guys look and flip over to the little app that in google hangout that looks like a little price tag that's where i posted the link to the free download from microsoft of this color palette tool and that's what you can download that and install it and be trying it out while you know while you're learning from ryan today and i also put it in the you're looking at the youtube video it's in the description of the youtube video it's a link to that so awesome thanks is the screen showing for anybody yet hopefully it is no not yet not yet awesome it's just black cool all right let's try again screen share screen to share there's your face again hey good yeah i think it's got like an extra prompt and a lot of times i forget to click on it where after you click share you have to click like okay again or something says it's sharing oh yep there it is there it is cool all right let's see here let me see if i can reduce this resolution it looks like it jumped back up that's a fun little background you got going there all right let's try this guy here keep changes alright so today we're going to be talking about this guy the sharepoint color palette tool like laura said you can download it uh from directly from microsoft um here's their download page if you uh forget the link you can't find the link on on the showcase app or in the youtube page for whatever reason the easiest way to find it is just google uh sharepoint color palette tool or go to microsoft download center and search for sharepoint color palette tool it comes right up download it install it it's just one of those next next finish kind of installs nothing nothing fancy about it at all so anyway what do you get when you actually install it well you get a blank icon wow fire it up and this is what you get boy this might make my screen gigantic it doesn't even fit anything now um so this is what you get not too fancy looking honestly my suspicion actually is that this was probably an internal tool that microsoft built for themselves as they were building 2013 in their and their composed looks and all that i know no evidence to back that up so don't quote me on that but that's just my suspicion and then they just decided to release it to the community because they're nice like that i guess so anyway what is this thing well it kind of looks like the little composed look preview in 2013 that you that you go through and essentially that's what it is it's it's a way to build a composed look or a color scheme for your your site with uh without having to muck around in in xml so let's just take a quick tour of this on the left here you can see that we've got you know a bunch of different color blocks and they call them buckets so they're basically buckets of color in the middle here you obviously get your preview uh on the the right hand side you can see that there's a few other options uh for setting your your color previews um these are the this is what actually will show up in your uh in your composed look as you're selecting what compose look and what color scheme you'd like to go with with your composed look check out how it would look with the background image we're going to go through all this it'll make a little more sense you can do a little contrast test to make sure that for instance if you have uh you know darker text on a darker background your contrast is good enough that people will be able to actually read that and at the very bottom here i'm not sure how well that's showing up since my screen resolution is really low now and kind of squishes everything but there's a there is a an error list box that that will tell you as you're going through and changing some of these things to make uh your your color schemes whether or not you're having any whether or not it's detecting any uh contrast errors for example uh so we'll take a look at and what exactly uh all that stuff does real quick so let's just kind of start poking around and seeing what happens um since there's not you know it's not really a super intuitive interface at first uh until you actually kind of start digging around and say that's kind of a nice little nice little product they put out for free right up at the top here you can change your layout to by default it just brings up the oslo master page we can change that to seattle and see what our color scheme would look like with the seattle master page which is the default master page that that just about everybody starts out with so we can see we can see that they give you a couple other options to take a look at say the contrast test which will show you a preview of your various background colors and the text colors on on what will be applied to different areas of the site so for example we've got the body text on you know the background overlay or or body text on hover background just very various pieces of the site that make up the color scheme so you can see as you scroll down it just gives you all basically just a light preview of what everything's going to look like so here's your hyperlink followed color navigation colors on the background overlay color you know the search url the the green text that shows up in the search sites for uh for the urls of where items show up then we can switch over to the ui preview scroll back up the top here and this is just kind of a zoomed in preview of what various things on the site will actually look like you can see up at the top we've got the sweet bar the right hand side of the sweet bar for say where your username would show up the the rest of the ribbon colors what color your icon your site icon is going to look like this is if you're assuming you're keeping everything out of the box this would be your search your search box here scroll down we can see you know the list excuse me what what uh color things are going to show up as if you hover over items in your list what various content looks like what the what all the accent colors look like as you're as you're working in your uh you know your pages and you're picking colors these are kind of the default colors that are going to show up and just various other components like you uh like the uh tiles that you can use or this this also applies to those tiles on the site contents page various other items here some buttons more uh input text like the search box some paging and some tables so that's kind of just a real quick preview of what everything looks like so how do we actually go about changing some of this stuff well that's over here on the left so we can start expanding these different color buckets and seeing okay well bucket one means let's see well there's the the active hyperlink color the top bar pressed colors basically if when you press a navigation item it gets a little bit darker blue all right well what's in bucket 2 emphasis hover background what the heck does that even mean all right bucket three navigation hover navigation accent sweet bar background okay i kind of recognize that there's a sweet bar background you know what happens if we just change it to say red okay cool so that's how it starts things kind of start to come together there for you let me go ahead and undo that real quick just to kind of keep it from looking completely hideous right off the bat and you know these these buckets aren't super useful unless you're looking to recolor a whole block of items all at once so you can see not not these these buckets group stuff together that may or may not be completely related like we've got accent text emphasis background header navigation hover text sweet bar background so they all apply basically the same color applies to all these different things so that gives you a way to easily recolor a large group of things at once but it's not super easy to see where you know if i'm if i want to color my you know my my sweet bar for example or recolor my hover it's not super obvious where that's actually going to show up you could probably look and see match the color up maybe this quick launch item hover is maybe bucket eight uh you know if we expand that hover background yeah that's probably it there by just kind of matching up the colors so do you put uh do you put obnoxious hot pink colors and things in there just to be able to figure out what goes with what sometimes i do actually that's i was actually messing around with this yesterday trying to figure out where some of this stuff was actually applying and that is actually one thing i was going to recommend doing if you're trying to figure out where something is is applying make it a noxious pink or something oh look at that nav hover there we go now i know exactly where that's applying undo that it's not wanting to work so let's do it like that but yeah that is that that is actually a perfect method for figuring out exactly where something is applying something really obscure like uh like top bar background actually not sure where the heck that even applies but lines header lines button border okay i could probably guess where that's going to show up but it's not super obvious unless you you know make it say like a green color and then you can scroll down and no idea where that one showed up some some line in the header probably he just jumped out right yeah so there's our there's our helper text so that's what it means by header line so it's the the name of these things doesn't always exactly match up with what you might expect so they conveniently do actually give you a way let's go ahead and collapse all these instead of instead of looking at things in these color buckets they actually give you a way to change this to say the ui groups so this is a lot more i think intuitive way to target specific areas of the site so now you can see it's regrouped all these all these items so instead of grouping them by their color they're grouped by the ui elements essentially so here's all your most of your text elements they still kind of break things up a little bit screwy so you have to kind of click through and see exactly where something might show up but uh you know here's here's most of your text so you click a link in sharepoint it turns that that purple color let's say we didn't actually want that maybe we just wanted everything to stay sharepoint blue instead so we can just paste sharepoint blue into that followed hyperlink color and now when we apply this our hyperlinks will still stay blue instead of purple that bothers some people when they change color like that so there's that the other thing that you can obviously do is click the the color itself and you get the the color picker um which is kind of a nice little kind of a nice little color picker they've got here so you can just adjust each uh rgb color red green blue um you can you know change up the hue on the hue slider change the saturation if you want to yeah some companies have very specific branding colors that you're supposed to use and they have actual hex codes and different red green blue that is your official company colors right so exactly we have like rackspace red so that's really helpful to be able to do that right exactly yeah so the you can you can put the exact hex code um in uh you know in in one of these items here if you know your sweet bar has to be a very specific blue uh to match your company colors um you can adjust you know the brightness and the saturation uh and another kind of nice thing they give you is the uh adjusting the opacity on on here too so if you just want you know a little bit of red as uh you know the text would be a bad example to adjust the opacity on but for example if you're messing around with say a background color or you want the sweet bar to be transparent as well you know you can adjust the opacity of it so it will basically beep see through just kind of like some of the some of the other ui elements are so especially especially effective if you have a background image applied you can still see the background through your background image through the background colors applied to some of these other items on the site they also give you a nice little color picker eyedropper so you basically can grab you know click and hold and then you can move move your mouse around grab whatever whatever color you want my company's public website and i just want to go grab a color off that i could just go look at that in another window and do that exactly and sometimes they'll have companies will have a color guideline sheet or an image with splashes of all their official colors on there you could just pull that up and uh you know eye drop or over to the you know whatever color you want to you want to grab and it'll pick up the the exact color you want so that's pretty helpful so what if you don't want to actually go through and and spend time messing around with every single one of these options here i mean there's there's a ton of different things i think there's like 89 different color options that you can mess with i think i saw somewhere so there's a lot of there's a lot of things that you can recolor but what if you wanted to just try something out and and see what happens when you kind of just apply an overall color scheme and just kind of let the let the tool go before you find and replace right after customers say that just you know just finding our place yeah yeah unfortunately nothing's ever that simple in sharepoint uh so luckily they they uh give you this little blue button or the you know this little color button right up top here so click on that guy and you get your color picker but now you can pick uh pick a color and kind of recolor the whole site with very little effort so let's just kind of do a green just for fun and see what happens pick my green color let me actually switch this back to uh one of the master page previews here and let me hit click on the recolor button and see what happens look at that it kind of just actually goes through and applies you know variations of this green color all over the site so it's colored the sweet bar it's colored the uh the logo area it's it's colored my list uh shading now if i go to my ui preview you can see that there's a sweet bar there's you know it's applied some color to the navigation applied that green color to my what would be the search box area and the border there's the the list shading the tile shading the cut to tile background color pretty cool stuff so down here you'll see all of a sudden we've got 23 warnings though so what these warnings are uh basically just contrast if you actually look at this says warning contrast ratio so the the current is uh you know it's basically just giving you a ratio of the contrast for certain areas of the site for example uh this is error text gives you the text color the background is the selection background um like you don't want to have like beige text on top of a white website you people wouldn't be able to see it right exactly so so they're basically saying that it's somewhere in here uh you know probably one of these these uh hover colors here for some of the buttons um the text is a little bit dark compared to the background so maybe for um let's find the buttons bucket here so the button hover background you know maybe that's a little bit too dark if we change the the luminosity of that and lighten that up just a tad okay and let's uh go up to edit and say refresh errors or hit f6 i still have 23 warnings um that's pretty cool but that is yeah so it gives you it gives you something to just kind of look out for um this one here actually is one that almost always you're gonna have to do something with this nav item disabled um that's up in the uh the sweet bar bucket sweet bar disabled text it's basically almost the exact same color so if i change that to you know let's just say white so is the sweet bar what we know as the top nav this yeah the sweet bar is that colored bar at the top that has sharepoint and sometimes you'll see your sweet bar items like the link to one drive and sites and other stuff so that's what they're talking about with the sweet bar so we can change that if you when you did the recolor thing if you had picked a darker color in the first place it probably would have been you know easier to have like higher contrast because it just would have already i don't know i'm just pondering yeah um it it it's not perfect when you recolor stuff so it does um it it gives it a pretty good shot but it you do tend to end up with some warnings so i recolored everything to a really dark blue and now i've only got 11 warnings about the contrast uh now which is a pretty good improvement over 23. a lot of it just happens to do with some small areas like you know the shading on this probably it's complaining about usually it happens to do with stuff like this like the buttons and the the hover and the pressed color for the buttons so you'd want to adjust the text color probably or or your background color for some of your buttons as you hover over it just kind of takes a takes a good guess and what your actual color is and then it'll usually just darken stuff up automatically for things like the hover and the pressed color i'm sure there's some formula they're using to figure that out um but you know if we're happy with this with this color scheme we can actually go ahead and save that um i think i'm actually gonna change this to like a brown or something because it's fall and we'll do like a fall theme or whatever so let's change this to let's just change this to like a brown i think there's already a brown one anyway but what the heck so look now we've only got 10 warnings that's awesome so we like this brown let's just let's just go with that all right we're gonna we're gonna make brown and i'm gonna go ahead and actually save this now and see what we can do with it so i go ahead and click on save it's gonna ask me where i want to save it i'm going to call this custom brown it's going to save this as an sp color file and essentially all that is if we if we open that up with notepad all this is is just an xml file everybody's favorite language um yuck i don't know any of that i don't really need to know that to be able to use this though right it's just no you don't this is yeah this all i'm showing here is what it's doing so essentially the theme is just a big xml file you can see it's got the various um items on here your your body text your subtle body text strong body text um all the all the different components of the site that are getting recolored with the with the color scheme here so let me go ahead and just minimize that so that's all that it's doing i should point out too as i'm as i'm going through this right over here in the preview slot this is the color the color uh scheme the colors that are showing up in that little color picker show us that in the website so they'll know what you're referring exactly yeah so let me just pop that open real quick switch over to my site and go to site settings so in here change the look i'm sure everybody has has uh looked around here so if i click on just say you know orange that is here's the camera screen ryan so this here this color section is what uh what is is being built right over here in this preview slot so when you click over here uh you know you're selecting the various color schemes so you can actually change this over here so right now it's just using the background overlay color as this larger preview which is kind of useless because it's blank then it's using the body text color for that for the second color and then the accent text bucket or the accent text color for this this third color so if i wanted to i could actually say you know let's just make this really easy to find um let's oh i don't know say my uh for that first one i want to use the the tiles or button you know button background or button hover background uh let's just see what happens there oh that's white you know but you kind of get the idea you can pick whichever color over here you want to actually show up so maybe we want say let's do the sweet bar wow they're not even any kind of there we go sweet bar background so now it's very brown very obvious to see uh you know if we upload this and go ahead and apply that it'll be very obvious that okay we want to look for the for the color picker that's all brown so maybe we'll actually just go ahead and re-save that overwrite it sure cool all right so now let's just switch over to the site and see what we can do here go back to my site settings and we are going to want to open up the themes folder here the themes gallery and so is that the root of the site that's the root of the site collection this is yeah so i'm at the top level of my site collection here uh so you're gonna open up to have publishing enabled do you know to be able to get to that you know i don't i can go double check it so i ch it was actually one thing i meant to meant to look at to double check and i completely forgot to do that i don't think you need to have publishing enabled for this since you can do a composed looks on a team site so essentially what you're going to do is open up your theme gallery open up the 15 folder here i just double checked you're right you don't have to have publishing okay yeah i didn't think you did thanks for checking um if you've applied themes before to your site you're going to see this themed folder this is just some folder that it throws various files in as you've applied themes to the site so if you have never applied a theme to your site you're not going to see this themed folder but pretty much you can just you can just ignore this your theme files are going to go in the 15 directory within your theme gallery and you can see there's uh you know a lot of different uh files in here already there's a lot of font schemes we'll talk about that in a little bit a lot of different palettes and essentially these are just exactly what we built um they're they're xml files or they're sorry sp color files just the xml files that tell sharepoint what components of the site to recolor so i'm just going to go ahead and drag my custom brown theme right into this theme gallery cool so it's there so now what okay well i can go back over to site settings change the look now i can just pick say orange and oh look there's my there's my custom color scheme cool awesome well what if i wanted to instead of just making that you know just a color scheme that i can apply to any of these what if i what if i wanted to say you know try the sea monster guy out and then do my custom color scheme so it still kind of works you know makes everything brown still get the background image but what if i actually wanted to go ahead and make it an option to appear in this list within that case all you need to do is build it as a composed look so let's take a look at that real quick so go back to site settings we've already uploaded the actual color scheme to the themes directory now we actually need to build a composed look so we'll go to the compose look gallery and this is just it's just a list that sharepoint uses to make those various composed looks available so you can see there's the orange one there's our buddy the sea monster you can see all the other options that they've got and and really all it is is just giving it a name telling it which master page you want it to apply when you select that that custom composed look what the theme url or basically the the color palette that you wanted to use so in our case we would do our custom brown sp color the image url that's our background image so like the sea monster click on that there's the sea monster background image and then if we wanted to use a specific font scheme so let's take a look real quick just to see what happens if we make a new one of these so we'll click on new item we'll give it the title brown the name is what actually displays in the composed look gallery so we'll call this the awesome awesome brown theme and the master page url we'll just tell it to use seattle since everyone likes that one the url for that of course all day long do with this all day long so of course i know uh where that is um so that is uh just uh underscore catalog slash master page slash seattle.master the theme url which of course i forgot to grab so i am going to open up a new tab and just go to my site settings get the theme url custom brown alright so i'm just going to right click and copy link location go back over here and we'll just paste that guy in there so this guy here we can we can get rid of that you can keep the full absolute path if you want or you can just do a relative path the image url if we had a background image to apply we could actually do that here we'll look at that in a little bit and same the font scheme url and the other big one here is the display order on um in the composer gallery they've got all their out of the box themes going up in increments of 10 which actually makes it kind of easy to to squeeze your custom ones in there so you can give this a display order of one or two or three or 15 if you want to go in between 10 and 20. so we'll just give this a display order of two just so it's right up in the beginning of of uh all of these guys so there's my awesome brown theme well now let's uh let's take a look and see what happens if i go to site settings change the look thinking about it there we go awesome brown theme click on that it's already got the uh the colors applied it's just using the the sego ui fonts that's just the sharepoint default um so there's my there's my custom composed look now so i can actually try that out and da da we'll wait on it shouldn't take long but it always does you can do this on premises and office 365 right i believe so it's uh should be basically identical between the two um when you're adding custom themes is there a way that you can adjust the orders that users will always see maybe your you know your your company's branding that'll always be the first option yeah so that's all that's exactly it's um what what you said is the display order um so if you really wanted to get rid of the out of the box themes you could just either delete them or put them somewhere else and then just have your your two or three or four approved themes um that's we're gonna do tanya we're gonna delete all the other boxes and let me put all the rack space ones that we create there you go at a minimum we're gonna delete the ones that have black background nobody should ever use ever so there's my site recolored with my very first thing people do when they get a sharepoint site they come in here go to site settings change the look i like this one lime no no no never use that so uh so there's uh so there's my my sp theme right there so what happens if we want to try if we want to try you know getting a little bit fancier here um maybe we want to throw in an image or something so let's try unfortunately they don't give you a real good option to actually reset this so i'm just going to close it and i've noticed sometimes if you if you have a lot of colors changed and you try recoloring some stuff it doesn't always um recolor everything the way that you would expect maybe so i found that if you wanted if you want to redo a theme or or start over they don't actually give you a good way to reset so the so the best way i found is just to close out and uh and restart so we get back to our our out of the box uh sharepoint blue look um it's still grouped by the bucket so i kind of like grouping it by the ui groups um i should point out this this third option the ui type um it's a little bit more limiting i guess um they only give you four options and then there's all the text so i guess in some ways that that would actually be a good a good way because they do spread some of the text out um into some of the other bugs i got a question ryan so i could do file open in here and just start with go back to the brown one and just you could yeah so if i go to file open custom brown there it is so yeah it it you can actually go back and uh start with what you have um and make some adjustments to that if you find you need to good question and i'll just go back to here again yeah you know this all you know i'm kind of pondering this this is more of a philosophical question i'm not sure if any of you have ever tried this but instead of a relative url could you create all your themes and have it in one central place and then as you have new site collections have them point to like a central location like in another web app maybe or wherever it is probably could i haven't tried that but it because you can put in an absolute url i don't see why that wouldn't work you might have to rebuild your custom composed look on you know various site collections but as long as the composed look is pointing to that you know to that centralized uh location for the sp color file i would imagine it would look i don't know it would we might try that yeah we might have to give that a shot and see um sometimes sharepoint's a little picky about what it will bring from other site collections um but i don't see why that wouldn't work since uh theoretically everybody should have permission to those galleries as far as bringing it from other site collections the the biggest thing as far as obstacles to doing that is going to be security on both side collections right because that'll mean that that every person on the site the original site or the the collection you're applying will have to have read access to every style every every location in the that has any of these files in the uh storage location so so that may be outside the security parameters that that you want that is true so you would probably have to consider some permissions uh in that scenario but in theory assuming everyone has permission to that one site it might work but we'll have to give that a shot once one of these days and see what actually what actually happens um so let's just let's try getting a little bit fancier here i guess let me jump back over over to my site here real quick you know another while you're doing that another option if if you're on premises is to just make sure that your your pallet files master page and so forth are uploaded into the 15 hive on the server and then you know they're still going to be uh they can then be not no longer limited to just single site collection they're still referenced exactly so you could you could actually uh instead of uh catalogs would be under uh underscore layouts as your your server path right that is another good point you could actually deploy those to the actual server and then not have to worry about site collection permissions and all that good stuff one thing i was just going to point out real quick was that you still can what am i doing here change the look uh get my awesome brown theme here you still can actually add images just like you normally would to your your custom color schemes here just you know through the uh let me let me throw throwing a leaf here and make it fall so the images still work just exactly the same way as they as they otherwise would but let's go ahead and uh you know take a look at another option here for what we can do so let's just kind of recolor everything um kind of applied a weird yellow to that i noticed it it tends to you know especially if you're doing a gray color it'll pick up some of the the colors that are around it so i'm trying to maybe do like a darker blue here still picking gray but you know it's maybe as a tiny bit of blue in in this uh in its uh hex colors that kind of applies a weird red you know it's a it it's kind of picky and tricky i guess to recolor everything let's just go with this but let's uh take a look at this background image option here so we can actually change the background image let's do one of my favorites here let's do this guy here and to see what happens so now we've got a nice background image just like you know we looked at a second ago we can change the layout to see what it'll actually look like and maybe you know we want to emphasize the background just a little more so let's take a look at that background overlay color here so right now they've got a white background that's about 85 opacity you know let's just drop that down to like like 65 and just see what happens okay well now we can see the background image a little bit take a look at our our ui preview here so wait what's going on with this so there's these two sections here and this is actually something i kind of figured out uh the other day looking at this why we've got two preview sections here so we've got the header with a colored background and the header without a background so it's kind of i kept scratching my head trying to figure out what the heck that actually meant why we've got two previews here why you know if i switch back to seattle why it doesn't you know if i change my head or background color why doesn't this actually you know why doesn't this actually change at all okay well it should be showing up a little bit blue somewhere and then i finally realized oh okay oslo is the one that has a header color so that's just something to kind of keep in mind there as you're as you're trying to figure out what colors are applying where there are a couple things that are specific just to the oslo master page or just to the seattle master page so the header is one of them and uh the navigation is also another one of those for example if i change my navigation color from uh you know we'll lighten that up a little bit to you know lighter gray if i change that it doesn't do anything to my uh my navigation on oslo so if i go to my ui preview here you can see so there's my nav resting so that's out of the box or out of the box uh just the default state there but it's different color up here that's because this navigation section applies just to the seattle master page and again i'll point out this this blue area here that only applies to the oslo master page so that's kind of confusing as you're going through this trying to figure out what the heck some of these things actually mean um if you want to apply a change to the oslo navigation that is i'm drawing a blank whereas that's in the header section i believe so that is the header text so if i change that to like a purple color it's not the header text header navigation text that's there we go of course right header text versus header navigation exactly so just some just some weird little uh quirks that you're gonna run into with between the two different master pages and the and the different color schemes um we've got about 10 minutes left was there something you were gonna show with icons i think yes so let's just go ahead and take a look at that real quick um let's just do it with the brown one since we've already got that one made um let me go ahead and jump back into change the look i'm going to reset this back to the sharepoint blue just to do a real quick demo all right so if i'm on here and i'm trying to do this more applies to to like a full effort custom branding um in a lot of cases when i'm doing when i'm doing branding a lot of these but behind the scenes pages you know will still want to to look like they belong with the rest of the site so a lot of times our clients will want you know these icons here to have the same color scheme as the sweet bar so obviously in the out of the box master page you can you can easily do that with a theme but for example right in uh right in here say i want to change instead of sharepoint blue let's just change it to disgusting lime green and whoops i didn't do that so all my tiles here change to disgusting lime green except for this guy here and that is one thing that for whatever reason really bugs me when i'm doing branding and i can't make that icon match the rest of these the reason for that is this icon here is a big sprite sheet so they're only showing us this one little piece of the this this giant image file here uh you'll probably notice that a lot of these images look very familiar like the uh you know your arrows for for going forward and back adding stuff the little edit icon so they call in various little tiny slivers of this uh this sprite sheet wherever they need to in the ui so one thing i noticed as i was messing around with themes is that you know when you apply say my awesome brown theme everything gets recolored so if i go to site settings change the look awesome brown theme and apply that data there we go yes keep it come on sharepoint i'm running out of time here all right site contents look at that my my icon is is brown okay well that's cool and all but if i'm doing a custom a full custom master page i might not be messing around with the themes and trying to fit a theme into my custom master page since i'm already you know doing a full on custom css style sheet so how so one thing i actually figured out uh fairly recently for another client was that if i actually create a theme with a similar color or you know using their exact colors on on a different site that i'm not doing my custom branding on then i can actually make these these site icons colored the same as the rest of their their color schemes so where this comes in handy is uh or the way that i can actually utilize this is i would actually save this uh save this image and let me just go ahead and save that it's called sp common by default and let me just fire this up in picture viewer so here's the out of the box one and here's my themed my themed sprite sheet so there's there's this one and there's one for social uh spsocial dot png is what it's called um there's a for a lot of the social icons it'll get themed so what i would actually do is is use this icon sheet the sprite sheet in my my style sheet and the way i could actually do that yeah that's fine is with this bit of css let me see if i can make this a little bit bigger so essentially this is getting kind of nerdy into css land here but you you tell your css to look for the image with the source of sp common the out of the box sharepoint blue uh image sheet or this or the the uh style or you know the sprite sheet then essentially we're going to apply our custom image as the background image to that give it the same width as the the image so that in this case it's 268 pixels wide give it a height of zero and then we'll pad the original image so the height of the original image is 271 we just pad that original image out of the way and our custom image is applied so it's a kind of a nerdy little css trick there that you can actually use to replace your the out of the box images with your custom themed image so again you probably wouldn't really need to do that uh if you're building just your your own color schemes but if you're doing a full branding effort that is one way one trick that i found that that really makes that sharepoint color palette tool very useful that you can recolor a lot of the out of the box icons very easily just go through and apply you know your color scheme grab those those sprite sheets and then you can use those in your custom branding without having to recreate a lot of the icons the nice little tip so that's uh yeah that's that's pretty much all i had today so any anybody had any other i have a question um as far as the color palette tool why what are some reasons so why would you create a mask or custom master page and go through all that complexity versus just making some quick color changes with the color palette tool like what do you get with the master page that you don't get with the color palette tool it really kind of depends on the requirements of the branding a lot of times clients are looking for just a quick you know hey this is just our you know sharepoint it's just a utility we're using to keep track of stuff we kind of like it to blend in with the rest of our stuff so let's just put our company colors on it and call it a day um other times with that with a full-on branding effort we can really control everything about the way that it looks so we can make it look and and behave just like any other you know any other website that you would see so a lot of companies like the idea of making sharepoint really blend with their with their own excuse me their online presence um or applying their company brand to their intranet uh and and just kind of anecdotally we've kind of found that that really branded sites that really look like they belong and they don't just look like something that they have to do to do their job like you know it doesn't look like microsoft word it doesn't doesn't look like excel actually looks like something that belongs to the company it just seems like a lot of clients have said that they got more buy-in when it's very fully branded as opposed to just handing them sharepoint and saying use it now with the 2013 um with the 2013 colors sorry the color composed looks uh getting tongue tied here you do actually get a lot of bang for your buck i think with with going through some of their color schemes and some of the background images especially i think that that alone actually is kind of the wow factor you know you can see the big difference if i just just right here if i remove that image plane add in you know a different image it looks like a whole new site just with that background image alone and just the fact that you can really adjust all of your your colors to really either fit with that image or fit with your company's color scheme that kind of gives you a lot of a lot of bang for your buck without having to put a ton of effort into it because i have a couple more minutes i was actually going to show really quickly how to how to add an image to your composed looks so i actually do have some of these images already uploaded into my site uh so let's just open up this orange leaf here let's just say i wanted the a background image on my compose look so let me just grab the grab the url of that image copy that and go back into my site settings go back to my compose looks gallery find my awesome brown and i'm going to edit that so here i can actually give it that url the of the image this is actually super simple to do here give it an image url and that's actually will apply the the background image automatically without having to add to add it so if i save that and i go back to site settings change the look so right now it didn't add it to it even though it's already applied because once you apply a composed look it becomes what's called the current theme so any changes you make to the composed look don't actually apply to the current site to the to what's currently applied you have to actually go back and reapply it if you make any other any other changes so now if i actually go and try it out you can see that that leaf image is already on there and apply to it automatically without having to add it manually which is kind of nice if you're looking to keep it consistent for everybody and again with um with you know your your background images i think that really kind of gives you a good wow factor for your site without really any effort whatsoever just kind of gives it a whole new look so that's that's how you do the uh how you do the image and i think like two minutes left i think i said i was going to talk about the the font schemes too and that's super nerdy and we can do that real quick since we've got time unless everyone's asleep so well ryan i have more of a sure about office 365 so i know that we have issues with when we have customers that have office 365 and we do custom master pages for them there are issues because as soon as microsoft changes something in sharepoint that they do all the time it breaks things in the master page lots of issues like that so would applying custom themes be able would you get around it by having a theme instead of a master page you probably would um because the themes are built to work with the out of the box master so i would assume that any change they make to the master page they would also add that change to the theming engine so for example there was a big change to the sweet bar and the the ribbon earlier this year or late last year sometime so 365 does not look like this anymore so they they changed the name of the sweet bar i believe and and so any theme that gets applied to that is going to apply to the new sweet bar if they're still calling it that um so you probably would be safer in that in that regard going with your themes rather than a full-on custom masterpiece now that's not to say that you can't do it but there are some limitations like being able to easily deploy a custom master page to lots and lots of sites it's a lot more manual process than you can do with a couple of clicks on see your on-premise site um but yeah you you can um you you probably would be safer going with the theme on the custom master page yeah so yeah you can have you can do the font thing if you want to if it's just like a minute or two that's fine 365 viewers might yeah that's uh probably a lot more important than this to be honest uh but if you you saw earlier the uh the what am i saying the font schemes that are part of those those themes so this is basically what they look like um you can actually build your own custom font scheme if you're say an evil supervillain and you wanted a custom font scheme to go with your custom composed look that had uh comic sans everywhere um you could actually do that i wouldn't recommend it but you could so essentially you open up that you what i would do is download one of the existing ones and modify it and re-upload it to that that themes gallery but you can basically tell sharepoint what fonts you actually want to use so there's your font name um your your eot font source your wafts there's all the all the various font types um for all your web fonts uh there are actually i'm not going to get into it now but there are a lot of good resources for uh for building your own custom font schemes if you actually just kind of google it there's a lot of good resources for how you would actually do that to use like google fonts or or other web fonts uh in a composed look so there are there are that option are those options too i just wanted to just wanted to throw that out there that you could actually build your own font scheme as a part of that if you're really really into that sort of thing awesome that's about all i have and we're a minute over and i actually did not expect to drag this on for an hour yeah i told you you could check the question did you vlog this ryan about the cool little sprite sheet hack because that's really neat and you're probably the only person that's discovered that i don't think and put it somewhere but uh yeah if you write that down somewhere then we'll let jack know sweet otherwise i guess they'll just have to watch this video and hit pause um cool so just one little quick announcement there's a online virtual conference called sp biz that is spbiz that is coming up in a couple of weeks i'll be presenting at that and it's just um just go google it spvis and and it's out there you can register it's free and um it's october oh let's see what is it let me find that real quick um that's the spbiz.conferencehost.com and it's slow okay it's um no i'm sorry god see i keep getting mixed up because it's um three six collab 365 is the name of the conference it's the same company that's doing it so i keep getting the names of those mixed up sorry about that guys it's collab 365. so sorry about that cloud365.conferencehost.com and it is october 7th and 8th 24 hour conference virtual online all right we gotta go we'll see you next time have a good week bye everybody see ya

Channel: SharePoint at Rackspace

Views: 3,275

Rating: 5 out of 5

Keywords: HOA

Id: S4lecMzHpcU

Length: 62min 59sec (3779 seconds)

Published: Wed Sep 30 2015