Search

Trying to get a Header (File)

Trying to get a Header (File)

A lot of people have asked for an example of a custom header file, to help them get the ball rolling on their own sites. I’ve been hesitant to do it, because you can do so much with a custom header, that a basic bare-bones example might inhibit more people than it helps.

However,  the other side of the coin is people trying to create something unique, and they end up leaving out some important parts. So I’ve gone ahead and come up with about the simplest version possible. If you use it mostly as is, you won’t lose any necessary functionality;  you can jazz it up with extra menus, javascript, more tables, CSS, etc.

Please read the notes before using this code. It will not work as shown until you make a few changes for your specific site, as explained in the line-by-line breakdown below. Once you do that, save the code as header.html, header.php or something similar. Make sure the file is loaded to your website, and put the file name in the Site Header box under the Site tab of your AOM control panel.


<html>

<head>

<title><?php echo $page['Title']; ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="description" content="<?php echo $page['MetaDescription']; ?>">

<meta name="keywords" content="<?php echo $page['MetaKeywords']; ?>">

<script type="text/javascript" src="aom/js/jquery.js"></script>

<script type="text/javascript" src="aom/js/shop.js"></script>

<script type="text/javascript" src="aom/js/jquery.autocomplete.js"></script>

<script type="text/javascript" src="aom/js/lightbox/jquery.colorbox.js"></script>

<link type="text/css" media="screen" rel="stylesheet" href="aom/js/lightbox/lightbox1/colorbox.css" />

<link rel="stylesheet" type="text/css" href="aom/cfg.css.php">

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center"><a href="../"><img src="logo.jpg" width="800" height="100" border="0" alt="www.mysite.com logo image"></a></td>
</tr>
</table>

Line by Line Breakdown:

1. html – This is the opening line of your header file. AOM will insert the DOCTYPE statement ahead of this in your source code. So you don’t need to add that to your header file. There should be a closing /html tag at the end of your source code, either supplied by AOM or in your Footer file (if you have one).

2. head – This is the beginning of your HEAD section, where you put important bits of code that may not actually be displayed on your site.

3. title – The PHP code used here should pick up on the Site Title entered under the Site tab of your control panel. This will display the title of your store in the top bar of your web browser.

4. meta ‘Charset’ – A required tag that tells the web browser which character set to use. AOM V4.1.5 changed over to utf-8. Previous versions used iso-8859-1. This should help with displaying some non-standard characters and symbols.

5. meta ‘Description’ – Like the title tag, this should pick up the meta description entered under the Site tab of your control panel. This description will sometimes appear when the site is bookmarked or shown in search engine results.

6. meta ‘Keywords’ – Similar to the meta ‘Description’ tag above, this should put your keyword list from the corresponding area of the Site tab into your source code. While this meta tag is not considered as important as it once was, it never hurts to have your target keywords in place.

7. script ‘Jquery.js’ – Loads Javascript relating to the particular style of lightbox selected from the AOM control panel.

8. script ‘Shop.js’ – Loads the commands that control the lightbox in the shop.php file. In earlier versions of the software, this code was embedded over and over again in the script. Now it’s called up when needed, which makes the code run smoother, faster and is easier to update or customize.

9. script ‘Autocomplete.js’ – Loads the commands for the autocomplete function of the search bar (if required).

10. script ‘Colorbox.js’ – Javascript dealing with the lightbox CSS colors and how they relate to the selected style of lightbox to be used.

11. link ‘Colorbox.css’ – Link to the CSS file for the lightbox. This link may change depending on which lightbox you choose to use.

12. link ‘Stylesheet’ – When you have all the colors and backgrounds in place for your site, view the source code for your store (most browsers will have a ‘View’ command at the top of the page), and copy the entire stylesheet link to your header file (it will be much longer than this example). When you use a custom header, AOM will move this link into the BODY section. Copying it into your HEAD section will slightly decrease loading times, and is in fact the more ‘correct’ location. AOM moves the link to make sure it’s included in your site. It won’t be a problem to have it twice. Also, if you change any formatting you should recopy the entire link back into your header file.

13. /head – The closing tag for your HEAD section.

