Epic AdventureWorks Part 4 - The Style

July 28 2010

This article is (finally) the fourth of a four part series:

Check out the AdventureWorks ASP.NET Sample ASP.NET app online.

And now, I introduce to you, Jon "Jebro" Coulter. This is the CSS ninja that styled the entire app. This entire article was written by him so kick back, relax and listen to how he styled AdventureWorks.

There are a few VisualStyles that make up the controls in this page, the majority of them being custom or based on Windows7 BonusVisualStyle.

Let's start with the menu. This is a hierarchical tab control used as a menu. The styling for this is very simple; it is a custom visual style with minimal styling added. Hierarchical tabs work by using levels, so here you can see 'level0' is styled as a dark bar, and 'level1' is styled as a brighter blue as it is going to represent where you are. The benefit of hierarchical tabs is that it can also function similar to a breadcrumb, as you can see the page you are currently on is in bold as well as the category you are in.

#hd .menu {  
background:none repeat scroll 0 0 #333333;  
clear:both;  
display:block;  
margin:0;  
padding:0;  
width:100%;  
}  

#hd .level0 {  
border-bottom:3px solid #0099CC;  
}  

#hd .level1 {  
background:none repeat scroll 0 0 #007399;  
clear:both;  
color:#FFFFFF;  
display:block;  
margin:0;  
outline:medium none;  
padding:0 2%;  
width:96%;  
}  
#hd .menu .C1Selected {  
-moz-border-radius:3px 3px 0 0;  
background:none repeat scroll 0 0 #0099CC;  
color:#FFFFFF;  
font-weight:700;  
}

Now let's follow the page down and you will see what appears to be a bar chart; however it is a set of progress bars. Using progress bars allowed for some cool animation as well as representing the data in an interesting way. These are using Windows 7 BonusVisualStyle as a base because progress has a lot of parts so it was easier to adjust an existing one. I basically removed a lot of the borders and glassing to make it match the flat style of the rest of the site.

Next the product display, this is a combo control featuring multi-page and tooltip. The multi-page is using a custom VisualStyle, and there's not much to it. It's just a white background and a drop shadow. Typically a multipage has paging controls at the bottom, but we wanted this to look more like a carousel so the previous and next buttons were moved to the sides using absolute positioning.

The tooltips for each product are using a styled template. It is all based on the Vista VisualStyle and slightly modified to be a little bit more transparent by using CSS3. There is not much styling in the tooltip, other than layout positioning of the template items within it.

If you drilldown a little more into the Mountain Bikes you can see some of the filtering controls. The color filter is using ComboBox. This is using only the Windows7 BonusVisualStyle, the default style looked good and matched the site well enough so we decided to not modify it.

Next is the slider control, this time the Vista style suited our needs and style. There is only one small modification to it which is the slider range indicator that really helps illustrate what the slider is representing as you slide it.

The multipage here is using the same style as the overall product page, but slightly modified. Newly added is the title indicator to show the small description of the bike. The paging arrows have also been moved to a more typical area for a multi-page in the bottom left and bottom right.

.ListProductHeader {  
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.5);  
color:#FFFFFF;  
font-size:12px;  
margin:0 auto;  
padding:5px;  
position:relative;  
text-align:center;  
top:-10px;  
width:142px;  
z-index:999;  
}

If we drill down further into a single product page you will see a lot of the controls we have already talked about, but displaying data for a single product. We are going to follow the process of buying now.

When you click 'buy' the Window control pops up, this is using a custom visual style. The styling behind this is meant to mimic that of jQuery UI's style. Very simple and clean and just a shadow to illustrate that is above the content.

.C1Window {  
-moz-border-radius:4px 4px 4px 4px;  
background:url("images/shadow.png") repeat scroll left top transparent;  
padding:8px;  
}

When you jump to checkout, a new control will be introduced here in Grid, it is using the Windows7 VisualStyle. Once again the Windows7 VisualStyle worked perfectly here and didn't need much modification; most of the styling is done around the grid. Another use of progress is here with the Vista VisualStyle showing actual progression through the chart, this is using the default style as well.

If you're not already logged in you will be prompted with a form when you continue to check out. One of my favorite controls is using through the rest of this checkout process and on this page. That is Form Decorator. Here it is a very simple style, but it really helps to make the form look uniform and the buttons more modern and match the style of the website. You will notice the checkbox here is a set of images; it has all the functionality of a regular check box, but looks much more interesting.

.C1fdTextBox, .C1Input_ArcticFox {  
-moz-border-radius:3px 3px 3px 3px;  
background:none repeat scroll 0 0 #FAFAFA;  
border:1px solid #999999;  
padding:5px;  
}

Onto step two this is a fairly complicated check out form using a few different elements. Overall it's using the Form Decorator and within that it is using ComboBox using Windows7 style and the input control using Vista style. The Form Decorator has the custom styling here, which we explored in the login page with the check box, it is now done using radio buttons.

Onto step 3 this is using the Form Decorator yet again and now there is a Calendar using the Windows7 style which fits well yet another time. As you can see it scales up to quite a large size taking up almost half the page here.

The final step is the confirm page, this is using all the controls and styles we have talked about previously, but it all comes together here.

Completing the order you will see the report viewer. This is using the Vista VisualStyle and styled after the Adobe Acrobat viewer so it has a very familiar look.

The interactive island piece on the home page doesn't use any ASP.NET controls, but I thought I would break it down a bit anyway. There are a few absolute positioned items here, the island is the background piece and there's 3 iconic images and well as the tooltips to indicate where you can drill down into. So the icons representing each biking type are just above the island layer, and then at the top layer is the tooltip. The benefit of using such a complex system instead of just using a static image is that when you hover over each area you get the glow effect to illustrate where you are or want to go. There is also a subtle effect as you load the page; the entire island block fades in which really helps the illusion that this is a flash or Silverlight piece.

.island {  
background:url("Images/island.png") no-repeat scroll center center transparent;  
display:block;  
height:580px;  
margin:0 auto;  
position:absolute;  
top:120px;  
width:960px;  
}  

.mountain_tooltip {  
background:url("images/mountain_tooltip.png") no-repeat scroll center top transparent;  
display:block;  
height:130px;  
left:790px;  
position:absolute;  
top:103px;  
width:157px;  
z-index:1;  
}  

.mountain_tooltip {  
background:url("images/mountain_tooltip.png") no-repeat scroll center top transparent;  
display:block;  
height:130px;  
left:790px;  
position:absolute;  
top:103px;  
width:157px;  
z-index:1;  
}

About Our Special Guest "Jebro"

2872_586133127958_60713944_34255109_2343531_n Jebro is our very own UI designer and works on making our products look good. He is a CSS Guru and can kick your butt in StarCraft. Check his killer website our or follow him on twitter.

The End!

We did it, we walked through (nearly) every aspect of building AdventureWorks in ASP.NET AJAX from blueprint to finishing touches. It has truly been an Epic Adventure and I look forward to more like it. I hope this series was interesting or helpful to you. I know I learned a few tricks along the way. Don't forget to check out the live demo or download Studio for ASP.NET AJAX which includes it. If you download it, you can see the bonus Mobile/iPhone version included. Who knows, maybe there will be another Epic AdvetureWorks blog about building the mobile Web app.

MESCIUS inc.