Box Headers

Link to this post 17 Mar 10

The box_headers.php file will allow you to change the category headers in your store.

You can reach the box_headers.php file in your admin. Go to Design and from there, click on the folder icon next to your template name to enter the template's files. Click on box_headers.php and then on the edit button. The file will look like this:

<?php
define('WHATS_NEW_HEADER', 'What\'s New');
define('SPECIALS_HEADER', 'Specials');
define('SHOPPING_CART_HEADER', 'Shopping Cart');
define('TELL_A_FRIEND_HEADER', 'Tell A Friend');
define('SEARCH_HEADER', 'Search');
define('REVIEWS_HEADER', 'Reviews');
define('PRODUCT_NOTIFICATIONS_HEADER', 'Product Notifications');
define('ORDER_HISTORY_HEADER', 'Order History');
define('MANUFACTURERS_HEADER', 'Manufacturers');
define('MANUFACTURER_INFO_HEADER', 'Manufacturer Info');
define('LINKS_HEADER', 'Links');
define('LANGUAGES_NEW_HEADER', 'Languages');
define('INFORMATION_HEADER', 'Information');
define('GOOGLE_ADSENSE_HEADER', 'Google Adsense');
define('CURRENT_AUCTIONS_BOX_HEADER', 'Current Auctions');
define('CURRENCIES_HEADER', 'Currencies');
define('CATEGORIES_HEADER', 'Categories');
define('BEST_SELLERS_HEADER', 'Best Sellers');
define('ACCOUNT_INFORMATION_HEADER', 'Account Information');
define('NEW_PRODUCTS_HEADER', '<center>New Products</center>');
define('BLANK_HEADER', '');
?>

Then, look for the words that you would like to change. So, for example, if I wanted to change where it says Categories on the side of my store to Shopping, I would look in this file and find the line that says:
define('CATEGORIES_HEADER', 'Categories');
I would change the last word in there to what I want it to say. It is important to keep the work within the apostrophes. Here is what I would end up with:
define('CATEGORIES_HEADER', 'Shopping');

Now, let's say I want to use an image instead. The area within the apostrophes is HTML compatible. So I can place a line of HTML inside of that to show an image. If you don't know HTML and you don't yet have an image uploaded, head over to the Image Manager link in the Design area of your admin. Scroll down to the bottom of the page and click on the Upload button. You will see an area to upload an image open up on the right side of the page. Then, head back over to your box_headers.php file. Add the following HTML to the area where you would like to replace a word with an image.
define('CATEGORIES_HEADER', '<img src="images/picture.gif">');
Of course, change picture.gif to the name of your uploaded picture.

Save the file and you are done.

If you have any questions about how to do this, please ask them in this thread.

Link to this post 17 Mar 10

Do you want all of your side box (also called info box) heading to have the same style? Your shopping cart is setup so that you can have a different style for each box. Here is what to do if you want them to be the same.

This is a great trick to use if you have a design template that has an image you can use behind the text in these heading areas. I'll use this method as an example in this post. First, I uploaded the background image to my template folder. I uploaded an image with a size of 150px by 55px (although you can choose whatever size you like). The image's name is box_top_back.gif

In your template's folder, you will see a file called stylesheet.css. Click on the file and then on the edit button.

Pretty close to the top of the stylesheet, you will see this code:


.AccountInformationBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.AccountInformationBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.BestSellersBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.BestSellersBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.CategoriesBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.CategoriesBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.CurrenciesBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.CurrenciesBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.CurrentAuctionsBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.CurrentAuctionsBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.GoogleAdsenseBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.GoogleAdsenseBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.InformationBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.InformationBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.LinksBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.LinksBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ManufacturerInfoBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ManufacturerInfoBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ManufacturersBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ManufacturersBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.OrderHistoryBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.OrderHistoryBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ProductNotificationsBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ProductNotificationsBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ReviewsBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ReviewsBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.SearchBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.SearchBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ShopByPriceBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ShopByPriceBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.ShoppingCartBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.ShoppingCartBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.SpecialsBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.SpecialsBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.TellAFriendBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.TellAFriendBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.WhatsNewBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.WhatsNewBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.BoxadBoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.BoxadBoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad2BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad2BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad3BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad3BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad4BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad4BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad5BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad5BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad6BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad6BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad7BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad7BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad8BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad8BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad9BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad9BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}
.Boxad10BoxHeader {border: 0px; padding: 0px; background-color:#ffffff; font-weight:bold; color:#000000;}
.Boxad10BoxContent {border: 0px; padding: 0px; background-color:#ffffff; color:#000000;}

Remove all of the code above from your stylesheet.

In it's place, add the following:
.infoBoxHeading {background-color:#ffffff;; border: 0px; padding: 0px; font-weight:bold; color:#000000;}

The above piece of code is used to style just the header area of the info box. You can use css to create any type of look you want.
To add a background image, I would change the above code to:
.infoBoxHeading {background: url("/templates/default/box_top_back.gif"); width:155px; height:55px; border: 0px; padding: 0px; font-weight:bold; color:#000000;}

The line below will let you style the bottom portion of the info boxes.
.infoBox {background: #ffffff; border: 0px; border-style: solid; border-color: #ffffff; border-spacing: 0px;}

Link to this post 07 May 10

OK I did this as I wanted images for my box headers; I had them there, but not they are gone! What happened?!

Link to this post 16 May 10

I'm sorry, I have no idea why this isn't working now. I spent about 3 hours on Friday trying to replicate what I did to make this work earlier. I think we will have to do it the other way until I can figure out why it only works for some people. I'll keep you updated on what I find out.

Latest Posts