Support » Plugin: Network Posts Extended » Help with style

  • Resolved milian

    (@milian)


    Hi,

    I’m struggling with getting the style so its similar to the other main blog pages.

    I’m currently using some custom CSS I found in another support ticket here, its close to what im looking for not quite right.

    I’m looking to match: https://blog.eatigo.com/philippines/

    I don’t need likes or comment count, date doesn’t have to look the same either, but looking to get thumbnails, title, excerpt the same order and similar size.

    Also would can keep the ‘Published in’ section, so its indicted which blog its from.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author johnzenausa

    (@johnzenausa)

    Okay give me a few days to come up with something. Won’t have time until at least tomorrow night to look at it.

    Plugin Author johnzenausa

    (@johnzenausa)

    What dimension do you want the images?

    Plugin Author johnzenausa

    (@johnzenausa)

    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 3 months, 4 weeks ago by johnzenausa. Reason: Wrong image link
    • This reply was modified 3 months, 4 weeks ago by johnzenausa.
    Plugin Author johnzenausa

    (@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);
    }

    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;
    }
    
    Plugin Author johnzenausa

    (@johnzenausa)

    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.

    Plugin Author johnzenausa

    (@johnzenausa)

    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; */
    Plugin Author johnzenausa

    (@johnzenausa)

    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.

    Plugin Author johnzenausa

    (@johnzenausa)

    If you don’t need any further assistance I’ll mark this thread as resolved.

    Implemented it and it looks great John.

    Thanks so much for your support, much appreciated!

    Plugin Author johnzenausa

    (@johnzenausa)

    Okay will mark as resolved.

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.