Some Customization needed

Hi there,

Let's handle one question at a time and per topic:
https://www.screencast.com/t/BUPtnINQm

Which parts are you referring to here?

If it's the layout of the posts, then the best solution would be to use the query loop block in the upcoming GenerateBlocks 1.5 which is currently in beta testing:
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

I need this one
How to put the search icon to the left of logo on mobile devices and hide the menu text (Only show the icon)?

Hi Rohan,

To remove the Menu Label, Kindly go to Appearance > Customize > Layout > Primary Navigation, then leave the Mobile Menu Label blank.

To clarify, the reference site you have has its Menu at the left, and the search icon at the right, is this the one you’re going for?

If so, here is a code you may add in Appearance > Customize > Additional CSS:

.site-logo.mobile-header-logo {
    position:absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

Otherwise, try this:

.site-logo.mobile-header-logo {
    position:absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

#mobile-header .mobile-bar-items {
    margin-right: auto;
}

Kindly let us know how it goes, and we’ll proceed with your next inquiry.

Thanks, everything works pretty well. Can you tell me how to increase the size of the menu icon and search icon on mobile only? and How to put updated date under author name in single post

You may try adding the following code in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .main-navigation .mobile-bar-items a {
        font-size: 24px;
    }

    button.menu-toggle span.gp-icon.icon-menu-bars {
        font-size: 24px;
    }
}

With regards to the placement of the date on single posts, here is another CSS you may try adding:

body.single div.entry-meta {
    display: flex;
    flex-direction: column;
}

body.single div.entry-meta span.posted-on {
    margin-left: 30px;
}

Hope this helps!

The icon size has been fixed. Thanks. The date issue is still there. The CSS is affecting the category portion as well. I just want the date to be under the author name.

I see.

I edited the second code above: https://generatepress.com/forums/topic/some-customization-needed/#post-2238803

Kindly try using that instead.

This is how it should look like with the new code: https://share.getcloudapp.com/nOuXpP5v

Nice, it worked. But I want the author's image to align correctly like the example site. And I want "By" before the author's name and "Updated on" before the Date.
Thanks

I see.

Kindly try adding this PHP:

add_filter( 'generate_post_date_output','tu_add_to_post_date' );
function tu_add_to_post_date( $output ) {
    return '<span class="date-label">Updated on </span>' . $output;
}

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Then, update the CSS to something like this:

body.single-post span.byline a[rel="author"]::before {
    content:"By ";
    text-decoration: underline;
    color: #f5f7fa;
    text-decoration-color: #ff409d;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-underline-position: under;
}

body.single-post div.entry-meta {
    display: flex;
    flex-direction: column;
}

body.single-post div.entry-meta span.posted-on {
    margin-left: 30px;
}

Hope this helps!

Thanks, everything is now perferct. There is one issue I am facing while loading new pages wp show post featured images taking too much time to load and while loading those looks weird. Do you know what is the reason and how to fix? I have attached the video so that you can check that out

Thanks in advance.

You’re welcome!

Are you using WP Rocket? You can try adding ?nowprocket at the end and see how the loading changes. It may have something to do with your optimization.

Or, if you test your website in https://pagespeed.web.dev/ you’ll see improvements you can work on which may positively affect your site’s loading speed.

Hope this clarifies!

Yes using WP rocket. Could not get this "You can try adding ?nowprocket at the end and see how the loading changes"
Can you explain?

Get it what your are saying. I tried ?nowprocket but loading issue is still there. I am using custom image size for wp show post, can this be a reason?

Hi there,

You are using float CSS to make the layout, I wonder if that's the reason.

Can you try add this CSS:

@media (max-width: 768px) {
     #wpsp-61680 .wp-show-posts-inner {
        display: flex;
    }
}

And remove float: left; from this CSS:

@media (max-width: 768px)
.wp-show-posts-image.wpsp-image-left {
    float: left; 
    margin-right: 0.8em;
    max-width: 100px;
}
}