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

[Leigh2018]

@scrambler I still have yet to try this… yikes time has gotten away from me the last few days! BUT… a big round of applause for your version of this, because I actually love how it looks on your test site! Better than the link I gave for you to check it out! Bravo!!!

This whole thing would be totally awesome as a plugin companion to Weaver Xtreme or some other easy and quick way.

And now I am reading about Absolute Weaver… want to try it now too! I have no time, so there’s that. LOL! But if you add this somehow maybe you could add it to both theme versions!

Gonna’ try it tomorrow… then …

I will be back. (She said not trying to sound like Arnold Schwarzenegger… LOL!)

[Leigh2018]

@weaver – I just now saw that you mentioned maybe making it an FI option – that is a great idea! And something I think my clients who don’t understand all this could use easily. I always tell them to upload a FI, since FB and other social media look for that to include an image (and the most prevalent image to a post usually) when the post is share to their platforms. So I think a lot of people are already using FI. Also, maybe there could be a setting for N amount of posts to have this applied so it doesn’t keep adding on forever… like applied to the first 5 posts. Something definitive so every user could understand the parameters. These kind of aesthetic additions will make the themes even better than they already are… which is superb.

[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%;}

 

[Author]

Posts