[Resolved] Styling metadata and single posts page

[An Nguyen]

Hi there,

I want to format my single post page like this: https://www.staymeonline.com/reduce-forms-abandonment/

My current single post page

I want to format:

1/ my single post page look the same layout of this website (I don’t care font type).

2/ hamburger menu next to main menu like this website (link above).

3/ Metadata information is the same like the website. (I try to do following guide of this post : https://generatepress.com/forums/topic/how-to-show-icons-before-date-and-comments-post-meta/) but it is unsuccessful. The metadata still doesn’t display comments and its icon.

[Leo]

Hi there,

1) Looks like the only difference right now is the featured image position?

If so set it to below title should work:
https://docs.generatepress.com/article/adjusting-the-featured-images/

2) Have you tried activating the off canvas menu for desktop?
https://docs.generatepress.com/article/off-canvas-panel-overview/

3) Have you installed Font Awesome yet?
https://docs.generatepress.com/article/font-awesome/

Let me know 🙂

[An Nguyen]

Hi Leo,

1/ I don’t think so. I tried to do accompanying your link but nothing change. I looked the staymeonline website carefully and I saw, I realised that margin left and right of my content-container is smaller and margin left and right of text is none.
It has shadow of content-container and menu-container in staymeonline website and specially, there is no space between the content-container and comment-container although its layout is “separate containers”. I want the layout and format the same in my single post pages.

2/I reviewed staymeonline, I saw there are 1 cavas-off navigation (name A-menu) and main navigation (name B-menu). In mobile mode, B-menu is activated in cavas-off navigation. In desktop mode, B-menu is active as main navigation and A-menu is activated in cavas-off navigation.

In my current setting now, If A-menu and B-menu are active in cavas-off and main navigation, respectively in desktop mode, A-menu will be activated in cavas-off navigation in mobile mode. However, I want in mobile mode, B-menu is activated.

3/ I did following your guide link but the comment icon and its counted number still disappear.

[Leo]

1. The code is showing that your featured image is still set to above header. Can you try setting it to below title first with the posts toggle activated first?
https://docs.generatepress.com/article/adjusting-the-featured-images/

Make sure to clear and disable the caching plugin as we requested here:
https://www.screencast.com/t/zOZsWHaab

Here is the shadow the other site is using:

.single .inside-article, .comments-area {
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
}

2. The StayMeOnline site is only using the off-canvas menu for desktop and the normal menu on mobile:
https://www.screencast.com/t/up86t4Rz

Unfortunately you can only assign one menu to the off canvas menu currently.

3. Make sure FA and FA5 is installed as per this link:
https://docs.generatepress.com/article/font-awesome/

Then this is the exact CSS that site is using:

.posted-on:before {
    font-family: 'Font Awesome\ 5 Free';
    content: "\f274";
    color: #2B60DE;
    padding-right: 10px;
}

[An Nguyen]

Hi Leo,

1/ Thanks for your box-shadow css code. It worked. However, feature images are still in larger size than (500px-300px)

2/I mean the way he show off-cavas menu. You go to home page of staymeonline and off-cavas is off. However, you continually go to a specific post you will see it display next to main menu with different content inside with cavas-off in homepage as mobile mode (https://www.staymeonline.com/reduce-forms-abandonment/) and content inside look like you add widgets inside. Furthermore, you can see another menu in the header “Everything” of blog archive (https://www.staymeonline.com/blog/). Is it a menu?

3/ I’m still struggling with this issue. In wp-show-post of pages and in a specific post, it does not display the same metadata with staymeonline as I expect. After installing better-font-awesome plugin and add code snippet via your link, I got a strangle characters with box in search navigation on home page, when I click on search icon. I try to remove the betterfontawesome plugin and turn-off php in snippet. It’s still there.

[Leo]

1)

However, feature images are still in larger size than (500px-300px)

So you’ve set the featured image size in the customizer but it’s not working?
https://docs.generatepress.com/article/adjusting-the-featured-images/

Have you tried clearing the caching plugin? Also please leave it deactivated while we are assisting with various issues.

2) You are referring to this?
https://www.screencast.com/t/4S5Wj5drXThy

That’s the latest posts and category widgets in off canvas widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

And on mobile, this is just the normal menu (not off canvas):
https://www.screencast.com/t/up86t4Rz

3) How are you adding the snippet here?
https://docs.generatepress.com/article/font-awesome/#font-awesome-5

Can you first clear and disable your caching plugin?

[An Nguyen]

Hi Leo,

I can ensure with you that every fresh the website, I alway clear cache first via using WP-rocket plugin!

1/ If I set in customize and deactive script, it works but in archive page, an image not full in its column !

If I active the PHP script only and set in customize “Auto”, the images in archive page is full in theirs column and the image size is still large. Currently, I set the image size in customize.

