Upgrading Interprise 5.6.22 for Easy Skinning

So here is one of the issues I have with Interprise and ASP.Net Storefront:

The “Shopping Cart” header does not fit with the font, styling, color scheme, or really anything.  If I want to change it, I have to create a new graphic.  But not just one graphic, but 79 graphics:

So, what can we do about it?  Well here comes HTML + CSS to the rescue!

Changing your ASPX file

The default box for the Shopping Cart example above looks like this:

The asp:Image is where the Shopping Cart displays the blue boxes we wish to get rid of.  Lets add after that asp:Image control with the following:

and set the asp:Image control to have a Visible=”false” attribute like this:

and change the table beneath all that to have no style, but instead use the “boxBody” class, like this:

So the completed block looks like this:

One thing to note about the above, we could have deleted the asp:Image control, but made it invisible instead.  If we deleted that line, we would have to change the ShoppingCart.cs file to no longer look up the image and I am a bit too lazy for that.

Getting Some CSS Up In Here

So, now what?  Lets create some CSS that can make everything pretty:

What this does, is take our boxHeader.png image, which looks something like this:

or

What I like about the first image is that I can use the table.boxBody CSS style to blend in and get a nice unified look:

Pretty cool huh?

And Repeat

So, once you have the above done as a proof of concept, you need to start changing this all over the place.  Here is a list of files that need to updated to use my H3/Span method instead of the image.  ** Make sure you make backups of each file you edit! **

• ShoppingCart.aspx
• Account.aspx
• CreateAccount.aspx
• Xml_Packages\page.search.xml.config
• CheckOutShipping.aspx.cs (* see note)
• CheckOutPayment.aspx.cs (* see note)
• CheckOutReview.aspx.cs (* see note)
• [ I am sure I missed some ]

For the XML Packages, instead of changing the boxes, you can modify the BoxFrameStyle AppConfig, but I prefer to use a class instead so I can do a CSS only skin.

About CheckOut[blah].aspx.cs Files

Update the DisplayOrderSummary method like so:

Each file requires slight difference, but you should be able to figure them out.

No clue why they bake the graphic/skin into the code like that.  You can Modify the type, it exists in the InterpriseSuiteEcommerceCommon.InterpriseIntegration namespace, but there is a large amount of code in there.