CSS Image Replacement

Follow the steps below to change your community logo. This technique creates a a visible window based on the dimensions of our image. 

Requirements

Dimensions of your image (height & width)

How it works

The technique defines a display area and inserts a background image while hiding the display text. By hiding the text instead of removing it you get the advantage of displaying and image without affecting SEO.

Intsructions

1. Upload your logo image to your community image gallery
2. Get the "Image Path" Copy the image download link (i.e. Firefox - right click > Copy Link Location)
3. Copy (ctrl-c) and paste (ctrl-v) the CSS code into the bottom of your community Advanced Theme Editor.
4. Example Path: http://www.igloosoftware.com/download/gallery/img/theme/logopng?attachment=1
5. Paste the Image Path into the CSS code and replace "image_path_here" "
6. Set the image height by updating the property padding-top
7. Set the image width
8. Click Publish

Copy the CSS Snippet below

#logo{ margin: 10px; }

#logo a {
   background: url(image_path_here) no-repeat;
   display: block;          
   height: 0 !important; /* Do NOT change the height - use padding-top as your height */          
   overflow: hidden;          
   padding-top: 20px; /* This is the height of your image */         
   width:100px;  
}