Docs

[alanjonesonline]

Hi Joao

I quite like the boarder. I’m not looking to remove it. I’m trying to find out if it is possible to for my blog feature images to appear as their actual sizes. I don’t them all to be same width. I am also trying to understand why the meta does not appear even though the Customise>Blog>Content>Post Meta is checked on.

Cheers

[Rue Nel]

Hello There,

Thanks for updating in! To display the actual image sizes in your featured image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .entry-thumb {
    width: auto;
    text-align: center;
}

.site .entry-thumb img {
    min-width: 10%;
    margin: 0 auto;
}

It took me several moments to investigate your site why the post meta doesn’t show up. It turns out that you have added a custom css in your child theme’s style.css file

.p-meta span {
    font-size: 0;
}

http://prntscr.com/dsiyfw

Please change the font size and even add some color so that the post meta will be visible to the naked eye.

Hope this helps.

[alanjonesonline]

Hi There,

Thank you! Yes the featured image now displays at 100%. However, the image’s boarder now goes to the width of the screen. Any chance I can get that to come back to the image? Also, is it possible for a featured image to display it’s caption?

How do I access the “child theme’s style.css file” so I can change meta font size and colour?

Your help is much appreciated.

Cheers

[alanjonesonline]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Upon viewing your site, I am seeing this: http://prntscr.com/dt94pn
It seems that the featured image and its border were already correct.

To display the caption for your featured image, please check out this threads: https://community.theme.co/forums/topic/image-caption-below-featured-image/#post-1090494

To edit the child theme’s style.css, please go to Appearance > Editor.

Hope this helps.

[alanjonesonline]

Hi Rue

Thanks for getting back. I have now added the following css to make the featured image appear 100%. You’ll be able to see now the border issue.

.site .entry-thumb {
width: auto;
text-align: center;
}

.site .entry-thumb img {
min-width: 10%;
margin: 0 auto;
}

Regarding the blog meta displaying, is it possible for you to please send me a screen shot of what the child theme’s default style.css is supposed to look like? When I deleted this code (see below) as suggested, nothing happened and I don’t know how to change the font size and colour back to default.

.p-meta span {
font-size: 0;
}

Thanks again for your help. Much appreciated.

[Christopher]

Hi there,

I removed the code, cleared cache on my browser and now date is displaying fine. Please clear cache to see the changes.

Thanks.

[alanjonesonline]

HI Christopher

Brilliant! Thank you. Any chance I can get the text centred so it appears like the Icon stack demo?

Much appreciated.

Cheers

[Christopher]

Hi there,

Please add this under child theme’s style.css file :

p.p-meta {
    text-align: center;
    display: block;
}

Hope it helps.

[alanjonesonline]

Hi there

This little piece of code to centre the meta worked great. Thank you!

If you look back in this conversation to 8th Jan, Rue Nel sent me a link which explained how to make a blog’s featured image caption appear. That was great and has worked well, thank you. Is it possible to make this caption appear in uppercase so it is the same as captions in other images. In this link you can see what I mean regarding caption being uppercase and lowercase:

http://www.alanjonesonline.com/australian-dada/

Also I need for the featured image boarder to come in and fit around the image. Is this possible? At the moment the boarder stretched the full width of the screen.

Thanks again for all your help. Much appreciated.

Cheers

[Lely]

Hello There,

To transform the image caption into uppercase, please use the following custom CSS:

.single-post .img-caption {
    text-transform: uppercase;
}

For the border, please use this:

.single-post .entry-featured {
    text-align: center;
    border: none;
}
.single-post .entry-thumb {
    border: 1px solid rgba(0,0,0,0.075);
    padding: 7px;
    background-color: #fff;
    display: inline-block;
}

Hope this helps.

[alanjonesonline]

Hi Lely

Thank you so much. That’s great!!

Is it possible to change the feature image caption’s font size? It would be great if it was the same size as the other image’s caption font size. Here is a link to show you what I mean.

http://www.alanjonesonline.com/australian-dada/

Thanks again for all your help. Much appreciated.

Cheers

[Rue Nel]

Hello There,

Thanks for updating in! To change the featured image caption’s font size, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-post .img-caption {
    text-transform: uppercase;
}

We would loved to know if this has work for you. Thank you.

[alanjonesonline]

Hi there

Just want to double check this is the code to change font size?

Cheers

[Rahul]

Yes. You can use this code to change the font size of the image caption.

Please give it a try and let us know if this helps.

Thanks for understanding.

[Author]

Posts