14. body – The opening tag for your BODY section, which is the main part of your source code, and the part you’ll see when you view your site. As with the html tag, there should be a closing /body tag at the end of your site.

15. table – This is a greatly simplified table structure, containing a clickable header logo. The structure can be customized to include almost anything you want; however you should check Google for info on how to customize tables, or replace it with a div structure. The following items should be changed to reflect your own site:

  • table width – change to whatever you have for Site Width in the Layout tab of your control panel.
  • img src – upload your logo image to your website, and put the path/filename here. Make sure the width and height parameters match the dimensions of your graphic image, and the alt is set to your store’s URL and/or name.

The other table settings should be okay as are shown. You should not have anything in the Logo box under the Images tab of your control panel if you use a table like this. It might give you duplicate images.

So with this basic setup in place, you should have a solid basis for your own customizations. Using the table for example, you can have a logo image and a list of clickable links or ads by changing the table to look like this:


<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left"><a href="../"><img src="logo.jpg" width="400" height="100" border="0" alt="www.mysite.com logo image"></a></td>
<td align="right"><EXTRA CONTENT HERE></td>
</tr>
</table>

The extra content can be AdSense code, or a smaller table with a list of links, etc. Watch out you don’t try to make the overall width of these elements wider than your store.

Latest posts

12 thoughts on “Trying to get a Header (File)

  1. Thanks for this comprehensive guidance.
    Hopefully there is a guidance for creating footer.html also.

  2. […] for these tags from the control panel. More information on that is available in the previous post, Trying to get a Header (File). var addthis_pub = ”; var addthis_brand = ‘AOM Talk’;var addthis_language = ‘en’;var […]

  3. very clear assistance, but there is no layout preview.

  4. mcarp555

    Because there is no actual logo or image to display in the example, there’s nothing to show in a preview. In fact, if you were to plug a logo into this code, it would look pretty much like you were not using a separate header file at all.

  5. Todd

    This post is worthless.. sorry its true. instead you really should describe the code in AOM and how it related to the code in the program not a basic html class.. rethink your post and re write it if you really want to be helpful..

  6. Mike

    Sorry Todd, what’s worthless is assuming that this would be a customized header for your site. If you had actually read the post you would have noticed where I stressed that this is a basic, bare-bones header for people that do not know how to create their own custom one. The description, keyword and stylesheet tags are AOM-specific, and the code as a whole should be used as a springboard for adding your own custom touches.

    You should rethink your own post before slagging off things you obviously don’t understand.

  7. dynamic

    Here is one more tip if you are creating an custom AOM header or footer file:

    Of course in the header file, you’ll want it to have an and tag. You will NOT want the corresponding closing or there.

    The opposite is true for a footer file.

    It does appear that AOM will write in the apppropriate closing tags when your page is rendered if you omitted them in your footer file or don’t use a footer file.

    *********

    However, I’ve found that some Web Development IDEs like Front Page will do you a “favor” and throw the “missing” opening or closing tags in your code when you save it!

    That makes for some confusing HTML.

    *********

    Solution appears to be go into a text editor like NotePad and remove the extra tags after filing your code in your “helpful” IDE.

    *********

    I’d imagine that SE spiders don’t like seeing more than a single set of ‘html’ and ‘body’ tags on a single page.

  8. dynamic

    Man, sorry folks!

    Does WordPress have something like UBB code that can be used?

    *********

    The first paragraph in my above post was ruined because explcit references to ‘html’ and ‘body’ tags was removed.

    Where ever my post looks odd, there was a reference to an ‘html’ or ‘body’ tag – either opening or closing.

    HTH – though I doubt it cleared much up (;-

  9. Giovani

    This worked out for me, had a problem with a custom box that doesn’t show anything but is a great part of my site, I just had to change the order to “2”

  10. Endeavor

    What are the dimensions of the Custom HTML Header/Banner (allowable)?

  11. It;s doesn;t work..
    i have follow step by step but the header can not shown at my site.. please help

    <meta name="description" content="”>
    <meta name="keywords" content="”>

  12. mcarp555

    As stated, please open a support ticket through the AOM site if you require assistance.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.