Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #268480

    Kate N
    Participant

    I’d like to lowercase the photo captions in X Ethos stack, but I’m not sure if it something I can change with CSS or some php that needs to be changed for each page template. I’m not seeing any CSS for the theme that’s setting the font styling for the captions.

    Site has the latest WP: http://www.newmexiconewsport.com

    #268654

    Lely
    Moderator

    Hello Kate,

    To transform photo captions in to lower case, please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

    .h-entry-cover{
        text-transform: lowercase;
    }
    

    In case you want to capitalize first letter of the sentence, please add the following:

    .h-entry-cover:first-letter{
    text-transform: capitalize
    }

    Hope this helps.
    Thanks.

    #268742

    Kate N
    Participant

    Thank you. That does work for the featured photos. What would be the CSS for all of the photos (captions) that are added to posts through the media gallery?

    Thanks.

    #268795

    Friech
    Moderator

    Hi There,

    To make the image caption capitalize, add this under Custom > CSS in the Customizer.

    .wp-caption-text {text-transform: capitalize !important;}

    Cheers!

    #269005

    Kate N
    Participant

    Many thanks!

    #269033

    Paul R
    Moderator

    You’re welcome!

    #621957

    leannevenier
    Participant

    HI there, I have the same question about Photo cAptions like Kate did above. i’m using Ethos Stack with the latest version of WP.

    IN my case, I would like to have full control over all the letter cases in the captions. ie, your latest code makes every word in the caption capitalized but I would like to be able to control all the letters and make them fully case-sensitive

    In other words, I would like to make the caption exactly as I type it in the caption box for each photo.

    Example:
    “This is an EXAMPLE of how I would like my CAPTION to look. Sometimes I want to be able to CAPITALIZE the full word, and other times, I want to just capitalize the first letter of the word.”

    Here’s a page from my website with a photo and caption. You’ll see that the CAPITALIZED WORDS do override the formatting code, but every word is also capitalized (like it would be in a title).

    http://catalyticcolor.com/leanne-venier-8-steps-for-tapping-into-flow-state/

    So can you please tell me the code to use to make the Caption text look EXACTLY as I type it in the caption box for each photo that I manually add to a page?

    Maybe this? or something like this? (I think just replacing the word Captitalize with the proper CSS word might work:

    .wp-caption-text {text-transform: case-sensitive !important;}

    Since, as far as I know, there is nowhere that a photo caption will appear on my website unless I manually insert content into the caption box, I would like that caption box to override any hard coding that is added into the Ethos theme for the captions (which is set to capitalize every word in a caption).

    ALSO, can you tell me the code that I can add where I can manually change the font size of the Captions (they’re pretty tiny, so I’d like to be able to control the caption size, both sitewide (via the Custom-CSS-Customizer box) as well as on individual pages and photos via the Advanced Controls option on each page (which I’m guessing might be the same CSS code, but I only input it on certain pages or photos if I only want to affect that particular photo?)

    Hopefully this is clear! 🙂

    Thanks for your help and the fabulous support!!

    #622004

    Nico
    Moderator

    Hi There,

    You could try adding this code in your customizer’s custom CSS to make your photo case sensitive:

    .wp-caption-text {text-transform: case-sensitive !important;}

    To change the photo caption font size.

    On a specific page you could add the page class.

    for example, the page you shared above,

    .page-id-1266 .wp-caption-text {
    font-size:12px !important;
    }

    if you wantn to make it global font size, just remove the page class.

    To locate post or page id, check this link: https://community.theme.co/kb/how-to-locate-post-ids/

    Hope it helps.

    Thanks.