2/ Thanks, now I can set cavas-off nearly look like the website but I don’t know how to turn it off in home page? (Keep it on others).

3/ I add it on snippet and active it. I also install better-font-awesome plugin, but it doesn’t work.

[David]

Hi there,

can you clear the cache and DISABLE the WP Rocket plugin – the cache plugin can mess with the order of CSS and Scripts which could be behind some of the problems. You should avoid having it activated whilst building or customizing a site.

Can you make sure its disabled and let us know so we can relook at the issues.

[An Nguyen]

Hi David!
I did! It’s disabled

[Tom]

Hi there,

1. The reason your featured image on single posts isn’t respecting the image sizes you’ve set is because you’re using a Header Element. If you go to “Appearance > Elements” and disable the Header Element set to display on “Posts”, it should work.

2. You’re wanting to disable the off canvas toggle on the home page? If so, this CSS should help:

.home .slideout-toggle {
    display: none;
}

3. I think doing #1 above will fix this.

[An Nguyen]

Hi Tom,

1/ I don’t know how to solve this issue because my website gets very slow (50/100) score in GTmeter because of image size issue . Furthermore, the YSlow score also slow I dont know how to fix it.

2/ Sorry Tom, I still need that the cavas-off turns off on Home-page + About-page. The code worked pretty well in homepage.

3/ I still got a strangle characters in metadata when I tried to add icons “author date comments” like this post and the example of this post is here . I try to remove the betterfontawesome plugin and turn-off php in snippet turn off header-element. It’s still there. However, If I remove all CSS codes relates to customize author metadata, it’s ok now.

So, how can I add image for author and icons for date and comment on archive pages such as my author page

and add image for author and icons for date and category on post pages? Please view my site and help me to solve the problem.

Thank a bunch.

[Tom]

Hi there,

1. Did you try what I mentioned? You can also try to optimize your images/make sure they’re only as big as they need to be.

2. Try this instead:

.home .slideout-toggle,
.page-id-1630 .slideout-toggle {
    display: none;
}

3. To add icons to your post meta, you will need to load those icons on the site. The easiest way to do that is to use Font Awesome. Is Font Awesome added to your site currently?

To add the avatar, you can do something like this: https://docs.generatepress.com/article/entry-meta-style/#example-1

For your single posts, it depends on whether you disable the Header Element or not. If you do, then the code I just linked to will apply to your single posts as well. If you keep the Header Element, then we need to use different code.

[An Nguyen]

Hi Tom,

1/ I redesign and optimise these images one by one. I would like to know the max width of image in home-page is 585px ? Isn’t it? I tried to optimise one image and test speed score very good 98 page load 80 YScore

2/ Thanks for this code. It has works perfectly. Could I change cavas-off opening window on the right hand side? I want to open it in the same side with cavas-off icon.

3/Font awesome I did following Leo’s link. I did (Installing Better- awesome font and adding PHP code)

-In post page, I want to display metadata in header and theirs icons before each one like this: (“avatar-image NTA | date-icon August 18, 2019 | category-icon Business, MBA course, Share Resources | icon-comment number of comments “)

My current code in header : rule all posts:

<h1>
	{{post_title}}
</h1>	
	<p>
		{{post_author}} | {{post_date}} | {{post_terms.category}}
	</p>

-In archive pages, Now, metadata displays not good. I want to display it below title and format: (“avatar-image NTA | date-icon August 18, 2019 | icon-comment number of comments“)

Now, In snippet only run : Font php only

[Tom]

1. Your page hero element is 1170px wide, so that’s the size your featured images should (at least) be.

2. Yes, you can find this option in Customize > Layout > Off Canvas Panel.

3. Let’s do one at a time, starting with your archives.

Right now, the entry meta is above the title because of some custom CSS you have. A lot of the CSS is broken, so it’s hard to see exactly where it is. I believe it’s this column-reverse stuff: https://screencast.com/t/cVnHbko0rB

To re-arrange the meta, you can try this:

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
        'comments-link',
    );
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, [ 'comments-link' ] );
} );

Once you add that, let me know and I’ll write the CSS to add the icons.

[An Nguyen]

Hi Tom,

1/ I resized image manually. The score is very beautiful 99/ 96 Ypage. However, if I used a 1170 width image for all elements such as icons, thumbnails or smaller size, It will not be the maximised optimisation for image size. How can I solve this problem? Do you know any plugins to handle this issue? For example, it can realised which elements will use small size(icons, thumbnails) and the others need larger size (banner)

2/It worked. Done!

3/ For Archive page, I added your code. Now it shows :”by NTA August 6, 2019 Leave a comment” It seems to be rearranged.

Thanks.

[Author]

Posts