Announcement

Collapse
No announcement yet.

Change font of an image caption

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

  • 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
    VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
    No Addons - none at all.

  • #2
    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.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Thanks Wayne... Could you advise on whereabouts I seek out the <figcaption> to be able to edit it?
      VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
      No Addons - none at all.

      Comment


      • #4
        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
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          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
          VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
          No Addons - none at all.

          Comment


          • #6
            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;}
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • karlm
              karlm commented
              Editing a comment
              Thanks! And presumably, the CSS would be added to 'additional'?

            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              That is correct.

          • #7
            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
            VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
            No Addons - none at all.

            Comment


            • #8
              Also, can I change the font used for 'edited by xxx' - it could do with being a smaller text - TIA
              VB 5.4.1 - PHP 7..2.4 - MySQL 5.5.56
              No Addons - none at all.

              Comment

              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
              Working...
              X