Change font of an image caption

[karlm]

Morning all!

Is it possible (I'm sure it is...) to change the font used for the caption of an image? Currently, it's the same size, style & format of the surrounding text and it could easily be misinterpreted as text of the main paragraph. In addition, when you're trying to credit an individuals' copyrighted work with a link, it runs over as there's no soft (nor hard) break so all text is on one long line.

I'd like to be able to format the caption text to a smaller size, in italics.

Cheers

[Wayne Luke]

The caption is wrapped in the <figcaption> tag so you could target that tag with CSS to change its look. If you use the <figcaption> tag elsewhere, you can make it more specific by targeting "figure.image figcaption" in your CSS.

[karlm]

Thanks Wayne... Could you advise on whereabouts I seek out the <figcaption> to be able to edit it?

[Wayne Luke]

You would create CSS in the css_addiitonal.css template to control the look and feel of this HTML tag.

figcaption {CSS STUFF HERE....}

You can learn about CSS here: https://www.w3schools.com/css/css_intro.asp

[karlm]

Thanks for the direction and the link - the link did help me better understand what I was doing (css has always evaded me in the past). However, I wondered, could you advise - at least roughly - on how I might be able to add a space to images used in "details". Currently, I simply use <img="xyz.jpg" align="left"> or similar followed by text, but it affords no room to the side... as per the example below.

[Wayne Luke]

You can assign padding to images with CSS.

img {padding: 4px;} would add 4 pixels of padding all around the image. You can used padding-right to add it the right side of the image.

The align attribute in HTML is deprecated and browsers do not have to honor it. To more images to the left you would have more success across browsers using:
<img src="xyz" style="float:left">

You could even simplify this by using a CSS class. So you could say:

<img src="xyz" class="details">

Then in your CSS you can have:
.details {float:left;padding:4px;}

[karlm]

Thanks! And presumably, the CSS would be added to 'additional'?

[Wayne Luke]

That is correct.

[karlm]

Thanks Wayne, with that help - I've created a new series of images and managed to improve upon them a tad with CSS. Nice job, thanks for your help

[karlm]

Also, can I change the font used for 'edited by xxx' - it could do with being a smaller text - TIA