Customizing the appearance of your icons or thumbnails

Top  Previous  Next

The size and appearance of your icon or thumbnail images are defined by CSS just as the rest of your search results page appearance.

See "How do I customize the look of my search page?" for more information on how to apply CSS changes.

The CSS classes that largely control the appearance of your images is the "result_image" class.

The following are some examples of common changes that you may want to apply.

Changing the dimensions of your images

You can change the width/height of your images to be displayed by changing the "img" subclass of your "result_image" CSS definition. The following example would set your image sizes to a fixed width of 100 pixels (whilst keeping the aspect ratio by letting the browser automatically determine the height):

.result_image img { margin: 10px; width: 100px; border: 0px; }

 

The following would set your images to a fixed size of 100x100 pixels (which may affect aspect ratio):

.result_image img { margin: 10px; width: 100px; height: 100px; border: 0px; }

lightbulb

Tip: If you wish to use the original dimensions of your images or thumbnails, you can simply omit the width and height attributes in the above CSS classes.

Changing the position of your images

You can change the position or location of your images relative to your search results. By default, they are positioned to the left of your links, but you could just as easily switch them over to the right.

.result_image { align: right; }

.result_image img { margin: 10px; width: 100px; border: 0px; float: right; }

 

There are many other possibilities with some clever CSS changes, so be sure to experiment!