Archived topic
Problem with menu author archive page
13 replies · Started by Tan on May 12, 2021
Viewing posts 1–14 of 14
My menu author archive don't show full-width. How could I fix this?
Problem is here: https://share.getcloudapp.com/6qu8lgz2
Hi there,
A plugin seems to be setting a width on the <body> tag.
Can you try disabling ALL plugins except GP Premium to check for any plugin conflict?
Let us know.
I have found. It's because of the simple CSS plugin.
But I can't figure out exactly which line of code is causing the problem. This is my CSS code:
.site-logo img {
width: 250px;
height: 41px;
}
strong {
font-weight: 700;
}
figcaption {
font-size: 15px;
text-align: center;
font-style: italic;
}
@media (min-width:769px) {
body:not(.single):not(.page) .inside-article,
body:not(.single):not(.page) .sidebar {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(200,200,200, 0.5);
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
h2.widget-title {
margin: -20px -15px 15px -15px;
padding: 15px;
background-color: #f3f3f3;
border-top: 1px solid #e0dddd;
border-bottom: 1px solid #e0dddd;
text-transform: capitalize;
font-size: 18px;
}
@media (max-width: 768px) {
.entry-meta {
font-size: 75%;
margin-top: 1.2em;
margin-bottom: 1.1em;
line-height: 1.5em;
}
}
.post-image-above-header .inside-article div.featured-image, .post-image-above-header .inside-article div.post-image {
margin-top: -20px;
margin-left: -40px;
margin-right: -40px;
}
body:not(.single) .sidebar {
margin-top: 50px;
}
body:not(.blog) .sidebar {
margin-top: 10px;
}
.separate-containers .site-main {
margin-top: 10px;
}
.posted-on {
border-left: 1px solid #ddd;
padding-left: 10px;
margin-left: 10px;
}
footer.entry-meta{
display: none;
}
.hero-category a, .post-nav, .entry-meta .cat-links a {
background-color: #f15025;
color: #ffffff !important;
margin-left: 10px;
}
body:not(.single) .entry-meta {
font-size: 70%;
margin-bottom: 1.5em;
margin-left: -40px;
margin-right: -40px;
margin-top: 25px;
padding-top: 10px;
padding-bottom:10px;
padding-left: 40px;
background-color: #f3f3f3;
border-top: 1px solid #e0dddd;
border-bottom: 1px solid #e0dddd;
}
.menu-learn-more-container {
padding-bottom: 10px;
width: 45%;
margin: 0 auto;
text-align: center;
border-bottom: 1px solid #e0dddd;
}
.page-hero h1 {
margin-top: 20px;
margin-bottom: 25px;
}
.author vcard img {
width: 35px;
height: 35px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}
.author, .page-hero-gravatar {
display: inline-block;
}
.single .entry-date {
border-left: 2px solid #fff;
border-right: 2px solid #fff;
padding-left: 14px;
padding-right: 14px;
margin-left: 10px;
margin-right: 10px;
}
.page-hero-content {
margin-top: 20px;
}
.comments-area,
.author-box {
max-width: 800px; /* Adjust to suit */
margin-left: auto;
margin-right: auto;
}
@media (min-width: 769px) {
.comment-form #author,
.comment-form #email {
width: 48%;
float: left;
}
.comment-form #email {
float: right;
}
.comment-form #url {
width: 100%;
}
}
.message-below-content {
font-size: 14px;
margin-bottom: 20px;
}
.comment-reply-title {
color: #f15025;
}
body:not(.page) .king img {
border: none !important;
box-shadow: none !important;
}
body:not(.page) .wp-block-image img{
border: 1px solid #d4d4d4;
box-shadow: 10px 10px 0px #d4d4d4;
margin-bottom: 30px;
}
.generate-back-to-top,
.generate-back-to-top:visited {
bottom: 80px;
}
.inside-article p a:link,
.inside-article p a:hover,
.inside-article p a:active,
.inside-article p a:visited {
text-decoration: underline;
}
@media (max-width: 768px) {
.main-navigation button.menu-toggle {
display: block !important;
}
}
/* nav links effect */
@media (min-width:769px) {
.main-navigation .menu > .menu-item:not(.nav-button) > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 0px !important;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 4px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item:not(.nav-button).current-menu-item > a::after,
.main-navigation .menu > .menu-item:not(.nav-button) > a:hover::after {
width: 70%;
}
}
@media (min-width:768px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f15025;
color: #ffffff;
line-height: 45px;
margin-top: 12px;
border-radius: 3px;
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a:hover {
background-color: #c6401c;
color: #ffffff;
}
.main-navigation .main-nav ul li.nav-button a:active {
background-color: #ffffff;
}
}
.ava-author-box img{
border-radius: 100%;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,.20);
}
.entry-content ul li,
.entry-content ol li {
margin-bottom: 15px;
}
.entry-content a:not(.read-more):not(.button):not(.gb-button):hover {
text-decoration: underline;
}
ol.pk-toc {
list-style: none;
counter-reset: custom-counter;
margin-left: 1.5em;
}
ol.pk-toc li {
counter-increment: custom-counter;
line-height: 1.5em;
font-size: 16px;
}
ol.pk-toc li::before {
display: inline-block;
content: counter(custom-counter);
font-weight: 600;
border-radius: 50%;
margin-right: 20px;
width: 28px;
height: 28px;
text-align: center;
color: #495057; /* Counter text color */
background-color: #ced4da; /* Counter background color */
}
.shared-counts-wrap.shortcode.style-fancy .shared-counts-button:not(.included_total) {
background-color: #f15025 !important;
}
.shared-counts-wrap.shortcode.style-fancy .shared-counts-button:not(.included_total):hover {
background-color: #c44126 !important;
}
.shared-counts-wrap.shortcode.style-buttons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.shared-counts-wrap.shortcode.style-buttons .shared-counts-button included_total {
color: #999999;
}
.shared-counts-wrap.shortcode.style-buttons .shared-counts-button:not(.included_total) {
background-color: #f15025 !important;
border-radius: 4px !important;
}
.shared-counts-wrap.shortcode.style-buttons .shared-counts-button:not(.included_total):hover {
background-color: #c44126 !important;
}
.shared-counts-wrap.shortcode.style-buttons .shared-counts-label {
font-size: 17px;
margin-top: 2px;
margin-left: 3px;
}
.comment-form-cookies-consent {
font-size:15px;
}
.skin {
margin-bottom: 30px;
}
.rank-math-block {
background: #f5f5f5;
background-color: #f5f5f5;
border-radius: 5px;
box-sizing: border-box;
color: #2a2b2a;
font-size: 18px;
line-height: 1.4em;
margin-bottom: 1rem;
padding: 15px;
}
.rank-math-list-item {
background: #ffffff;
background-color: #ffffff;
border-radius: 5px;
box-shadow: #d1d8dd 0px 0px 10px, #ffffff 0px 0px 40px;
box-sizing: border-box;
color: #2a2b2a;
font-size: 18px;
line-height: 1.4em;
margin-bottom: 1rem;
padding: 15px 15px 20px;
}
.rank-math-question {
bottom: 0px;
box-sizing: border-box;
clear: both;
color: #f15025;
font-size: 1.4rem;
font-weight: 700;
left: 0px;
line-height: 33.6px;
margin-bottom: 0.825rem;
margin-top: 0px;
padding-bottom: 0.825rem;
padding-right: 40px;
padding-top: 0px;
position: relative;
right: 0px;
top: 0px;
border-bottom: 1px solid #F0F4F8;
}
.rank-math-question::after {
background: #f5f5f5;
border-radius: 40px;
color: #d9e2ec;
content: "?";
line-height: 30px;
position: absolute;
right: 0px;
text-align: center;
top: 0px;
width: 30px;
}
@media (prefers-reduced-motion: reduce) {
.rank-math-question {
animation-duration: 0s !important;
transition-duration: 0s !important;
}
}
body:not(.single) .wp-block-image figcaption {
display: none !important;
}
blockquote {
margin-left: 30px;
border-left: 5px solid #f15025 ;
}
blockquote p{
margin-bottom: 0.7em;
}
blockquote cite{
font-size: 16px;
color: #333333;
margin-top: 1em;
}
Can you help me?
Can you try removing this?
.author, .page-hero-gravatar {
display: inline-block;
}Yes It worked. Thank you so much, Elvin!
I also want 2 adjustments with 2 gravatars author on this page.
Increase size of this one: https://share.getcloudapp.com/Jru4RdnW
Decrease size of this one: https://share.getcloudapp.com/Blu4wrdp
I try this code but it doesn't work :(:
.entry-meta .avatar avatar-96 photo {
width: 35px !important;
height: 35px !important;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}
Can you help me?
Hi there,
try this:
/* archive title avatar */
.author .page-header .avatar {
width: 90px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}
/* entry meta avatar */
.entry-meta .author img {
width: 35px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}Thank you David. I got it :D
But the author avatar is very blurry. Is there a way to make it more detailed?
Leo provides a PHP Snippet for that here:
https://generatepress.com/forums/topic/change-avatar-size-on-author-page/#post-1540351
In that code you will see this line:
get_avatar( get_the_author_meta( 'ID' ), 100 ),
the 100 is the size in px, the default is 50 change that value to the size you require.
Thank you so much, David. You're amazing!
The last thing, I want to align center page author name, author avatar, author description and page navigation. What should I do?
The author avatar - should that be above the author title ? Or to the left of it ( as it is now ).
Above is the best option :)
This CSS:
.nav-links,
.author .page-header {
text-align: center;
}
.author .page-header .page-title {
display: flex;
align-items: center;
}
.author .page-header .page-title {
flex-direction: column;
}
.author .page-header .page-title img {
margin-right: 0;
}And optional to make the Author header contained like the content:
.author .page-header {
max-width: 800px;
margin: auto
}Thank you, David. You're amazing! :)
Glad to be of help
This archived topic is closed to new replies.
