Sidebar

startup_tutorial_and_checklist:design_configuration:specific_html_elements:change_logo

Logo Change in Default Design

How do you change the "your logo here" image? The "your logo here" image is a jpg image within your custom template set. For some of you this process may be unbearably over simplified while to others this may seem like rocket science. We can't tell which before hand so simply scan through for the basics if over simplified and follow exactly if not. The first step is to get your logo into the template set so it can be referenced within the design. You can do that through the following admin tool within Geo admin tool:

DESIGN > MANAGER

Once you are in that admin tool page you would navigate to the location where images are placed within your custom template set. So within the above admin tool click on the "external" directory in the left column and then the "images" directory within it…that navigates you to the following directory within your custom template set:

/external/images/

Once there you should see something like you see in the following screenshot:

Within the above screenshot of the DESIGN > MANAGER admin tool:

  1. You'll have navigated to the directory circled within your custom template set
  2. then to upload your logo you'll click the upload file button to upload your logo into that directory

Once you click the upload you'll see the following:

Within that screenshot:

  1. You will see the directory that file will be uploaded to.
  2. Click this button to search your local computer for the image file you wish to use.
  3. Once you have chosen the file to upload on your local computer it's name will appear here. You can manually change the filename here but only change the value before the ".". Do not change the file extension. If you change the file extension you will only get "type mismatches" between the extension that tells what type of file it is "externally" and the headers within the file that tell what type of data is contained. You will have options below to deal with options of whether the file name uploaded exactly matches the default "logo.jpg" filename or is actually another file name.
  4. Once you have chosen the file and are happy with the filename click the "upload" button to upload that file into your template set.
  5. Or if you wish to abort this upload attempt click the "cancel" button

As aluded to above you have two options for uploading the image. One is to make the uploaded image the exact file name of the default file used. The second option is if you upload an image filename "different" than "logo.jpg" (different filename or different file type extension). The two sections below deal with each option and provide instructions one what to do next.

<tip c n>Note that the default design contains a logo.jpg file that is 275 pixels wide and 50 pixels tall. So if you are wanting to replace that exact file without the need to change any css or html in the default design to compensate for different logo file sizes then we suggest your uploaded logo be at least roughly the same dimensions.</tip>

1) Upload Your Logo Image of the Same Name and Type Over the Default Logo Image

With this method you create an image on your local computer of the same name and type as the file image on your server. You then overwrite that logo file on your site with the logo image you created. The default logo image is a jpg image named logo.jpg. The image you create must be a jpg and have the same exact filename (logo) and file extension (jpg). When we say exact same filename we mean that. You can't use "Logo.jpg" or "logo.gif" or "LOGO.JPG" or "logo.jpeg". We mean a jpg type file of that name. If your image can't be the same type and name you should go to method two below. The default image size is 275 pixels wide by 50 pixels high so unless you want to make some possible design changes to fit your logo into the design you at least close to those image dimensions. Once you have your image you'll upload it to your site. The above steps illustrate how to get that file into the proper directory of your template set. You can also look through the following getting files into your design section of the support wiki on how to upload a file to your template set if the above isn't enough instruction.

2) Upload Any File You Want To Use and Change the HTML to Use that Image

With this method you create an image of whatever file type and name, upload it and change the html of the default design to use your logo image. The default image size is 275 pixels wide by 50 pixels high so unless you want to make some possible design changes to fit your logo into the design you at least close to those image dimensions. You will upload your logo to your custom template set following the instructions mentioned above. To keep things organized we still suggest you put your custom image in the same location as the default logo.jpg image is. That's within the following directory of your custom template set:

/external/images/

See getting files into your design section of the support wiki on how to do that.

But since you are using a different file name and type your not done. You'll need to change the html to use your file instead of the logo.jpg image currently in use. To do that you'll need to edit the following file in your custom template set using the DESIGN > MANAGER admin tool:

/main_page/header.tpl

And look for the following line:

<img src="{external file='images/logo.jpg'}" alt="Website Name" title="Website Name" />

If you put your logo into the same directory as the one mentioned above the only part of the above line you need to change is the logo.jpg part. You would change that to the filename you uploaded and save your changes.

See the uploading files to your template set support wiki article on how to get that file to your template set.

Also note keeping that image in the same directory makes your template set more portable. If you decide to move your design from installation to installation or just back it up you can export your template set within the admin tool and that file would be included in the exported zip file.

startup_tutorial_and_checklist/design_configuration/specific_html_elements/change_logo.txt · Last modified: 2015/09/01 17:47 by geojames