Skip Navigation

Photo captions

Travel Forums System Talk Photo captions

1. Posted by pjmoor (Budding Member 2 posts) 3y


I'm having trouble with captions for photo's and am a newbie to travellerspoint and CSS. I am using the Travellers Point Airport theme template by
J Hicks.

On a recent thread at:

Peter said:

I suggest adding this rule to your blog's styles:
.caption {font-style:italic;padding-top:0;margin-bottom:20px;text-align:center;color:#666;}

I'm struggling to get this to work. Does this mean edit the template stylesheet (if so, where?) and if so, how do you use the .caption feature in your blog? Or does it mean type this directly into your blog around the image language (ie photo).

Can someone please give me an example of what the code would be in the blog entry so as to put captions under the photo. How does this appear in the blog CSS language?

I hope what I am asking makes sense! I am learning as I go!

thanks in advance for any advice.

2. Posted by Sander (Moderator 4938 posts) 3y

Quoting pjmoor

I'm struggling to get this to work. Does this mean edit the template stylesheet (if so, where?)

That is exactly what it means. When you have a blog, go to control panel (small link at the very top of the page) -> my blogs (dropdown menu for the control panel), click on the "manage", "settings" or "new entry" link to the right of the name of your blog to get to the management area for that specific blog, and then in the top right of that page, there's a series of "tabs". One of them will be "template". Click on that, and you're on a page where you can select the template for your blog (so the airport theme). There's a small link at the bottom of "Your Current Selection" which says "Customise this template". That'll show you your blog's stylesheet in a big textarea, and that's where you add the CSS rule Peter suggested.

if so, how do you use the .caption feature in your blog?

When you're writing a blog entry, you can insert a photo by clicking on the little "Picture" icon above the big textarea. That opens a new window from which you can insert one of your photos. Next to each size (Thumbnail, Regular, Large) there's a tiny icon. If you click on that icon, rather than on the text, it'll insert not just the photo, but also its title as a caption. (Hovering the icon shows "Include photo title as caption by clicking on this icon", which is not very discoverable.) You can also use this caption feature manually (or change the text) by including a capture attribute.

So where a regular photo would use this code:
[img= thumb=]
with caption it'd change to:
[img= thumb= caption=My caption for this photo]

3. Posted by pjmoor (Budding Member 2 posts) 3y

Thanks Sander for your quick reply.

Finding the style sheet no problem, but my question should have been 'Where abouts' on the stylesheet should I paste peter's code?

I have copied and pasted this code from Peter's suggestion

.caption {font-style:italic;padding-top:0;margin-bottom:20px;text-align:center;color:#666;}

I placed it under /* Entries */ but while I get the caption appearing, aligned left, it does not turn it into italics, give more padding below it, less padding above it, center it and change the colour slightly as appeared in the blog as discussed

I'll reset the template and await your instructions.
CSS is a brave new world for me but I'm committed to customising.

Many thanks. Onward!

4. Posted by Sander (Moderator 4938 posts) 3y

It would be helpful here if you could tell me what your blog is, so I can take a direct look (I'm assuming you have it set to private, as it's not appearing in your profile? Feel free to PM me).
My best guess is that half of those rules are being overwritten by later CSS rules, and/or rules with higher "specificity".

Try changing the line to this:
.entry p.caption { font-style: italic; margin-top: -0.6em; text-align: center; color: #666; }

That gives it higher specificity, so it overrules those other rules, and tweaks it slightly specifically for the Airport template (each template is built up in a slightly different way, and so what's necessary to include in the one isn't in the other).

If that doesn't change anything that you can see, move it to the very bottom of the file. If that doesn't change anything that you can see, move it to the very top. It there's still no change, please keep it there and indeed send me the URL of your blog so I can have a look.

5. Posted by Peter (Admin 5926 posts) 3y

I always like to stick any custom styles right at the bottom of the stylesheet under a comment like

/* My Custom Styles */

or something like that.

By putting the custom styles at the bottom, it will (generally) be overriding what's above (depends a little on how the rule is written)

Looking at your test entry it looks like you got this rule basically working as expected. But let us know if you want it to look different to that.

6. Posted by Peter (Admin 5926 posts) 3y

And an interesting problem you hit there with the centering of headings.

If you want all your headings to be centered, this is usually better achieved through CSS too. This rule would do that.

.entry h2,.entry h3 {text-align:center;}

It basically says for heading levels 2 and 3 inside of entries (so not the navigation) make the alignment centered. This excludes heading level 1 which is the title of the post. You can also include that by making the rule

.entry h1, .entry h2,.entry h3 {text-align:center;}

This would be the best way to do it so that you don't have to do it for every entry you write, but you did also hit a bit of a bug using that centering code - that should have worked as well.

7. Posted by zuraidaharahman (Full Member 2 posts) 3y

I am a slow learner about blogging. Can you tell me how I could delete photos which I have double inserted in my blog? Why can't I just put delete at the photo I want to get rid of?

8. Posted by Sander (Moderator 4938 posts) 3y

Each inserted photo is represented by a bit of code, looking like this:


or like this:
[img= thumb= caption=Your description of this photo]

That code appears in the text, at the place where the photo shows. By deleting that bit of code from the text of your blog entry, you delete the photo from the blog entry.

Removing a double-inserted photo from the window from where you inserted it would be hard, as the window has no way of knowing which of the two occurrences would have to be removed.