[Resolved] blog post author layout

[Jiren]

Hi,

It is hard to describe. I have taken a picture and made a circle around it. I want to have the same layout as that.

picture

In the link below for admins you see my website layout for that area looks completely different.

[Leo]

Hi there,

Looks quite similar to this:
https://docs.generatepress.com/article/entry-meta-style/#example-1

[Jiren]

Okay I did use the link. Now it looks good, but I muss these things.

1.two lines: above and below the area
2.Also add this text right below it like in the link I provided “IS READER-SUPPORTED. WHEN YOU BUY THROUGH OUR LINKS, WE MAY EARN AN AFFILIATE COMMISSION.”
3.how to make the text a little smaller on mobile devices.

[Leo]

Try adding the note using the after_entry_header hook with a hook element:
https://docs.generatepress.com/article/hooks-element-overview/

Once you do that, link me to the page in question.

Let me know 🙂

[Jiren]

Done, the link for admins is the actual post for test purposes.

[Leo]

Try this CSS:

.entry-meta {
    border-top: 2px solid #000;
    padding-top: 5px;
}
.message {
    border-bottom: 2px solid #000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Jiren]

Thank you Leo. It looks awesome on desktop!

But I need 1 more thing done on everything between the two lines.

1.the font size, how can I change that to be the same on mobile and desktop?

Edit:

Solved it with this code:

.message {
      font-size: 12px;
}

[Jiren]

Another problem. How can I remove the border top from comment section?

It seems like this line is the problem.

.entry-meta {
    border-top: 2px solid #000;
    padding-top: 5px;
}

[David]

Hi there,

in Customizer > Additional CSS you will see this:

.inside-article,
.sidebar .widget,
.comments-area {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

Change it to:

.sidebar .widget {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

[Jiren]

Did not work, still same.

[David]

You need to DELTEE this CSS from the Customizer > Additional CSS:

.inside-article,
.sidebar .widget,
.comments-area {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

Once done – make sure the Customizer changes are Published. And then clear your browser cache.

[Jiren]

Did that again, no difference.

[Jiren]

How can I modify this to exclude everything depsite posts and pages?

.entry-meta {
    border-top: 2px solid #000;
    padding-top: 5px;
}

[Leo]

Not sure if I understand.

.entry-meta should only appear in posts by default.

Can you guide me to the page in question?

[Jiren]

Leo, the link in my first post which admins only can see is the actual post I am talking about.

Scroll down to comment section, the author is underlined. When I remove this code:

.entry-meta {
    border-top: 2px solid #000;
    padding-top: 5px;
}

The author in the comment section is not underlined anymore, so I guess it has something to do with that.

[Author]

Posts