Customising fonts and spacing between lines

  • journeyingthroughthebible · Member ·

    Hi

    I would like to customise my credit line and caption beneath my images. I use the Twenty-Ten theme.

    Ideally I would like the credit to be in small type immediately under the image, right justified, and with very narrow line space between the image and the credit line. This means the credit is unobtrusive, but legible. I use this format in other documents and it works well.

    Under the credit I would like to place the caption, in larger font, with very narrow line space between it and the credit line above.

    Thus I’d like to (a) set a custom font and also (b) have narrow space between the image and the credit underneath, and between the credit and the caption. I have tried customising the caption with CSS, but am having problems with this.

    As an alternative, I could place the credit line and caption within the actual text of the post/page.

    For example, I can set the font successfully with the following code (as an example – this sets to Segoe UI in a small but readable size suitable for a credit line: <p style=”font-family: Segoe UI; font-size: 9px; font-weight: bold;”>Credited to John Smith at [weblink]</p>

    But when I do so, a wide linespace seems always to be placed above and below this credit line. How do I set the font as above AND also have narrow space between the image and the credit line and between the credit line and the caption?

    Any help would be very much appreciated. Rob

    The blog I need help with is: (visible only to logged in users)

  • journeyingthroughthebible · Member ·

    Hi
    I have now, with some help, discovered how to do this. To (1) delete the default grey image margin, (2) set the caption font to (here as example) Segoe UI 10px, (3) align the caption to the right (it is a credit, and this makes it less obtrusive), (4) get the caption tighter to the image (i.e. less space between image and caption), set the Custom CSS as follows:

    .wp-caption {
    background: none;
    padding: 0;
    }

    .wp-caption img {
    margin: 0;
    }

    .entry-content .wp-caption p.wp-caption-text {
    font-family: Segoe UI;
    font-size: 10px;
    background: #ffffff;
    text-align: right;
    outline: 0;
    margin: -4px;
    }

    Then to move the first paragraph under the image tight up against the credit, do the following (you can adjust the number of pixels, of course – and you can add other parameters for this text, such as colour, alignment, font, etc.):

    <p style=”margin-top:-30px;”>[Your text]</p>

    This become the actual caption of the image. In this way, I have a small credit tucked away and aligned to the right under the image, followed by a caption in a larger font directly underneath the caption – just as I would for an image in a PDF document.

  • timethief · Member ·

    Hello there,
    Please use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can copy and paste your text into a thread that will appear in the CSS Forum where you will get the help you need.

  • The topic ‘Customising fonts and spacing between lines’ is closed to new replies.