[Support request] Can I recreate the look of this blog title+image in Generate Press Premium?

[sarah]

When I went looking for a new blog template, my techy friend recommended generate press. I am not able to take the old template with me when I move from WordPress to siteground. I like the look of the long short featured images with the words and background superimposed on top of them. You can see what I mean in this blog post: http://graceunderpressure.blog/2017/11/05/adhd-comorbidities

I would like to keep the blog looking similar if possible. So far, I have figured out how to make the featured images long and skinny: 300px tall x 1200px wide like on the original template. However, getting the white square and text with the title/categories on top of the image has proven challenging.

You will also note that the blog post at the link has a space on the left side under the image that says the author of the post and the date. I cannot find a function to do this either.

Any help you can offer would be appreciated. I am a novice, so I am in over my head.

[Tom]

Hi there,

It looks like you got the corner of the white content area on top of the image?

As for the post meta, that’s definitely a bit more difficult. Can you add those items so they at least appear under the title for now, then let me know?

Thanks!

[sarah]

Hi Tom, thanks for your reply! I appreciate it.

Since I am editing the unpublished template it is hard for me to give you a link to see what I have done. So, I took a snapshot here: https://drive.google.com/file/d/1–iyTM_XiM0JqDjQKIeGfZWV_0QtH4_o/view?usp=sharing

I removed the dates from the posts in the new template, but I put the author’s name is under the title as you suggested.

As far as the header image, yes, you are right that part of the white area is on top of the image.

If you say that some of this is difficult, then it makes sense that I was not figuring out how to do it easily.

Let me know what do next. 🙂

[sarah]

I don’t know if it matters but I edited settings to resize the images after measuring the old template’s images. Here is the updated image of the changes:

https://drive.google.com/file/d/1PSFSJtVRUR9RSVRVfnpKVmZR_EcRkFlA/view?usp=sharing

[Tom]

Ah, I thought the site you added in your website field was the site you were working on.

Is there any way you can put something up on a live server so I can see your set up using your images etc.. That would be the easiest way for me to come up with a solution unique to you.

[sarah]

I am not sure. Right now I am able to view it because I followed siteground’s instructions to edit my window host file. I am completely new to this. I am actually publishing it to the blog on sitegrounds servers, but I don’t know how to let you see it. (I went and looked at my emails from siteground.) Maybe this? At this link: https://hosts.cx/ Type in The IP is 109.199.127.234 and the website is graceunderpressure.blog This is how the tech at siteground told me the blog can be viewed, but I do not know if it will work. Let me know if you cannot view it. Thank you for your patience with me as I truly am a beginner. I am grateful for your quick replies and helpful answers.

[sarah]

Hi Tom, it took a while, but the blog is finally live. You can see it at http://www.graceunderpressure.blog

I’m still interested in trying to recreate this look if possible.

TIA
Sarah

[Tom]

Any chance you can make sure your featured images aren’t set to float left on the single posts? They should be set to center. That should help me come up with some code. I won’t be able to make it exact, but should be able to get you somewhat close.

[sarah]

Yes. That should be doable.

[sarah]

Done. 🙂

[Tom]

I lost the original example of what you’re looking for, but perhaps this is close?:

.featured-image + .entry-header {
    background: #fff;
    position: relative;
    top: -100px;
    max-width: 80%;
    margin-left: 20px;
    padding-left: 20px;
}

[Morgan]

I’m looking for the same Title/white-bg overlaying the Feat-img effect (ignore other layout elements).
See: https://i.imgur.com/G3dWpV3.png

I tried your CSS above but it didn’t do anything.

I’ve used blue to show what I want to be white, overlaying, but it’s under the Feat Img: http://storyclusters.com/blog/

My css is clearly broken, but u get the idea 😉 (“.featured-image + .entry-header” didn’t work at all):

header.entry-header {
    /* background: #5b9dd9; */
    z-index: 1000;
    background-color: blue;
	  margin-top: -120px;
}

[Tom]

You could try something like this:

.entry-header {
    background: #5b9dd9;
    margin-top: -120px;
    z-index: 10;
    position: relative;
}

The trouble is the margin-top value differs if the title is on one line or two. We could make it so the title was limited to one line if you’d like?

[Morgan]

Yes, we’re getting there, thanks!

1. I like the title breaking various lines 🙂 do we need to worry about the margins?

EDIT: I’ve been tweaking, refreshing, made masonry layout, changed width of sidebar, still looked good, on refresh it’s suddenly showing 1 column left aligned (dbl checked – still set to 2 cols in Layout/Blog).
UPDATE: Turning off Masonry fixed it, then turning it back on and it’s working. Weird.

I added margin/padding (which worked)

.entry-header {
    background: #fff;
    margin-top: -110px;
    z-index: 10;
    position: relative;
	  padding-top: 12px;
	  margin-right: 68px;
}

2. I am noticing, at random screen sizes, no padding-right on title, and attempts to add any haven’t worked.

View post on imgur.com

3. The Single Posts Titles are borked.

4. Can I get all metadata alongside the date no both Archive and Singles (like on Archive + Cats + Tags)?
Same Title, Metadata layout for Archive + Singles.
I.e.
June 21, 2019, By: m0rg5, Categories: Fun, Tags: blaa, blaa

[Morgan]

Made a lot of progress.

1. Masonry definitely exhibiting strange behaviour – suddenly breaks, turn it off and all is well. Sometimes works, sometimes doesn’t. At the moment I’ve got it turned off, but would prefer it on.
UPDATE: And masonry is working again.

2. I think I’ve sorted most of it, for all screen sizes (Singles busted, see 3), yet for this white bg gap below 768 breakpoint

View post on imgur.com

Adding bg colour to either entry-summary or <p> doesn’t seem to work.

Also weird big titles above breakpoint:

View post on imgur.com

Currently:

.entry-header {
    background: #fff;
    margin-top: -40%;
    z-index: 10;
    position: relative;
	  margin-right: 35%;
	  margin-bottom: 2%;
;
    padding-top: 32px;
    padding-right: 4%;
    padding-bottom: 4%;
	padding-left:32px;
	margin-left:-32px;
}

3. Singles is as I want below 1024, breaks above.
Title as intended, want the Sidebar at top as per Archives.

View post on imgur.com

4. Still need help with – metadata alongside the date no both Archive and Singles (like on Archive + Cats + Tags)?
Same Title, Metadata layout for Archive + Singles.
I.e.
June 21, 2019, By: m0rg5, Categories: Fun, Tags: blaa, blaa

[Author]

Posts