[Support request] Layout for my Categories

[Nicolas]

Hello,

1/ As you can see on this screenshot from a blog with another theme (no GP), the words SPORTS is actually the WordPress Category for the post. So, if you click it you reach the Category page.

How can I get this with GP? Ideally, I would like to get the Category names to be displayed above the H1 of each post.

2/ Generally speaking, I’m using the Slideout theme of GP. It is really nice for my posts but my visitors complain about the navigation. They do not know where to click to get an overall view of the content available. I’m sure there is not much missing and I don’t want to lose the layout of this theme for my post. Based on your experience and all the cases you have encountered, I’m open to your suggestion?

Merry X-mas

[Fernando]

Hi Nicolas,

1. You can set the Categories to display on an archive page through Appearance > Customize > Additional CSS.

Alternatively, you can try adding this snippet:

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'categories',
    );
} );

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

Another way to do it is through a Block Element – Content Template: https://docs.generatepress.com/article/block-element-content-template/

2. For reference, can you provide a link to the site in question? We’ll check the number of menu items you have and how long your articles are, and assess afterward.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Nicolas]

Hi Fernando,

Sorry but I’m very confused with your reply. I try adding the snippet to my CSS but I can’t understand what it is supposed to do? I noticed no change on my site.

In my previous message, I shared what I want to accomplish, both in terms of functionality and layout using the Category “tags”.
I shared my site’s URL in the private info field.

Thanks for your help

[Fernando]

That’s a PHP snippet. It’s added through the ways mentioned in the link I shared above. It wouldn’t work if it’s added in Additional CSS.

In any case, since you’re using a Content Template, that wouldn’t work.

To clarify, are you wanting to add the category terms of a Post in the BLog and Archive pages?

[Nicolas]

Ok.

TO try to recap my need, I want indeed to get the Category terms to be displayed:

1. Can you see the Category term SPORTS on this page
I want it to be displayed above or below my Post and Page titles (my blog URL shared in Private Info).

2. Can you also see here how and where the same Category term appears on the Blog and Archives pages?
I want the same on my site.

– Just above

[Fernando]

I see. Let’s address the ones for the Blog and Archive pages first.

Since you’re using a Block Element – Content Template, you’ll need to grab the terms through a GB Headline Block.

Example: https://share.getcloudapp.com/7Kujob1D

Insert it somewhere in your Content Template

[Nicolas]

Here is what I did.

1. Do ou think it looks nice and adds value or should I just remove this? I’m talking about the grey rectangle with the Category terms below the feature images?
I’m not sure how Google appreciate such links creating new, additional parsing routes to a single post? I hope it won’t damage my site ranking.

2. Also, can you see how the rectangle for COMMUNICATION is not perfectly aligned with the image above? Why that since there is no issue with the other images on the same page? See URL in PI field.

3. How can I change the color of the grey rectangle and orange text when hovering it?

[Fernando]

1. This is preferential. Personally, I think it’s alright. SEO-wise, category links should be alright as well.
2. Try setting the image size Background image of the Container Block to cover.
3. There’s a hover color background setting for Headlines: https://docs.generateblocks.com/article/headline-overview/#colors

[Nicolas]

1. Thank you for appreciation.

2. Fixed. I manually inserted the term “cover” in the SIZE field.

3. I did not succeed doing what I described with the Headlines, so I replaced them with a Button that I customized. Still, I’m not so happy with the way the hovering behaves. Can you please check on your side? As you can see, it is VERY sensitive and in some positions, even if the cursor is on the button, the hovering effect won’t be triggered. There seems to be a conflict with the overval effect on the feature image? Not sure how we can improve this? I even added a top margin to the button to make it more precise for people willing to click the button.

[Ying]

Hi there,

For #3 issue, the container above the button has too big of bottom padding which covers the button:
https://www.screencast.com/t/udDLhWfqeS0t

Try to reduce or remove the bottom padding of the container.

[Nicolas]

Hi there,

Are we talking about the “300” bottom padding here?
I cannot reduce the bootom padding.I tried to put 290 instead of 300 but it cuts the feature image. I need the feature image to be displayed fully.

Can you advise?

Also how can I see the styles on my GUI like you do on the link you provided above?

[Fernando]

You should be able to remove that.

You have a custom code on the front end to resize the image to the size you want.

The issue will only occur on the backend. But if you want it to appear on the backend still, you can add this CSS code instead:

.dynamic-content-template > .gb-container > .gb-inside-container {
    padding-bottom: 0;
}

[Nicolas]

Hi there,

I am totally confused by your message and I don’t understand what you mean by font end and back end regarding my blog?
I mean, I only see what I see.

So I added the CSS code and it fixed the issue, but…
…I’m a bit scared by you saying “The issue will only occur on the backend.”
Do you mean there is still an issue even with the code added? How can I fix thix?

Thanks

[Ying]

The front end is what the website looks like, and the back end is the page editor.

What the front end looks like depends on the content & style added in the editor + custom CSS.

As the page editor doesn’t load custom CSS, so it looks not right in the editor, but it’s not an issue, it’s very normal.

[Nicolas]

Ok Ying, you made this very clear for me now.

I still have an issue. My archives and blog pages look good on desktop and smartphones. Their layout matches and is consistent.

But look at what happens on my iPad:
a/ Can you see how the top menu does not display well?
– Why is it on 2 rows and not on a single row?
– Why are the burger menu and search icon not align?
b/ And worse, look at the blog posts compared to the desktop and smartphone versions!

How to fix this?

Thank you.

[Author]

Posts