Will Weaver Xtreme Do This? (posts show with excerpts that pop up)

[Leigh2018]

@scrambler

Ok I had time to try this tonight. yay! So I set all the prerequisites and then realized I don’t know how to set it the “home” page and leave the “blog” page as she wants it. I explain here:

 

I set the css code in the global css code, but quickly realized that I don’t want to do that because it takes affect on the page set to be the “blog” (which in this case is title “articles” which you will see in the link below).

She wants this affect on the static page set to “home”. She also wants the articles page (set to be “blog)) to be the three columns and excerpted like you see in the link also.

So I tried to set the css code to the Misc Options on the page set to “home” in the “Per Page Body Class – CSS class name to add to HTML…” and that didn’t add it to the “home” page.

Is there a way to keep her “blog” page ( title ‘articles’) to stay like this and have the CSS code apply to the “home” page only?

Here is the link I am staging behind the scenes…

http://37.60.234.171/~christ11/

 

Thanks so much!

 

[scrambler]

Yes, you can specialize all the rules to the home page using the home class, or using the page-id-xxx class if a different page

.home .wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;}
.home .wvrx-posts .wvrx-fi-link:hover + .post-area, .home .wvrx-posts .post-area:hover{top:20%;}


.home .wvrx-posts .entry-summary {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
.home .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 
.home .wvrx-posts .post-area:hover .entry-summary, 
.home .wvrx-posts .entry-summary:hover {padding-top:1em;opacity:1;}

.is-desktop .blog-post-cols-3 {width:33.3%;margin:0;} .is-smalltablet .blog-post-cols-3 {width:50% !important;margin:0 !important;} 
.blog-post-cols-3 img, .blog-post-cols-3-span-3 img {max-width:100%  !important;margin:0 !important;} 
.is-phone .blog-post-cols-3 {width:100%;margin:0;} 

.home .wvrx-posts .wvrx-fi-link:before {
content:"";
position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
}
.home .wvrx-posts .post-title a {color:white !important;}
.home .wvrx-posts .entry-summary {color:white !important;}

remember the rules in blue only apply if you set these posts to display as masonry 3 columns. If you use something else, we will need to replace them by something else

[Leigh2018]

@scrambler

Yes! Add the .home to the CSS… I am sometimes not sure where all to add those page directives in the CSS. Thanks for that clarification!

Okay, so I did set all the settings, and added the .home CSS code to the global CSS, and it works. However, seeing has the images are set to “full” size  – and we want it that way for various reasons (like FB only wants a large size photo 1200+ recommended to pick up the featured image when sharing a post) – however they are way too big on the home page as compared to the main blog page “articles”. She likes that main blog page set up and the home page having them the two different layouts.

1- I had to set the static homepage to “page with posts”. She doesn’t want the “2-column” widget so I thought this “page with posts” template setting was the way to do it. Is that what I was supposed to do to get these to show this way?

2- How would I get the CSS for this home page to show the images the same sizes as show on the  main blog page “articles”?

3- And also bottom right I see titles or text overlapping each other? I *think* that is because she doesn’t have all her featured images in just yet – so can we modify the CSS code used to limit this to the “last 5 posts published” somehow?

4- Can I easily change the text color in this as her images are very dark? But we want the posts themselves to stay black text. Also the text on the main blog page “articles” we want to stay black. Just maybe white in these “pop ups” or maybe a white opacity background so the black text shows?

Million thanks!!!!

Here is the link again so you can see what I mean…

http://37.60.234.171/~christ11/

[scrambler]

If you want images smaller like on the blog page, then you would use masonry 3 columns, and replace the rules in Blue by the ones below

.is-desktop .blog-post-cols-3 {width:33.3%;margin:0;}
.is-smalltablet .blog-post-cols-3 {width:50% !important;margin:0 !important;}
.blog-post-cols-3 img, .blog-post-cols-3-span-3 img {max-width:100%  !important;margin:0 !important;}
.is-phone .blog-post-cols-3 {width:100%;margin:0;}

If you only want this on the first 6 posts I will look into a CSS solution later today.

You can change the post title and excerpt color only on the home page with\

.home .post-title {color:white;}
.home .eentry-summary {color:white;}

 

[Leigh2018]

@scrambler – thanks I will go set those and see what it looks like!

The limit of 6 posts would be awesome! I am DEFINITELY going to strongly urge my clients to donate to your company. 🙂

[Leigh2018]

@scrambler

Also the title to white color CSS doesn’t seem to be changing the title to white… it’s still black. I copied and pasted the rule you gave me… might it help it I add important! to the end and if so would it look like this with it added before the last bracket?

 

.home .post-title {color:white; important!}

 

Or after the bracket?

Or is that !important? I forget! CSS is something I do but not my strong point as design is. 🙂

[scrambler]

I had time to do a quick test, try the rules below (whole set). I will be back in a few hours

.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6)  .post-area {position:absolute; top:70%;transition:top 1s;}
.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .wvrx-fi-link:hover + .post-area, .wvrx-posts .blog-post-cols-3:nth-of-type(-n+3) .post-area:hover{top:20%;}


