Can I make the caption font smaller?

hotkey · Member · Apr 24, 2017 at 2:28 pm
Copy link

Add topic to favorites
I need to keep the font small enough to keep the caption on a single row and not word wrap to 2nd row. But I don’t see how I can do it?

Page is https://wordpress.com/page/test1968site.wordpress.com/20

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Apr 25, 2017 at 12:20 pm
Copy link
Hello @hotkey,
The link: https://wordpress.com/page/test1968site.wordpress.com/20, you provided is not same for all of us. It will be only visible to you, as you are the administrator of the account. Please provide a published post/page link(that is publicly same) so that we can help you better.

Also, please note that the caption may look different when the page/post is published, to preview how it will look you can click the Preview link with an eye icon.

Thanks! 🙂
hotkey · Member · Apr 26, 2017 at 5:11 pm
Copy link
Thx for feedback. I think its viewable now!

Classmates Ada – Boe

Also, I’m hoping I can change the site theme font color to yellow as well?
otpidusprime · Member · Apr 26, 2017 at 5:25 pm
Copy link
Hello again @hotkey,
You can do the tasks you mentioned by customizing the CSS codes.

To customize the CSS codes you will need to have a paid WordPress.COM Premium or a Business upgrade active on your account.

Read more about editing CSS here:
https://en.support.wordpress.com/custom-design/editing-css/

If you already have any one of the above mentioned upgrade on your account, then use the following CSS codes:

I need to keep the font small enough to keep the caption on a single row and not word wrap to 2nd row. But I don’t see how I can do it?

There are 3 things you can do to solve this:
1. You can force the text to not wrap on the second line and use the ellipsis “•••” for the overflowing text, like this:
```
.wp-caption-text {
    white-space: nowrap;
    width: 100px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
2. You use font-size to reduce the fonts so that they are on the same line:
```
.wp-caption-text {
    font-size: 16px;  /*reduce more if you like*/
}
```
3. Combine options 1 and 2:
```
.wp-caption-text {
    white-space: nowrap;
    font-size: 16px;  /*reduce more if you like*/
    width: 100px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
Also, I’m hoping I can change the site theme font color to yellow as well?

Use this CSS to change the site theme fonts to yellow:
```
a, a:visited, .comment-metadata .comment-edit-link, .comment-metadata .comment-edit-link:visited {
    color: #f1bd24;
}
```
Hope this helps 🙂
otpidusprime · Member · Apr 26, 2017 at 5:30 pm
Copy link
Also, I’m hoping I can change the site theme font color to yellow as well?

You can also change the theme font colors by going to
My Site(s) → Customize(Beside the Themes option) or just click here: https://wordpress.com/customize/. This will open the site Customizer. On the sidebar of the Customizer click on Colors & Backgrounds tab. Select the color you like and click Save & Publish.

But it will change other theme colors too. If you just want to change the font color you have to use CSS I gave above.
rockislandclassof1968 · Member · Apr 26, 2017 at 5:39 pm
Copy link
Thx for such fast help! I have only purchased the Personal plan to start with. Perhaps I’ll get the site “done” and then see if these issues make a big difference. If so. I’ll upgrade – its really not that much more!
rockislandclassof1968 · Member · Apr 27, 2017 at 7:54 pm
Copy link
Well – the site is all done except the arduous task up adding some 600 photos. This is where I need the CSS help. So, I’m thinking I’ll upgrade to Premium tomorrow and get going.

I think I like adding both options to shrink and lock.

I am starting to review the CSS Editor FAQ but I know my 1st qwik question will be “Where do I paste the code you displayed above?”.
otpidusprime · Member · Apr 28, 2017 at 8:04 am
Copy link
@rockislandclassof1968
Read this support guide:
https://en.support.wordpress.com/custom-design/editing-css/

No items found.