To replace a default ViArt Shop logo with your own do the following:

• 1. Upload the image with your company logo in the 'images' folder.
  Note: it is recommended to use either a .png or a .gif extensions. With these file types, the white area around the logo picture is made transparent.
• 2. Navigate to Administration > System > Global Settings > Logo Settings section. There you will see two fields:



• 3. Click on 'Select Image' and select the image with your logo from the 'images' folder.




Alternatively, you can click on 'Upload image' to browse any folder on your computer and upload the logo image from the relevant folder.

Note: if the logo has some text on the image and you would like to translate it (i.e. use a different image) when a different language is selected then you can specify path to the logo like using language tags, for example:


[en]images/logo.png[/en][es]images/logo_es.png[/es][nl]images/logo_nl.png[/nl]

• 4. Enter some text to the 'Image Logo Alt' field if you want to display an alternative text when mouseover a logo, like:
  
  
  

  Also this text will appear if a customer has set not to show images in the browser.

How to center a logo

To center the logo on your website, you need to edit your active design css file looking for .HeaderLogo style. For some designs it is enough to specify text-align: center; for example, in Silver design:

.HeaderLogo {text-align: center; background: #000000 url(../images/silver/top.jpg) no-repeat top right;}

And in some designs you will need to edit the menu position as well, for example this how you can center logo in Fashion design:

.Header {margin: auto auto 15px auto; position: relative; z-index: 100;}
.HeaderLogo {text-align: center;}
.HeaderLogo img {border: none; margin: 25px;}
.HeaderMenu {margin: 0 auto; padding: 0;}
.TopMenu {display: block; height: 47px; margin: 0px; overflow: hidden; padding: 0; z-index: 20; width: 825px;}

How to change Logo size

To change the logo size, you can edit default.css (or whatever design stylesheet you use) searching for .HeaderLogo img and changing its parameters.

For more information about version 4+ settings, including some tips how to edit CSS please refer to http://www.viart.com/design_tips.html