Archived topic
blog post author layout
18 replies · Started by Jiren on April 22, 2020
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.
In the link below for admins you see my website layout for that area looks completely different.
Hi there,
Looks quite similar to this:
https://docs.generatepress.com/article/entry-meta-style/#example-1
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.
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 :)
Done, the link for admins is the actual post for test purposes.
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/
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;
}
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;
}
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);
}
Did not work, still same.
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.
Did that again, no difference.
How can I modify this to exclude everything depsite posts and pages?
.entry-meta {
border-top: 2px solid #000;
padding-top: 5px;
}
Not sure if I understand.
.entry-meta should only appear in posts by default.
Can you guide me to the page in question?
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.