How to Add a Custom Logo to your Website

How to Add a Custom Logo to an XLEcom Website

The following methods describe how you can add a custom logo to your website.

  • Creating a new Top Frame / Area Image
  • Adding a Logo or Transparent Image in the Top left corner as a Hyperlink back to the Home Page

Creating a new Top Frame / Area Image
This method currently utilizes the Company Name text as the Hyperlink back to the home page. This is XLEcom's default behavior.

All XLEcom published web sites contain a top frame / area image. The simplest way to add a custom logo to your XLEcom web site is to either create a new top frame / area image or to modify an existing XLEcom top frame / area image. XLEcom initially includes 53 top frame / area images. You can view a list of these images using the Site Themes utility.

The top frame / area images are located in the default installation directory C:\Program Files\XLEcom\Assets\images\themes\frames. To edit an existing XLEcom image, open one of them in an image editing program an use it as a template to create a new image with your logo included. The XLEcom top frame / area images are 256 color gif images, 1600 x 91 pixels in size.

If you are going to add your logo to one of these top frame / area images, then first convert the top frame / area image to 24 bit color before you add your logo. Note: To obtain the best look when adding your logo to the existing image, is to add the logo to a new image layer. This way to can simply edit and move the logo without affecting the frame / area image itself. When you are done editing the image, save the image as a master image file in the native 24 bit color format. This way you can revert back to it if you decide to make changes in the future. Next, convert this master image to 256 colors and save it as a new gif image. Now place this new gif image in the C:\Program Files\XLEcom\Assets\images\themes\frames folder so that you can select it for use in your web site using the Site Themes utility in the XLEcom program. That's it.

Adding a Logo or Transparent Image in the Top left corner as a Hyperlink back to the Home Page
This method does not utilize the Company Name text. The logo or transparent image will be used as a replacement for the Company Name text and will be a Hyperlink back to the home page.

Instructions:

    Run the "Site Setup" routine and switch to the "Top" dialog box as shown in the screen shot image below. Depending on if you are Publishing a Framed or Non-Framed website, enter the following code into the Company Name edit box.

    If using a logo image, change both the file name and image size dimensions in the code to match the properties of your logo image. For the Transparent image, null.gif, you do not need to modify the dimensions. Remember to modify the image url in both cases to match your site's domain. Also, turn off the bold option for the Company Name.

Download the transparent null.gif image (1x1 pixel size): null.zip

    Place either your custom logo or the transparent image, null.gif, in the XLEcom\Assets\images\website folder prior to publishing your website.

    Using a Custom Logo Image:

    Framed Site:
    </font><img src="../images/logo.gif" width=150 height=70 border=0 alt=""><font>
    or
    </font><img src="http://xlecom.com/images/logo.gif" width=150 height=70 border=0 alt=""><font>

    Non-Framed Site:
    </font><img src="http://xlecom.com/images/logo.gif" width=150 height=70 border=0 alt=""><font>

    Using a Transparent Image:

    Framed Site:
    </font><img src="../images/null.gif" width=150 height=70 border=0 alt=""><font>
    or
    </font><img src="http://xlecom.com/images/null.gif" width=150 height=70 border=0 alt=""><font>

    Non-Framed Site:
    </font><img src="http://xlecom.com/images/null.gif" width=150 height=70 border=0 alt=""><font>

    You need to use the both the closing HTML </font> tag and the opening <font> tag in the code because you are using the "Company Name" field that was initially designed to accept text. In order to make this field function with an image hyperlink, you must first close the font tag for the text field and open another font tag to continue the code for the rest of the page. To understand why this is necessary, view the HTML source code of a published page.

Sam Raheb
XLEcom Program Developer