.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .entry-summary  {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .wvrx-fi-link:hover + .post-area .entry-summary , 
.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .post-area:hover .entry-summary, .wvrx-posts .entry-summary:hover {padding-top:1em;opacity:1;}

.is-desktop .blog-post-cols-3 {width:33.3%;margin:0;}
.is-smalltablet .blog-post-cols-3 {width:50% !important;margin:0 !important;}
.blog-post-cols-3 img, .blog-post-cols-3-span-3 img {max-width:100%  !important;margin:0 !important;}
.is-phone .blog-post-cols-3 {width:100%;margin:0;}

.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .wvrx-fi-link:before {
content:"";
position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
}
.wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .post-title, .wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .entry-summary {color:white !important;}

[Leigh2018]

@scrambler – no problem on time… thank you! I edited my last reply to add a couple more questions.. 🙂

 

I tried that last css just now and you can see what I see… that the layout changed back to a regular 2 column page with posts instead of the nice pop ups. I was careful to add the .home to all the places you mentioned ( I believe) and I only added this:

 

 {color:white !important;}

 

to the last line after .post-title as you did after .entry-summary

 

and I still don’t see either as white. I probably did something wrong! But I copied and pasted other than doing those 2 things. ???

[scrambler]

You were missing a dot on the first selector. I Also forgot to add the home class in my hurry

.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5)  .post-area {position:absolute; top:70%;transition:top 1s;}
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .wvrx-fi-link:hover + .post-area, 
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .post-area:hover{top:20%;}


.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .entry-summary  {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .wvrx-fi-link:hover + .post-area .entry-summary , 
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .post-area:hover .entry-summary, 
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .entry-summary:hover {padding-top:1em;opacity:1;}

.is-desktop.home .blog-post-cols-3 {width:33.3%;margin:0;}
.is-smalltablet.home .blog-post-cols-3 {width:50% !important;margin:0 !important;}
.home .blog-post-cols-3 img, .home .blog-post-cols-3-span-3 img {max-width:100%  !important;margin:0 !important;}
.is-phone.home .blog-post-cols-3 {width:100%;margin:0;}

.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .wvrx-fi-link:before {
content:"";
position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
}
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .post-title a {color:white !important;}
.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+5) .entry-summary {color:white !important;}

[Leigh2018]

@scrambler thanks!

I just put that CSS in and it is back to the tiles with the pop up excerpts. Cool, I must have done something wrong when adding .home to everything.
However,

1- it still isn’t excepting the title as white

2- And it is allowing 7 posts instead of 6.

3- And some of the excerpts are “behind” the post below it and so I can’t see the “continue reading” (which she likes in there) on some of them?

Any idea on these that I can adjust?

 

 

[scrambler]

You had missed a dot on the first rule selector.

Change all the  (-n+6) to (-n+5), there was an error were one was (-n+3), must also become (-n+5)

But while I am on this, if you have a blog page, and these are just to highlight the latest posts on the home page, why dont you just set the page with posts to only show the first 6 posts? If you do, we can go back to the previous rules in post #58529 (I updated the rules)

For the title, the last rule must be changed as below (yellow)

.home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .post-title a, .home .wvrx-posts .blog-post-cols-3:nth-of-type(-n+6) .entry-summary {color:white !important;}

Regarding the excerpt not showing in full, you are going to have to make choices because there is no magic. The space for the text is limited by its size and the size of the image. If the image is too small or the text too big, it simply wont fit in it. To help, you can play on a few different things

• You can move all content higher by lowering the 20% value
• You can make the title and excerpt text smaller so more can fit in the image using the color rule (add the font-size in it). I broke the last rule in two so ou can set them independently.
• You can make sure the featured image is high enough.

 

 

[Leigh2018]

@scrambler

That works! I loved the idea of simply setting the page with posts number value to 6 but didn’t want to do that for fear of messing up your CSS code you had worked so hard on for me. 🙂 So I did just that and am using the updated rules in your  post #58529 and even the title is cooperating in white color now. Awesome!

Yes, magic in CSS would be awesome but I know… ha! So I lowered the value to 10% instead of 20% as you suggested to lower.

I changed the global text size from 16 to 14 and it still looks great on mobile .

Amazing work!

The only thing I’d like to know is if we decide we want this to ONLY apply to the static home page on a desktop and NOT on mobile devices (it looks pretty good on my iPhone but not iPad for some reason… I do believe it is due to the image sizes as you mentioned and I can’t get people to make their images sizes all the same to save the farm!). So is there an easy way to get this to apply on Desktop only? If not, no worries.

Thank you again!!

[scrambler]

We can definitely optimise or disactivate the effect on mobile.

I was actually thinking about that, because that effect works on Hover, and there is no Hover on mobile, So I would think you cant get the effect at all on a phone or tablet. Have you tested, and is there a way to get the hover effect on a mobile touch device?

Based on that, we can either change position or font size on mobile, or desactivate the rule on mobile completely. Let me know what you want to try.

[scrambler]

Also, I found a problem with the text sometimes extending to the right, to fix that, we need to change the first rule to include the width (below in yellow)

.home .wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;width:96%;}

 

[Leigh2018]

@scrambler

yes.. I tested on both my iPhone and iPad mini (old one). It is doing really pretty well on both with the hover as I just tap and hold it lightly and it pops up… little longer tap and it goes right to the  post.  I don’t even have the newest iOS on either  … have an iPhone 7 with  the last iOS. Doesn’t work as great with the iPad though.

I’d love to know how to deactivate it for both in case she doesn’t like it on those.

 

also, will change that width and test.

[Leigh2018]

@scrambler

Tested the width change it works PERFECT! Thank you! Even helped the mobile.

And the main hang up on the mobile devices is that if I hold the tap just long enough of course it think I need the “right click” options like “copy” etc. So we may want to deactivate it mobile still.

 

 

[Author]

Posts