Help  ›  2. Customization  ›  Look and feel  ›  How do I replace Ultimento’s logo with my own?

How do I replace Ultimento’s logo with my own?

One of the many techniques used on Ultimento to speed up the load time of the Magento theme as much as possible is combining images. If you’re interested in learning more about this technique and why it is used keep reading – otherwise skip directly to the section “how do I change the logo”.

Why does Ultimento combine images and how does it do it?

When you use many background images on your Magento theme, you slow down your site’s load time in 2 ways:

1. First you increase the number of HTTP requests that your site sends to the server (each time it calls for an image). Here’s what Yahoo has to say about this:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. [...] Reducing the number of HTTP requests in your page is [...] the most important guideline for improving performance [...]

2. Second, you affect the page rendering speed as perceived by the user. Internet browsers are unable to render the page’s structure until the background images are loaded. That’s because background images often dictate the layout of the page. The result for the end user is a longer load time before anything can be seen on the page. This is different then regular images on your site – for example product images (thumbnails) which browsers don’t wait for and don’t affect the user experience as much.

The good thing about background images is that you can combine them and then position them using CSS sprites. So for example if you have 10 background images, you can combine them into one that is positioned in 10 different positions where you use them on the site. Now CSS sprite is an art in itself and it can get quite complex.

So, how do I change the logo?

You have 2 options – you can either use the image combining method for maximum performance, or simply use a separate image for the logo as you would normally do with Magento.

Ultimento logo admin options

Ultimento Admin - Logo Options

Uploading a separate image for the logo

First login to your admin and navigate to this page:

System > Configuration > Ultimento > Ultimento Logo Settings

and under “Choose your logo source” select “Admin config”.

Then upload your logo to your Magento installation using any FTP software and setup the path in your Magento admin:

System > Configuration > Design > Header > Logo Image Src

That’s it! Just make sure you are saving the logo image scroll configuration under the correct store view scope which you need to select under “Current Configuration Scope” on the upper left corner in your Magento admin (lowest scope level).

Using the image combining method

By default the “ultimento combined image” option will be selected in your Magento admin under:

System > Configuration > Ultimento > Ultimento Logo Settings

The image that contains the logo, as well as many other elements of the design, is located here:

skin/frontend/default/ultimento/images/website-design.png

Image combining the logo and other design elements

On this image, the logo is made of 2 elements:

  1. A symbol (a green cube in the demo)
  2. And an area for the site’s name (“ultimento demo” in this case)

The logo has been designed in this way in order to accommodate the vast majority of customers.

All you have to do is edit the included Photoshop file and replace the symbol with your own symbol, and the text area with your own site’s name! You are free to reuse any of the design elements included in Ultimento for your own logo – so if you like the cube go ahead and use it. Just replace the “u” with your own letter or number!

To save the image click on “save for web” and choose “png24″ as the file format and save the image somewhere on your computer (name it “website-design.png”).

Then use your favorite FTP program to upload the image on your server, overwriting the default Ultimento image with your new image.

The Photoshop file name is “website-design.psd” and is located in the source folder. It is clean and well organized to make it as easy as possible to manipulate – even if you don’t have Photoshop experience.

Your IE6 logo (image combining method)

Ultimento is compatible even with older browsers such as Internet Explorer 6 (IE6). Yep! As of in itself that’s pretty amazing! I don’t know of any other Magento premium theme out there that plays well with IE6. We went through a lot of trouble for that but we think it’s important because there are still many users worldwide who use IE6. And since we’re talking Ecommerce, we want to maximize our ROI and take these users into consideration as well.

IE6 is a special case and Ultimento uses a different combined image for IE6 that includes the logo (this image does not require any transparency which is not supported by IE6):

skin/frontend/default/ultimento/images/website-design-ie6.png

All you have to do is repeat the steps you took above using the included Photoshop file “website-design-ie6.psd” with the exception that you choose “gif” as file format when saving for the web.

That’s it!

If you have any questions regarding uploading your logo post it below!

Was this helpful? 1 Star2 Stars3 Stars4 Stars5 Stars

63 Comments


  1. Chris says:

    Hi,

    How can I change the Ultimento “U” logo or icon in the internet browser window.

    Thanks Chris……

    • Support says:

      Hey Chris,

      That image is known as a “favicon”. You can set the favicon to whatever you want by logging into your Magento Admin and going to System > Configuration > Design > HTML Head.

      Remember that the favicon has to be 16×16 and can only use 16 colors.

      Thanks!
      Support

  2. Douglas says:

    How can I change the logo that appears in Magento emails?

    Thanks,
    Doug

    • Support says:

      Hey Douglas,

      This is actually part of core Magento, it doesn’t really have anything to do with Ultimento and since you can set up so many different kinds of emails its not something we coded for.

      Magento actually has a nice tutorial for modifying the logo in emails that you should check out.

      Thanks,
      Support

  3. Thomas says:

    There is no “System > Configuration > Ultimento > Ultimento Logo Settings” on 1.6.2. Please update your guide.

  4. Mygreenpros says:

    I am lost and confused as hell. I do not see any file skin/frontend/default/ultimento/images/website-design-ie6.png that is “website-design-ie6.png” in this folder nor do I see “Ultimento Logo Setting” option anywhere.

    In fact, in Admin panel under system configuration, there is no folder for Ultimento at all as you suggest here System > Configuration > Ultimento > Ultimento Logo Settings. I have the latest version. can someone point me towards right path here?

  5. good point says:

    You can also buy cereal bars, which are perfect for people on the go. Dark chocolate has more flavonols than milk chocolate and forget white chocolate which is not a true chocolate.

12

Question? Comment? This is the place:

You can use these HTML tags: <a href="" title=""> <b> <cite> <code> <em> <strike> <strong>