Changing post layout…child theme or block editor?

[PolyWogg]

Thanks Scrambler, I’d love to see if there is an option with variable image size, as I’ve spent a bit of time getting them to the shape they’re in already 🙂

So barring that option, can I ask a much simpler question, which I think I can do on my own, I just want to be sure I’m “philosophically” moving the right piece. If you look at the two “sample” pages now, one for a TV review and one for a book review, you’ll see that the FI and the Title are not, in fact, aligned to the top of each other. For some reason (*see below), it appears that the FI is just a LITTLE bit higher.

It isn’t as noticeable in the TV review:

https://polywogg.ca/castle-season-1-pwtvr00001/

But VERY noticeable in a book review:

https://polywogg.ca/four-to-score-by-janet-evanovich-pwbr00074/

Seems weird since other layouts seem to have them aligned (including with title). Anyway, is it better to move the FI down a smidge or to move the title up a smidge? From inspection, it *looks* to me like the page title/post title has a .25EM top margin. Just enough to throw it off by a quarter of a line height. Presumably I can assign a generic .page-title and .post-title to have no top margin? But is that the “right” way to do things or is it better to move the FI down?

Paul

[scrambler]

If you inspect the two pages you mentioned above with the browser developer tools, you will see that the top of the Featured image and the Title are exactly at the same place, but they carry different top margin.

The featured image has 0.33em top margin, and the title has 0.25em top margin.

These can respectively be adjusted with the rules below

.featured image {margin-top:0.33em !important;}

.page-title, .post-title {margin-top:0.25em;}

If you see them different than something else, give me the something else page so I can verify if there is a difference with it.

As for your Vertical alignment of the featured image and title and did some research and tried a bunch of things, but there is no way I can find given the HTML structure s available with the various options to do that automatically.

Part of the problem, is there is no way for the title container to know the height of the image container

[PolyWogg]

Annnnd just for weird, I put in your code (adding hyphen for featured image) and they don’t work the same…if I put .25 for one and .25 for the other? The FI is still higher. If I reset both to zero, FI is higher. So I ignored the FI and just set Title margin to 0, works fine.

P.

[PolyWogg]

For some reason, it won’t show me msg 66 above after I edited it. Can you see it?

[scrambler]

I see two messages after yours. #67850 and #67851

Beware of optical illusion… Only inspecting the site with the browser developer tools and looking at the numbers tell the truth 🙂

Also, ems are relative, use px for absolute values

[PolyWogg]

Sigh, there was a third. I basically went through my various pic sizes, with all of them 150w and the largest 177h. I was wondering, based on your earlier Q about not knowing the variable height, if there is a difference in the size of the FI and the size of the container around the FI? So, for example, I know that the FI itself varies in height from a low of 84 to a high of 177. However, if we made the “container” 150×177, and top aligned the FI within it, then even though the Title height wouldn’t know the size of the FI container, we could “manually” set it so it wouldn’t change. The *container* would always be 177ish?

In the meantime, since I have top alignment and column alignment working, I wondered if there was a nice way to frame the calendar box without moving it. I repasted the original code you gave me, and took out the positioning stuff that moved it to the side. This put the box ugly in the normal position, but I was trying to re orient it so it was a three part box:

(box 1, red background, white text for Month) | (box 2, regular white BG, black text for day) | (box 3, regular white BG, black text for year).

Essentially the same box we already created, just horizontal. I couldn’t seem to find an easy way to make 3 collapsible boxes around the date. But I also ran into something else a little odd. I wanted to add the day of the week in front of it, by resetting the format in SETTINGS. But the theme doesn’t seem to care, and it even takes out a comma after the day of the month. Not sure how to put that back in. I’d prefer it was the block I mentioned, but without it, I’d like it to say Sunday, March 28th, 2021 — but I can’t seem to add the Sunday or the “th,” after the 28. I reset the settings to do that by default in SETTINGS for the site, but the theme seems to ignore that.

P.

[PolyWogg]

Ooops, never mind, forgot we set custom post info lines.

[scrambler]

If you want the same look for the box, just horizontal (side by side boxes instead of on top of each other), and in its normal place, Leave everything the way we did as is that created the boxes (Including the custom post info lines), and post back so I can modify the CSS to lay them side by side and leave it back to its normal place.

I will look into the alignment problem from the perspective of fixing the height of the FI container and see if that could lead somewhere

 

 

[PolyWogg]

So I might be learning 🙂

I edited my Custom Post Info line:

%date-icon%%weekday%, %month% %day0%, %year%

And then styled as follows in CSS:/*Style date on desktop*/

.PWcalend {
font-family:arial;
font-weight:bold;
color:red;
}
.entry-date-icon {margin-left:0em;}

I presume if I wanted to go back to my idea of a horizontal Red box, I could style each of those elements individually, but not sure it would look right now with the weekday in there. 🙂

But I think it’s good enough for now.

Paul

[PolyWogg]

Grr…I hate posting code. That initial custom info line was way more detailed than that:

%date-icon%%weekday%, %month% %day0%, %year%

I’ll see how that looks…

[PolyWogg]

%date-icon%%weekday%, %month% %day0%, %year%

[PolyWogg]

div class=”PWcalend”
span class=”PWicon”%date-icon%/span>span class=”PWweekday”>%weekday%/span>, span class=”PWmonth”>%month%/span> span class=”PWday”>%day0%, span class=”PWyear”>%year%/span>/div>

I tried taking out all of the left brackets so it wouldn’t recognize as code. How do you paste that????

[scrambler]

To post HTML you see to select the text and give it the preformatted paragraph format

[scrambler]

So if you set to page featured Image position to “With Title”

Then add the CSS below to the site, it will center the Title inside a 110px high space

.page-header > h1.page-title {
height: 110px;
vertical-align: middle;
display: table-cell;
}

 

[PolyWogg]

Thx Scrambler, the original changes work on Site 2 (my second site) if and only if I have sidebars activated.

If I don’t have sidebars on, then the BESIDE PAGE, NO WRAP setting doesn’t work and then all the formatting on the page starts messing up.

For your above code, putting the title in a set sized space is good but it’s not the title that I want to do this with though…for that second column, I want the content to always slide up to just under the title and for the title always to slide up to the top of the page. It works with sidebars on (as noted above) on SITE 2:

https://www.thepolyblog.ca/castle-season-1-pwtvr00001/

and

https://www.thepolyblog.ca/four-to-score-by-janet-evanovich-pwbr00074/

I guess at this point, my intent is to keep all the code there. And on that site, I wanted the side bar anyway. I’d rather NOT have the sidebar on my other site, but for PolyWogg, if I have it set for FI before page, no wrap, then the “wrapping” doesn’t work UNLESS there are sidebars. For no apparent reason, it HAS to have sidebars.

So basically it seems like I have to choose between everything slides up with sidebars on, and I can have the date box, OR, without sidebars on, the content will ONLY slide up as far as the bottom of the FI box. I just have no idea why.

Paul

[scrambler]

I had clearly misunderstood what you are trying to do.

I will look into sliding the content up under the title

[Author]

Posts