YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageCropper Control (beta): Skinning the ImageCropper

# ImageCropper Control (beta): Skinning the ImageCropper

ImageCropper skinning is done via CSS. The ImageCropper comes with a default skin, but you can extend or override this as needed.

## Resize Utility's core CSS file

The ImageCropper's base class is a starting point for skinning the ImageCropper Control. Include this file and use the skin file as a reference for your new skin (you can view the full contents of the base class here).

## Sam's skin CSS file

Once you have the base class in place, you can proceed to customize the look and feel of your Resize Utility by working with the skinnning file. Starting with the Sam Skin version below is generally the fastest approach, allowing you to customize just those parts of the skin that will make your implementation resonate with the overall design of your application.

.yui-skin-sam .yui-crop .yui-crop-mask { background-color: #000; opacity: .5; filter: alpha(opacity=50); } .yui-skin-sam .yui-crop .yui-resize { border: 1px dashed #fff; }

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### ImageCropper Control (beta) Examples:

- Simple Crop Interface
- Advanced Crop Interface
- Real Time Crop Feedback
- Connection Manager assisted image crop
- Skinning the ImageCropper

### More ImageCropper Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings