 Hello, this is Christian. In this video, we'll look at themes and skins in ASP.net. A theme is usually the look and feel of a web page and skins are like the texture of your components on the website, like the background colors of the site, the buttons and things like that. So a theme can include one or more of the following content, like CSS, skins, JavaScripts, graphics, audios and videos, and other resources. Perhaps the most common ones you'll see are mainly the CSS skins and the graphics here. A theme can be scoped at the server level. All the sites that are on the server can have the same theme across the entire server. They can also be scoped at the site level so that each site will have its own theme. Here, I just put a yellow to show you that these are basically sites. Themes can also be scoped to the page level so that a page can have its own theme or maybe a feature on the page, for example, like sports or products page or sections can have different themes as well. Let's take a look at some examples on what theme would look like. So here is the Gateway website. You'll see the theme here is the color of dark red followed by the dark gray and some orange over here as well. If you scroll down, you're going to see the same theme color across the site. The other one is like Best Buy. You'll see the Best Buy has blue and yellow and white. That's across the entire page as well. You'll see a lot of yellow and blue here. If I go into the products page, you're going to see that it has a similar layout across the entire page. You'll notice that the button also has yellow and blue as well. Finally, the official website of the Packers team is green and gold and white. That's how themes and skins can be used. Let's go and create themes and skins in ASP.net. This is the project I created earlier in the previous video. If you missed it, you can click on the link in the upper right here just to run this so you can see what it looks like. Here is the... I'm going to just float this by itself. I have a dark gray theme here. If I go to other pages, you'll see that they have the same dark gray theme. I'm going to create two themes, one for the About page and one for the Contact page so that it has own color. Let's go back to the code here. I'm going to do one more thing. I just realized that in the Master page, in the title, I didn't have a title here. I'm going to include a title page here first. I'm going to go and add it here. Page.title. That should load the title to those places. Notice I also put a link here. That links to the style sheet and the default... the styles folder here as a default style sheet. I didn't view on the page over here, but let's go over here and go back to the home page. If I do a source view, you see that here. It's right below the title. It's the link to the style sheet. Pay attention to that and we're going to come back and compare where the links are injected after we add some theme to our page. Back in the code. I'm going to create a theme. To do that, you just go into the project folder here. Click on the project name and click add. We're going to add ASP.NET folder. Here's the theme, so click on that. It adds a theme 1 folder here. It has a little circle icon here, but really just the theme folder. Instead of the theme 1, I'm going to click on it and change it to a blue theme. A one from blue and also do one more for orange. I'm going to do this again. Add a theme. I'll call this one here orange theme. I'm going to just copy this style sheet here. Copy it and then paste it right into the blue theme first. Now open that. You can rename it if you want. You don't have to, but you can rename it. I'll just do that because I don't want to confuse with the other default. I'll call it blue for my CSS. This blue CSS theme, I'm going to change some color here. The background for navigation, instead of just this great theme, I'll use a dark blue. Copy that. Dark blue for that one. The photo area, also I'll use the dark blue for the background color. The color is white for the font, that's fine. When I hover this link, I'm going to change that to a light blue, a light blue, a light cyan. Let's do light cyan for that one. The font will be dark blue as well. I think that's pretty good. Let's save that. That's all I'm doing, just really tiny parts here. Then I'm going to go to, actually the body also, instead of light gray, I'm going to change to a light blue. This is a really light blue color for the background. Save the file. Now go to the About page. Up here in the page tag, I'm going to enter that, so have some space. Right after the code behind attribute here, I'm going to add an attribute called theme. Let me put some space in between. Theme equals, and you'll see that those two themes are already visible here. I'm going to choose the blue theme for this page. I'm going to save that, and then I will just go back to the browser and refresh my page. Notice again, refresh my page. The default page is gray. My About page, you notice is now changed to blue. In the source view, I'm in the home page. If I click on that, notice nothing changes here. Now if I go to the About page and do a source view, you see that now I have two links to the style sheet. The first one is the default up here, and then it injects this blue CSS style sheet from the themes page. According to the rules of precedence and style sheet, the one that is closer or the one that loads last will take precedence. It will overwrite everything in this style sheet. Anything that is the same will overwrite that. That is the reason why you put a theme here. It serves that purpose. How does it know that it injects here and that in the top before this line? That is a really good question. You will see that here is, I'm going to make another change in here. I applied the theme using the theme attribute. I can also apply the theme using another one called style sheet theme. That is also another way to add style sheet to the theme. The reason why you choose this is because for the following reason. Notice I changed that theme, go back to the browser, and refresh my page. Notice the order of these two sheets here. I'm going to refresh this page. Boom, you see that now the style sheet that I added using the style sheet theme has injected the style sheet up here on the right top even way above the title page here. The default style sheet is still down here. That means because this is much lower and the page here is going to take precedence. My blue page is not going to be affected. If I go and refresh it, you see that it reverts back to the gray just like the home page. That is the difference between using a theme and the attribute and also the style sheet theme attribute. Again, the style sheet theme attribute will inject the theme to the very top of the page. If you have any local style sheets like the one we added to Sidemaster here, I've added this one here manually so that this will take precedence. If you want your style sheet to take precedence, then you must use theme instead of the style sheet theme. Once you change it to a theme, then this will take precedence and any local style sheet you added here will be added to the top or actually above this theme. Again, I change it to theme. If you go back to the browser and refresh the page again, it should change back to blue and the source view, now this one here. Notice when I refresh the page, it comes back down here right after the other style sheet so that is the difference. Finally, I'm going to add the green theme. I'm going to copy this, put it into the orange theme. Orange, not green, but orange. I'm going to rename it to orange. Everything looks the same, except the background color will be different. I'm going to use it like the light coral or maybe a light blue. For the background, the navigation instead of dark blue, I'll use the orange red. It looks good here. I use that for the navigation as well as the photo area. The font will be dark. We can use the dark orange red as well. The background will be a light the same as before, the light salmon. Let's say that's my orange theme. Save my file and then go to the contact page and add the theme up here. Beam is equal to the orange theme and save and that's it. Go back to the page and refresh this page here. Here's the default, the blue and the orange. It's kind of hard to see but that's okay. I'll just leave it as is. It's kind of hard to see. Maybe just change it to black. Back to orange and then the font I'll just change it to black right here. That looks good. Now let's create a skin file. A skin file is a special file with a dot skin extension. All it is is just a way for you to control a certain group of controls or components on the web page like buttons. If you want to be in a single place a single file you can manage them easily. Any tags that you want to put in that file you can also do that. To do that just go to the themes folder. Right click on the theme here. I'm going to add to the blue theme only. I'm going to add a new item and you will see there has a new skin file here. Select that. The name will be I'll just call it blue. It's a button skin. It's for all the buttons on my page. You can remove all these comments here. To do that first let's go to the about page and let's add three buttons on my page. Let's say that I want to add three buttons so I want to click on that button I'm not going to implement that yet but here I'm going to go to the tool and add a button right here. The text will be for this one I'll just call it maybe a list of my projects I'll add another one here and then this will be button two and three. This is my resume. We'll load that and here is maybe my hobbies. By default this should be the default color if you go back to the browser and go to the about page these are default buttons. I also want to center everything here. It looks kind of far off on the left. My head hurts. I'm going to change the color so it has a blueish color maybe a blue font or something so it's unique for this particular skin. Let's go back and modify our skin. Let's go to the CSS first right top. Let's add the text align to center. I'll do the same for the other two files. Copy that and go to the orange add that here and one for the default too. Now back to the buttons here I'm going to go to the design view and I'll go choose one of these and just make some design here. Now the button I will just leave it as is I'm not going to change its size to a certain size I'll just give it default size but my properties as you can see here let's go and turn on the CSS property here let's go and reset it so it's in the right place. I want the four color the four color is the font the I guess we'll keep it blue like really blue like that that's the blue font the background color for the button I'm going to change it to something kind of light maybe this light blue maybe not so cool a little bit lighter maybe that one kind of matching background color already I don't know we'll see and then I want the border color as well let's say I use a really dark blue like that and I want to change the width of that to be maybe like just one pixel I don't know what it looks like let's go back and say this file and let's see what it looks like on the browser first okay so let's say I want to keep that button for all my buttons on this skin so now I can do is go ahead and then go back to the source view and refresh the page and you're going to see oops over here my buttons down here the one that I have the style sheet applied to is just the last one see all these different style sheets here so then to apply the skin you go back to your code and in the source view and you just basically copy this tag here's why copy that go to the skin file and add it right in here now there are certain attributes that you cannot add to the skin file like the ID right you cannot use the ID here because you know these are only applied to the page file you don't need that the text you don't need it it's basically just the look and feel the colors and border and things like that so at least these are the things that you need to apply to all the buttons so I you can say this file go back to the about page and remove these CSS okay so save that now that skin file should be applied to all the buttons I have on this theme so if I go back to the browser and refresh my page again right voila there it is if I go to my source view review that and you will see that all the styles are applied directly as an inline style okay this is not ideal because um you know it's okay but usually you don't do this way so instead of doing this way I'm going to copy this rule and put it into a class so instead of having you know all these attributes here you can move this into a class so in my in my blue style sheet that's I'm going to go to the very bottom down here and add a class and I'll call it the button uh the default for all my buttons and I'll use this style sheet right here I copy this from their page okay so I had this this is a default now I go back to my skin file and then instead of having all these attributes here I can delete all of them and just use a CSS um class equal is called button default and what that will do is it will just convert this to a class it will reference this in the default okay so save the file go back to the browser and refresh the page click on it and it should look the same in the source view refresh it you'll see that now use a class right as opposed to the inline style so that's the idea now let's say I want to add another one um that might have a different skin for the button how do you do that okay so first let's go add another button to the page and this time I'm going to add I'm just going to control D for add maybe add add 2 so this is number 4 and number 5 and let's say this one goes to my LinkedIn page and this one goes to um I don't know that meta like Facebook right now how do you make it so that these two are unique well you do that by going to the skin file and then duplicate this line again now you can have two buttons of the same type in here if you just do like this and run it it's going to have a problem okay just want to show you so I try to load that you see that has a problem because you are duplicating the same style sheet and you cannot do that okay so um go back here and I'm going to do what I'll do is I'll create another class for this particular one and maybe I'll call it button um social media okay I'll copy this I'll actually go back to my blue style sheet and then I'll use the same most of these things will be the same I'll just change maybe the um I don't know the background color I'll make it so that it's blue kind of like this blue color the font will be white and I'll leave everything else as is let's just say that's the only thing I want to change for my social media okay and then now in my skin file it has that different class now to make this unique either this or that one you have to include a skin ID okay so I'm going to put over here on the right for here a skin ID attribute and you give it a name for this button so I'll use BTN SSM for social media okay so if I go back to this page and if I want this to be to use that style the skin I have to go in here and add it here so let me go right the top here skin ID is equal to and it should be visible here so I'm going to use that also for the second button okay so now those two buttons and now link to that second button skin so if I go back here again refresh my page and here we go so now these two are now use that one here with the rest of the buttons use that default so that's how you create skins to a website