After installing a new skin and getting their site just how they imagined, many of our AspDotNetStorefront clients suddenly realize that the tabs on their account registration or checkout pages don't look right and want to know how to change them. Here's what you need to know about those tabs: 1. The text and the tab background is a single graphic that is not editable in String Resources or with CSS. The only way to make the tab look any different is to directly edit the graphic. 2. Each tab is a .gif found in Skins/Skin_1/Images in your site's root directory.  To find the specific tab you're looking for, go to the front end of your site and right click on the tab, then either view Properties to see the filename or View Image to see the image filename in the browser's address bar. 3.  In that directory there is both a .gif and a layered PSD (Photoshop) file for each tab.  The images displayed on the site are .gifs, which means there is one single layer to that image. It's not easy to simply change the font type or change the background color.  Here is what the accountinfo.gif looks like, and what you see on your site:

4. Typically in order to edit the text or background of an image like this you need a layered version so that you can isolate the different elements.  Unfortunately, the PSD file provided for that tab is not the same as the associated .gif file, and there is no PSD template for the tabs as they actually appear on your site. Here's the tab you get when you open up the editable, layered accountinfo.psd file: So what does that mean for you? Let's say you want to change the tab that says "Upsell Products" to "Combine Your Purchase With".  You can either: a) Open the upsellproducts.gif file and do some major Photoshop work to change the text but keep the background, or b) Open the layered PSD file and change the background and text type to look more like the .gif version of the tab, then save as a .gif and replace the current one. If you don't like either of the default versions provided and want to change ALL your tabs to look more like the rest of your site, you'll need to start with one of the default PSD files, such as accountinfo.psd, and edit the background and text layers until it looks like you want it to. Then you'll need to recreate each tab's text (there are 73 tabs in all) and save each as its own .gif,  replacing the default .gif file with each save. Or save a lot of time and let us take care of it for you. We've made dozens of different Custom Tabs for ADNSF that may work better for your site and you don't have to do anything but download them. If you don't find exactly what you're looking for, we can get you a set that's perfect for your site in a fraction of the amount of time it would take you to remake each tab yourself.

Tags: ADNSF, AspDotNetStoreFront, custom, default graphics, Design, Graphics, tab, tabs

This entry was posted on Monday, December 29th, 2008 at 6:50 pm and is filed under AspDotNetStoreFront, Design, Graphics & Images, ShopVortx. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.