HOW to place the blog title ON the single blog photo image.
-
How do I place the Title to a single photo image on the image itself, its no good below the image. They sent me to CSS help from chat because this is too technical for chatline. With a step by step I may be able. OR maybe make it a default for my blogs :)
The blog I need help with is: (visible only to logged in users)
-
-
BUT, it is not ON the blog image for my blogs.
How do I get this CSS to change this default??? -
Hi there, we can do this, but the problem is your images vary in color, so no single font color for the blog post titles will work on all images. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and scroll down through your posts and you will see what I mean.
.blog .has-post-thumbnail.hentry .entry-title { position: relative; top: -400px; margin-left: 50px; } -
You can try to mitigate the text colour issue with this slightly hacky text border method, you’ll want to test it in lots of browser/OS combos if you’re going to use it though:
body.blog .has-post-thumbnail .entry-header a { color: #fff; text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; } -
Ok, the titles did not even move from the bottom of each dark photo. I don’t take pale photos, is there a reason why white text doesn’t work on dark color?
-
If you add a line saying z-index: 20; to the code @thesacredpath gave you in between the top and margin-left lines then you can also include the code below to tint the images slightly darker until you mouse over them. It might not be to your liking but it would help make the titles easier to read.
.blog .has-post-thumbnail .featured-image a::before { background: rgba(0,0,0,0.5); } .blog .has-post-thumbnail .featured-image a:hover::before { background: rgba(0,0,0,0); } -
Can you link to a page which shows the problems you’re having, the code worked for me when I tested it on your site in my browser but maybe I’m looking in the wrong place. Are you looking at any particular posts?
-
I have 5 posts and they are all dark images in the center where I would like the title to show. Do you see the titles in the center?
-
Ok, I will try this again. I can see the titles to my blog post images when I roll up the screen. It works fine even on the lightest hue of my photos.
the CSS is tiny on the forum and overly large on the website box. Please stay tuned. -
-
-
@viimaurice, are you talking about on single post pages, such as this one https://viimaurice.org/2016/07/04/they-carry-the-tears/ ?
If so, the title is set to scroll up as the user scrolls down the page. Add the following and you can adjust the 20% value as desired (it was originally 50%).
.single .site-header .entry-title { top: 20%; }With this change, you will need to look at a number of your posts to see if this works. If you have images that have different proportions of width to height, it may not work on shorter images.
-
the sacred path, I started my work day a little while ago to see if the last suggestion you offered was going to make the change and it does. The only single blog that is different was well worn but still serving. The blogs look great to me at 50%. Yet, I do understand that I can move them by changing the % values. Thats great! I will close out this forum and contact you in a few days if I have any other concerns with this issue. THANKS,
Vii Maurice -
- The topic ‘HOW to place the blog title ON the single blog photo image.’ is closed to new replies.
WordPress.com Forums 