- This topic has 17 replies, 4 voices, and was last updated 6 days, 11 hours ago by
David.
-
AuthorPosts
-
February 22, 2021 at 10:53 pm #1668696
Nikos
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 #1668832David
StaffCustomer 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 }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 23, 2021 at 5:36 am #1669023Nikos
very 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 #1669037David
StaffCustomer 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 ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 23, 2021 at 6:11 am #1669062Nikos
i 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 #1669291David
StaffCustomer 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 23, 2021 at 8:55 am #1669438Nikos
i 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 #1669507Ying
StaffCustomer 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 #1669609Nikos
hi 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 #1669663Ying
StaffCustomer SupportI hope this is helpful:
https://www.screencast.com/t/lMDwIKYNfjI
https://www.ascii-code.com/February 23, 2021 at 1:45 pm #1669760Nikos
yes 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 #1669799Ying
StaffCustomer 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 #1669866Nikos
yes 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 #1669920Elvin
StaffCustomer 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; }
A wise man once said:
"Have you cleared your cache?"February 24, 2021 at 1:50 am #1670326Nikos
thanks 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.