Hi, I just installed a new theme for my website that looks perfect! Unfortunately, the featured images appear twice in my website: Once in my slideshow (My theme supports slideshows) and the other one inside my posts. I like how it is inside, but it is causing problems to the text, and so I want to re-align the featured images inside my post to the right using CSS. I was forced to make a child theme to fix that problem and I tried everything, but it still appears on the left causing problems with the text. Does anybody know or can anybody help me to resolve my problem? Thank you.

Featured image in slideshow:

Featured image in category / post:

By the way, the CSS code / name for the featured images inside my posts is different than the other images. Instead, it is: img.alignleft.featured_image.wp-post-image . I believe that will be helpful.

Note: The slideshow is not a plugin, it is a special feature of the theme.

Join the Discussion
Write something…
Recent messages
alexisnilo Premium
Thanks for sharing this info. It is very useful,
Reply
hantaah Premium
removing the featured image will also remove it from the blog page thumbnail which is a no no blog posts look much better with an omage aside it.

So your theme will either have an option to switch the featured image off in posts usually in appearance>theme options or you can add a little bit of code for it not to be included in the post

Try the first option. If not let me know your url and I will tell you what code to add where.
Reply
MichelleWA Premium
Hi, sorry for the late response. My theme has special settings, but unfortunately image settings is not one of them. What I was trying to do most of the time to fix it was to use a child theme and add code, hopefully fixing it. So far nothing worked.
Reply
hantaah Premium
hmm

In some themes I have used it has the setting in post settings under appearance>theme options>layout settings or post settings> turn off post page thumbnail? something like that

Also check to see if you have a custom css section under appearance>customize or appearance>theme options

If you want you can send me your url and I'll send you the code for it
Reply
MichelleWA Premium
My theme has layout settings, but there is no such thing as image / thumbnail options. However, in the "Integration" settings, there is an option for Custom CSS. I think we are getting close... Anyways, when available, send me that code, cause I do not know what I should put in that field.
Reply
hantaah Premium
yep that's it. You got a custom css, cool.

by the way it won't be a section for images or thumbnails it will be a section for layout or post settings?

I need your link so I can look to see what the code for your images are
Reply
hantaah Premium
ahh don't worry I got your link from your profile

try adding this to your custom css section

.alignleft.featured_image.wp-post-image { display: none; }

You may also need to add this to give the text to the right of the image some padding:

img.alignleft { margin-right: 20px; }
Reply
MichelleWA Premium
So, should I add this in the Custom CSS section?

.alignleft.featured_image.wp-post-image { display: none; }
img.alignleft { margin-right: 20px; }

Or do I have to do/add something else too?
Reply
hantaah Premium
yep

Just copy and paste that into the custom css section

That should do it

Let me know how you get on
Reply
MichelleWA Premium
Just added this code and it worked! Thanks a million, I am relieved that this problem is solved. Bless you!
Reply
hantaah Premium
No worries but i would suggest one improvement.

Go to you html editor and place this between the rating and title and price section and the following paragraph

<div style="clear:both;"></div>

That will push the paragraph below the image. At the moment it is wrapping round the bottom of the image. It would just look neater if it were cleared from it
Reply
MichelleWA Premium
I am not quite sure what you mean
Reply
hantaah Premium
actually forget that just put this in the custom css section and tell me what you think

articles .post-body {
font-size: 16px;
line-height: 22px;
}
Reply
hantaah Premium
it will mke the paragraph clear of your image and the text looks better bigger in my opinion what do you think?

http://wordpresstutorialsbeginners.siterubix.com/wp-content/uploads/2014/07/styles.png
Reply
MichelleWA Premium
Oh, I see. I agree, it looks better that way. Thanks!
Reply
hantaah Premium
your welcome. I have found that knowing a little basic css and html helps the design a lot. Little touches make a big difference. If you ever get a chance try and learn just the basics. You can always have a look on w3 schools website for basic tricks or if you come across an issue and you need a quick fix
Reply
MichelleWA Premium
I tried to add it but nothing happens? I added that code you just sent me in the custom css section underneath the other code, but nothing happened and it stayed the same.
Reply
hantaah Premium
try this instead of it

articles .post-body { font-size: 16px !important; line-height: 22px !important; }
Reply
MichelleWA Premium
Unfortunately this does not work either.
Reply
hantaah Premium
strange, it's working on mine.

can you send me a screenshot of your custom css entry? add the image to your media and send me the link

If I don't answer back now it means I've gone offline and will be bk in the morn
Reply
hantaah Premium
That's weird

try this then

.articles p {
font-size: 16px;
}
Reply
MichelleWA Premium
That did the trick, thanks alot! By the way, may I ask, where did you learn all these little tricks? Just curious.
Reply
hantaah Premium
yea looks much better like that.

Now you have 3 no break spaces there:

<p> </p>
<p>  </p>
<p>  </p>

It's giving a little extra space, would look better if you removed them but it's up to you

I's been a long road for me, I've been learning web design for a few years. I'm self taught so learning html and css has been a lot of trial and error but I started learning it just by editing themes and it went from there
Reply
MichelleWA Premium
Very interesting story hantaah, you certainly seem to have gained experience from this. May I ask you, talking about my website, if you have time, do you think I need to change anything else at the moment? Also, how do I delete that extra space you are talking about? I would really appreciate any kind of comment you have.
Reply
hantaah Premium
Your sites looking pretty good!

Your home page needs some good copy. With a big title that answers the visitors questions which is:

" what's in it for me? "

you need to tell them what they will get, why your unique and why it's worth their while to stay on the site.

Address those 3 question whilst concentrating on what brought them there in the first place and you will capture them, if you don't do that within 7 seconds of them visiting they will go.

You see there are plenty of sites out there, you gotta tell them why yours is different and what benefits your site brings to them. You can't make them look as they won't you have to smack them in the face with this info.

Never use welcome as you've lost valuable time and space.

Start with:

Formula = End Result Customer Wants + Specific Period Of Time + Address The Objections


So a title like - Know the best games to get, when and where to get them, without having to spend your money

( just a quick example )

and offer them something for free like a free ebook or something of interest if they sign up or purchase something

with regards to the 3 <p></p> it is showing in the code within the normal html ( html editor of all the posts ) between all the rating info and the paragraphs html however it is happening for all the posts. So I'm not sure if you need to delete it for each and every post or if there is a separate section for the ratings info? Is there? If so look at the end of that and that is where the extra empty paragraphs are being added.

Hope that helps
Reply
MichelleWA Premium
Ok hantaah, I agree. I can't get my title bigger than it is now, but I am going to add more content in the homepage to try to persuade them that they've come to the right place. I will change the welcome aswell, I will talk to you later, and thanks again hantaah.
Reply
hantaah Premium
Your welcome, happy to help. Looks like you sorted the extra space after

Well done
Reply
Fred Chong Premium
If you don't want that "Featured Image" to appear in your Post, you can remove it by following these steps: From inside WP -

Edit Post > Featured Image (e.g. 3rd Box on the right) > Remove featured image
Reply
MichelleWA Premium
Yes, but there is the problem: If I delete the featured image, then the slideshow will get glitchy, and that could cause a problem.
Reply
Top