Okay give me a few days to come up with something. Won’t have time until at least tomorrow night to look at it.
What dimension do you want the images?
Hi @milian;
Here is some css code I came up with:
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content {
display: flex;
flex-flow: column nowrap;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > a {
order: 1;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-posttitle {
order: 2;
font-family: "Helvetica Neue Medium";
font-weight: 400;
font-size: 26px;
line-height: 30px;
color: rgba(0,0,0,1);
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-excerpt {
order: 3;
font-family: "Helvetica Neue Medium";
font-weight: normal;
font-size: 14px;
line-height: 22px;
text-align: justify;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-source {
order: 4;
display: flex;
flex-flow: row nowrap;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-source > span::after {
content: " ";
margin-right: 5px;
}
You can see the image here of what it looks like.
Example Image
Note: You can remove the read more link in the plugin’s settings menu by checking the box hide all read more links.
-
This reply was modified 6 years, 8 months ago by
johnzenausa. Reason: Wrong image link
-
This reply was modified 6 years, 8 months ago by johnzenausa.
I forgot to add the zoom effect to the image.
.netsposts-frontpage-wrapper img {
transition: 0.6s ease-in-out;
}
.netsposts-frontpage-wrapper img:hover {
transform: scale(1.3);
}
Thread Starter
milian
(@milian)
For image size: 385.07 x 216.77 px
Thanks for that css, however if I replace the old custom css with that one it looks like: https://i.imgur.com/RHcKoRW.png
This is the custom CSS that it was using before:
/* Enter Your Custom CSS Here */
.netsposts-block-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
background-color: rgba(255,255,255,1);
padding: 15px;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper {
flex: 0 0 359px;
max-width: 100%;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content {
display: flex;
flex-flow: column wrap;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-posttitle {
order: 2;
font-family: Helvetica Neue, Arial, Tahoma, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-source {
order: 3;
border-top: none;
border-bottom: none;
margin-bottom: 0;
font-family: Helvetica Neue, Arial, Tahoma, sans-serif;
font-size: 1em;
line-height: 1.2;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .post-thumbnail {
max-width: 100%;
width: 359px;
height: auto;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content a {
display: table;
}
.netsposts-excerpt {
font-family: Helvetica Neue, Arial, Tahoma, sans-serif;
line-height: 120%;
text-align: justify;
}
That’s why I probably couldn’t complete it. Just leave mine in there and I’ll finish it this weekend. I had a mixture of both going on. I need a clean slate to work with. So don’t touch anything please until I’m finished. Did you want the image squared or rectangular. If the latter you’ll need to recreate your thumbnails to the proper dimensions.
Okay try these:
.netsposts-block-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.netsposts-frontpage-wrapper {
width: 384px;
padding: 1em;
max-width: 100%;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content {
display: flex;
flex-flow: column nowrap;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > a {
order: 1;
display: block;
overflow: hidden;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-posttitle {
order: 2;
font-family: "Helvetica Neue Medium";
font-weight: 400;
font-size: 26px;
line-height: 30px;
color: rgba(0,0,0,1);
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-excerpt {
order: 3;
font-family: "Helvetica Neue";
font-weight: normal;
font-size: 14px;
line-height: 22px;
text-align: justify;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-source {
order: 4;
display: flex;
flex-flow: row nowrap;
}
.netsposts-block-wrapper .netsposts-frontpage-wrapper .netsposts-content > .netsposts-source > span::after {
content: " ";
margin-right: 5px;
}
.netsposts-frontpage-wrapper img.post-thumbnail.wp-post-image {
transition: 0.6s ease-in-out;
}
.netsposts-frontpage-wrapper img.post-thumbnail.wp-post-image:hover {
transform: scale(1.3);
}
/* If you want the image to have the same dimensions they are 384px wide and 216px tall so just make a thumbnail with similar dimensions. */
/* CSS code for above */
.netsposts-frontpage-wrapper img.post-thumbnail.wp-post-image {
max-width: 100%;
max-height: auto;
width: 384px !important;
height: 216px !important;
}
/* If you get change the dimensions of the image then you can change height: 216px !important; to height: auto !important; */
One other note above you can use the arguments:
title_length='' and manual_excerpt_length='' or excerpt_length='' to get the size of the boxes more uniform.
If you don’t need any further assistance I’ll mark this thread as resolved.
Thread Starter
milian
(@milian)
Implemented it and it looks great John.
Thanks so much for your support, much appreciated!
Okay will mark as resolved.
