- This topic has 17 replies, 4 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
February 22, 2021 at 10:53 pm #1668696Nikos
hi,
i would like to ask, how can i customize the author name, when we click on it and we go to the archive page of his.
on the top, appears the name, with black font. i would like to change the font, the size, the color so it will differ from the posts underneath.
i have found some topics related but because i didn’t understand 100% i thought to ask here first so i will not make any mistake π
maybe we can do it also from the colors in the wordpress customizations but again there were many options and i didn’t want to touch anything that i don’t understand what they do.
thank you !!February 23, 2021 at 2:20 am #1668832DavidStaffCustomer SupportHi there,
you can use some CSS to style the page-header container and the font – here for example:
/* Set header background and text colors with padding */ .author .page-header { padding: 10px; background: #000; margin-bottom: 80px; color: #fff; } /* Set font size and weight of author H1 */ .author .page-header h1 { font-size: 80px; font-weight: 700 }
February 23, 2021 at 5:36 am #1669023Nikosvery good!!!! π
but i still face a little problem: if i understood correctly, the font type will be h1. i changed it to h6.
then i went to customizing-typography and i changed the default font there to a font i like.
but whatever font i choose for h6, i always get the same result (you can see it at the example i sent before)
did i forget or didn’t notice something? π
thank youps. i choose for h6 one of the google fonts
February 23, 2021 at 5:50 am #1669037DavidStaffCustomer SupportThe archive title is always a H1 – theres no option in the theme to change that to a different H* – that would require code…. so i am not sure what you’re changing ?
February 23, 2021 at 6:11 am #1669062Nikosi didn’t know that π so is not possible to change the font of the author in the top of the archive?
thank youFebruary 23, 2021 at 7:10 am #1669291DavidStaffCustomer SupportYou can, if you have selected the font you want to use for the H6 then GP will load that font.
You can then update the second CSS rule to use that font:.author .page-header h1 { font-size: 80px; font-weight: 700 font-family: "your-font-name", serif; }
February 23, 2021 at 8:55 am #1669438Nikosi changed the code to the absolute necessary:
.author .page-header h1 {
color: #2D6DF4;
font-size: 50px;
font-weight: 700
font-family: “Pacifico”, serif;
}
but nothing changes in the font family
(if i change the h1 font, in customizer, typography, i can get what i want-the problem is that all the h1 change π )
so in our example i would like the name of the authors to be written with pacifico font
thank you !!February 23, 2021 at 9:57 am #1669507YingStaffCustomer SupportHi Nikos,
The issue that
font-family
doesn’t work is because you are using the wrong"
.Try to replace
β β
with" "
:
font-family: "Pacifico", serif;
Let me know π
February 23, 2021 at 11:21 am #1669609Nikoshi ying!
i just copied david’s code and paste it π i didn’t change the “”
i have an english usa keyboard. i just press shift+’ to get the ”
i don’t have any other ones.
but if you think my computer character codepage is not the right one, can you give me the ascii code of the correct ” ?
so i will type it with alt π
thank youFebruary 23, 2021 at 12:06 pm #1669663YingStaffCustomer SupportI hope this is helpful:
https://www.screencast.com/t/lMDwIKYNfjI
https://www.ascii-code.com/February 23, 2021 at 1:45 pm #1669760Nikosyes no34 π this is what i was using also π but to be double sure, i alt34ed it in both sides of pacifico fonts. the same result.
another thought. do i have pacifico google font installed? how can i check it?
or it comes together with every wordpress installation?
i decided to use this font by checking in the customizer-typography of generatepress. there are some google fonts listed. i thought they are installed in my system. or maybe they are not?
thank youFebruary 23, 2021 at 2:19 pm #1669799YingStaffCustomer SupportI checked your site again, I found this issue in format:
https://www.screencast.com/t/hfBPc7WlkCThere’s a
;
missing after700
.February 23, 2021 at 3:28 pm #1669866Nikosyes there was a missing ;
but even if i corrected the ; again i could not see the font
i … googled it and the reason was what i have written before. the font was not inside my website.
i searched in google fonts and i found the code missing (i also liked the Satisfy font more)
so the css snippet is like that:@import url(‘https://fonts.googleapis.com/css2?family=Satisfy&display=swap’);
.author .page-header h1 {
color: #2D6DF4;
font-size: 50px;
font-weight: 700;
font-family: “Satisfy”, cursive;
}
of course i don’t know if there is a safety issue or if the website breaks in case the link to fonts.googleapis.com url gets lost
thank you !!!February 23, 2021 at 4:13 pm #1669920ElvinStaffCustomer SupportHi there,
If I may suggest, try adding the font this way:
Create a Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/Set the hook to
wp_head
and set the display rule toEntire Site
.You then add this code:
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
And add your styling to Appearance > Customize > Additional CSS.
.author .page-header h1 { color: #2D6DF4; font-size: 50px; font-weight: 700; font-family: 'Satisfy', cursive; }
February 24, 2021 at 1:50 am #1670326Nikosthanks elvin !! i did it the way you said.
but this … generated 2 new questions:1. some wise men here in the forums said not to use the appearance/customize/additional css because in every update of generatepress i will lose it.
so i used the snippet plugin. it works, so it is ok yes?
(i don’t use child themes yet because even if i read the instructions in the documentation section, i didn’t understand 100% how it works)2. in the documentation i read also how to add locally a font. does it have any significant advantage over the link way?
i think i understood quiet well how to add the font locally so i could do it even if it is more complex. but only if i gain something. otherwise i am ok with your way πthank you !!
-
AuthorPosts
- You must be logged in to reply to this topic.