Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Welcome to the Themes Example video and this is going to be Part 1, no doubt this will end up being a two parter by the time you watch me hack through some of this code but I just want to create a very basic Themes Example and I want to show you how to set up your own Theme, then in Part 2, we'll set a different Theme up and switch between them. Okay. I'm going to open just new website in Visual Web Developer and click down here and I will just call this Theme Example and there'll be a copy of this one out in your Work Files and it'll be similar to this and it'll kind of show you how it's set up. The best way to do this would be to follow along with me. Now first of all let's notice a couple of things. If I go out into Solution Explorer and open up Site Master, you will notice that I've got a link to my Site.CSS file and I'm going to pin my Solution Explorer up and you will notice that under the Styles folder I have a Site.CSS. Well you'll notice I don't have the app Themes folder that I mentioned when I talked about things using the Powerpoint slides, so, let's talk about setting up a Theme here. And notice here's Site.CSS, I don't have any skins, no real imaging going on here. So to set up a Theme here, the first thing I want to do is remove the link to the Site.CSS file. Okay. So I'm just going to highlight that in the Site Master and remove it. Now if I run this and I go look at this page, run it without debugging so I don't have that hassle here. Notice that it's not going to quite look like it did. Alright. I've lost all my Cascading Style Sheet formatting on it and you've seen this one page run a couple of hundred times in the course so far. So here's what we're going to do, we're going to first create the Apps Theme folder, I'll right-click on my Project Name and I will add an ASP.NET folder and notice there it is, Theme and when I choose that, notice it added Apps Theme and it called it Theme 1 and I'm going to leave it at Theme 1 and just click anywhere and there it is. Now I'm going to take my site's CSS, drag it up into Theme 1 and let it go. There it is okay? Now what I need to do here is to go make a change, if I run this now it's still not going to work because it doesn't know to use this. So what I'm going to do is go out into the Web.Config file and I will go down to that System.Web and you'll see right here this is the end of System.Web. Okay. And I'm just going to put the, notice the Pages Setting here, whoop I hit my mouse, I'll just double-click that and anyway, I'll just Pages in. Okay. Now all I need to do here is set the Theme, notice there's Theme equal to and it puts in my quotes there for me, Theme 1. And now if I go run this, we should see our Theme. And boom there it is, our Theme is back. Now what's interesting is, I'm going to show you something here, if I go into the and I'm in Firefox so I'll go to the Main Menu up here to Web Developer and I want to view the Page Source, you will notice that it's showing me up here the script, the source and here's a Theme example, web resource and so it's going to set some of this stuff and notice here's my link, that's what I was really looking for here. The site CSS Style Sheets, so it's telling it to look in the App underscore Themes, Theme 1's a subfolder in Site CSS. Alright. Now if I go look out in my Master File, Site Master, you'll notice I don't have anything about CSS or Themes or anything out here. Now if I go into the CSS, I'm going to double-click the CSS, you're going to notice this is your Cascading Style Sheet and we'll come back in here in just a few minutes in Part 2 and change some of this. But this is what's actually doing the markup formatting that you're actually seeing out there in the browser. So this is your Cascading Style Sheet your .CSS Sheet. Now we could also put .Skin files out here to add skin changes to the colors of certain controls and that sort of thing but for now let's, let's stop here, we'll stop Part 1 here, come back, join me in part 2 of the Themes Example video and we will go create a second theme and switch back and forth between them. But before I do that, let me show you one more thing that's kind of interesting here. I'm going to go back out and open Default ASPX. If I look at that in Design Mode, you'll notice that I've lost my formatting here, my Style Sheet formatting here, I've lost the CSS. Now what's up with that? Let me show you the fix on that. Go back out to Web.Config and down here where I made this Theme, I want to change this to Style Sheet Theme. Alright. Now once I do that, I'll have to rebuild my site, so I'm just going to build the website over again without running it and now notice I succeeded, so if I go to back Default, now I've got my formatting back. So once you this Theme route in the Web.Config file you'll have to put the Theme to Style Sheet Theme right here. Point to the Theme you want to use to be able to see that particular Theme out there in this Design looking environment in Visual Web Developer or Visual Studio. Okay. So anyway join me in part 2 and we'll add a second Theme and switch back and forth.
| Course: | Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) |
| Author: | Mark Long |
| SKU: | 34292 |
| ISBN: | 978-1-61866-029-9 |
| Release Date: | 2011-12-31 |
| Duration: | 8.5 hrs / 108 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |