Post in Page followup

Hey Todd,

Check out this CSS for the page title:

.singular-page .entry-title {
  font-size: 21px;
  line-height: 24px;
}

That will reduce the size of the title, but it will affect all pages. In order to affect only that one page, you need to add the ID to the first class selector, like this for example:

singular-page-1133 .entry-title {
  font-size: 21px;
  line-height: 24px;
}

Then it will only affect the title on that specific page. We have a quick tutorial you can follow here for finding a page’s ID: https://www.competethemes.com/blog/find-page-id/

As for alternative the left/right, try switching the “even” part to “odd” like this:

.singular article .excerpt:nth-child(odd) .excerpt-container {
  float: right;
}
.singular article .excerpt:nth-child(odd) .featured-image {
  right: auto;
  left: -1px;
}

Thanks, Ben!

I probably didn’t get something in the original “How to Include a List of WordPress Posts in a Page” blog entry, as the posts that I am bringing into a page do not feature the hover zoom effect. The opacity brightens up, but no zoom.

Thanks and regards,
Todd

Okay the “zoom” class must not be getting added to the posts. We can work around that like this:

.featured-image-link:hover .featured-image {
  -webkit-transform: scale(1.05)
  -ms-transform: scale(1.05)
  transform: scale(1.05)
  -moz-transform: scale(1.05)
}

Once added the featured images should zoom in when hovered over.

Hi Ben,
I plugged this into either just the Custom CSS window, or into the style.css of my Tracks Child theme, and I’m not getting the zoom effect. Could it be because I don’t have a default zoom set? FWIW, the Posts in Pages are darker at the start than they are on the homepage of my site, however, they lighten up to full brightness when hovered over.

For the sake of clarity, here is a screenshot: https://userpages.bright.net/~toddw/tracks-post-in-page-2.png

Also, this is the entirety of CSS contained in my Child theme’s style.css:

.logo {
  max-width: 100% !important;
  max-height: 90px !important;
}
.site-header .site-title {
  opacity: 1;
}
.site-header {
 margin-bottom: 20px;
}
@media all and (min-width: 50em) {
  .site-description {
    top: 74px !important;
    }
}
.excerpt-container,
.excerpt {
  background-color: #f8f8f8;
}
.entry {
  margin: 0 auto;
  width: 100%;
}
.entry-container {
  padding: 0 !important;
}
.singular-page .entry-title {
 font-size: 21px;
 line-height: 24px;
}
.singular-page .entry {
  padding-top: 0;
}
.singular-page .site-header {
  padding-bottom: 12px;
}

.singular .excerpt .featured-image {
  margin: 0 !important;
}
.singular .excerpt a {
  text-decoration: none !important;
}

.singular article .excerpt:nth-child(odd) .excerpt-container {
  float: right;
}
.singular article .excerpt:nth-child(odd) .featured-image {
  right: auto;
  left: -1px;
}

Thanks,
Todd

Woops that’s my mistake with the code. Please try this instead:

.featured-image-link:hover .featured-image {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -moz-transform: scale(1.05);
}

(semi-colons included this time ??

For the brightness, is there any chance you can link me to your site, so I can check it out.

Thanks!

Hi Ben,
Thanks for that. I did make an attempt to figure it out on my own, but I completely missed the semicolons. The Post images are scaling beautifully, now.

I hate that I’m asking so much of your time, and that my site is stuck behind a firewall. I don’t have control over the access, as this is a corporate environment.

If you’re able to glean anything regarding the dark image from this video, that would be great: https://www.youtube.com/watch?v=uLvKBB3LXhs

If it’s too much to resolve without the needed access, that’s Okay, as you have helped me a lot!

Thanks and regards,
Todd

It’s no problem, thanks for sharing that vid.

Try adding this CSS, and see how it helps:

.singular-page .excerpt {
  opacity: 1;
}

This should remove the opacity effect entirely. If it does, then you can try reducing it back down to 80% with this code instead:

.singular-page .excerpt {
  opacity: 0.8;
}

I’m not 100% sure why the post is darker on that page, but testing these snippets in order should at least provide some insight on what’s happening.

This CSS is affecting the opacity, as this screenshot indicates. I set the opacity to 0.3, and obtained the dimming effect. It doesn’t remove the dark overlay, however.

I deactivated a few plugins which resulted in some formatting changes, but no change in the overlay. My plugins consist of “Disable Comments”, “Posts in Page”, and “WP Retina 2x”.

I added a white image for further testing. On the homepage, the white image read as #ffffff, while the same image read as #dcdcdc on the Posts in Page page, or the “Physical” page on my site. It’s also 220, 220, 220 in RGB. Could it be defaulting to a gray, or picking up a gray from an unclosed style? Something that the homepage is not being affected by?

Assuming the color is being delivered at full strength, that is, not being shown at an opaque level of gray, I just now went through the colors in “Custom CSS”, and could not find anything set to #dcdcdc.

I’m using the “Posts in Page” by IvyCat Web Services, and the following shortcode: [ic_add_posts category=’physical’ template=’content-archive-pip.php’]

Okay I think it must be related to the background color then. Try removing or editing this CSS:

.excerpt-container,
.excerpt {
  background-color: #f8f8f8;
}

Perhaps the background color for the posts is getting applied on the homepage, and not the other page making one post background darker than the other?

You can also try adding an “!important” tag to make sure it’s forced to apply across the site, like this:

.excerpt-container,
.excerpt {
  background-color: #f8f8f8 !important;
}

Hi Ben,
You were on to the solution earlier, but I misdirected you somewhat. I was able to go through a process of elimination on the colors in the Tracks style.css and replace colors with #fff (white). This isolated the following CSS:

@media all and (min-width: 56.25em) {
  .entry .featured-image:after {
    position: absolute;
    content: '';
    background: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0.2;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }

I’m not well-versed with media queries, but substituting “#fff” for the original “#222” took care of the dark color overlay. I wouldn’t normally think of a “background-color” as an overlay, but the reduced opacity of the image in this location made it so that the background color affected the appearance of the image layer.

Thanks again!
Todd

Ah I see now, well done!