Announcement

Collapse
No announcement yet.

Change font of an image caption

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    Leave a comment:


  • karlm
    replied
    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

    Leave a comment:


  • Wayne Luke
    commented on 's reply
    That is correct.

  • karlm
    commented on 's reply
    Thanks! And presumably, the CSS would be added to 'additional'?

  • Wayne Luke
    replied
    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;}

    Leave a comment:


  • karlm
    replied
    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.

    Click image for larger version

Name:	nogaps.png
Views:	6
Size:	76.6 KB
ID:	4390955

    Leave a comment:


  • Wayne Luke
    replied
    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

    Leave a comment:


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

    Leave a comment:


  • Wayne Luke
    replied
    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.

    Leave a comment:


  • karlm
    started a topic Change font of an image caption

    Change font of an image caption

    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
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X