how to simply repeat formatting of images

[gabsam]

I am having to place a large number of images in my topics and give them all the same color, 1 point border and centered; is there a way to simplify this, so I don’t have to format each one individually? Can I copy attributes from one image to another?
I’m hoping there is an easier way to do this – does anyone have an answer?

[LTinker68]

I do this with a paragraph class and a complex selector. So in my stylesheet, I have...

Code: Select all

p.screenshot {
   text-align:center;
}

p.screenshot img {
   border:1px solid #000000;
}

The first style sets the contents of the paragraph (in this case, the image) to be centered. The second style is a complex selector that says when an image is inside a <p class="screenshot"> block that the image should have a 1px solid black border. So in the topic, all I do is add a new paragraph, set its class to "screenshot", and insert an image, and everything else is taken care of. If down the road someone says they want a different color border for all screenshots or want no border, then you just change the appropriate style in the stylesheet and the change will filter down to all topics.

I also have a p.captionFig style that I use after the screenshot and it has an auto-number format that adds "Figure n" before the caption in print outputs, where n is an auto-generated number. That auto-number format is applied to the style in the print medium; in online outputs, the style in the default medium doesn't have the auto-number format, as I don't want captions numbered in my online outputs. Following the same principle, if you want to have screenshots sized to a smaller size in print outputs to save space, then you could add a max-width or max-height attribute to the p.screenshot img complex selector in the print medium. For instance, I have a max-width of 5 inches for print output so my screenshots aren't too big.

[gabsam]

Thanks, Lisa. That is much quicker!