Caption formatting

Travel Forums System Talk Caption formatting

1. Posted by loscaracoles (Budding Member 6 posts) 1w Star this if you like it!

Hi all. Some CSS help needed, please!

I'm currently using the postcard template for my blog (very nice, thanks Cameron whoever you are 👍)

I'd love to customise the template to further differentiate image captions from body text. I tried adding a `.caption` object definition yanked from the default template but when I saved and viewed my blog it didn't appear to change the style.

Could anyone provide a hint on how to format captions this way? Ideally they would just be italicised and slightly lighter colour than the body text.

2. Posted by Sander (Moderator 5850 posts) 6d Star this if you like it!

.caption should be the correct selector to match the caption. It might be that you made a mistake with the individual properties?

Try adding this, added at the bottom of the large textarea for changing the template (mostly so you can easily refind your own additions, if you extend them beyond this).

.caption {
font-style: italic;
color: #555;
padding-bottom: 1em;
}

(That final padding-bottom so there's some extra whitespace underneath the caption, which is particularly nice if you have another photo straight after.)

[ Edit: Edited on 23 Nov 2022, 10:47 GMT by Sander ]

3. Posted by loscaracoles (Budding Member 6 posts) 6d Star this if you like it!

Quoting Sander

.caption should be the correct selector to match the caption. It might be that you made a mistake with the individual properties?

Try adding this, added at the bottom of the large textarea for changing the template (mostly so you can easily refind your own additions, if you extend them beyond this).

.caption {
font-style: italic;
color: #555;
padding-bottom: 1em;
}

(That final padding-bottom so there's some extra whitespace underneath the caption, which is particularly nice if you have another photo straight after.)

Cool, that does the trick, thanks. Unfortunately it breaks the nav bar in mobile. Don't suppose you can shed any light on that?

The blog is here

4. Posted by Sander (Moderator 5850 posts) 5d Star this if you like it!

If you mean the sidebar that shows on the right at desktop size: that shows at the very bottom of the blog on small screens. (These blog templates were all created before mobile browsers were a thing; that the postcard template handles it at all in a somewhat graceful manner happens due to someone else asking about it here in the forum, and Peter then making my suggested fix "official".)

If you mean the text in the red bar at the top - that's indeed longer than what will fit comfortably. You could improve it with the following:

@media only screen and (min-width: 600.1px) and (max-width: 750px) {
#header #title { font-size: 1.3em; }
}
@media only screen and (max-width: 510px) {
#header #title { padding-top: 5px; }
p#description { font-size: 0.9em; }
}

FWIW, neither of those issues should be affected by the change to the caption. If you're seeing something else where the caption is causing issues, please upload a screenshot or describe what exactly is going wrong more precisely?

Post 5 was removed by a moderator
6. Posted by loscaracoles (Budding Member 6 posts) 3d Star this if you like it!

Thanks Sander, it's both of the elements you describe: nav bar moving right down to the bottom of the page and the header bar looking a bit broken. Weirdly, both of these things look fine (chrome / brave on android) when I omit the caption object. I can live with the odd formatting though, not a big deal. Thanks for your help.