I wanted to edit the layout of my images such that content images have a border and non-content images (i.e. ye wee little pdf file symbol for starters) would stay the same (no border). See below snippet of code from my style.css file in bartik_sch sub theme. Note: I also have a views random image generator on the front page and I want those images to be also with the same border format.
in the bartik styles.css file define the img particular to ".field-type-image img" for images that are a content type. The way to find the exact div class reference is to use firefox's firebug. Simply 'inspect' the page element that you're interested in. In the example below, I wanted to find the reference to the random image generator image. You generally have to scroll up until you find the appropriate 'div' tag.
This technique can also be used to personalize the menu elements, logo, etc. Incidentally, before starting I copied the bartik file to bartik_sch as a working subtheme. If doing this, make sure that all of your *.info files have reference to the correct files.
.field-type-image img,
.user-picture img, .view-random-image img {
margin: 0 0 1em;
background-color: #E3D8B7;
border: 1px solid #C8BEA1;
margin-let: 12px;
padding: 7px;
}
