[Support request] author custom color, font, size

Home Forums Support author custom color, font, size

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #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 !!

    #1668832
    David
    Staff
    Customer Support

    Hi 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
    }
    #1669023
    Nikos

    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 you

    ps. i choose for h6 one of the google fonts

    #1669037
    David
    Staff
    Customer Support

    The 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 ?

    #1669062
    Nikos

    i didn’t know that πŸ™‚ so is not possible to change the font of the author in the top of the archive?
    thank you

    #1669291
    David
    Staff
    Customer Support

    You 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;
    }
    #1669438
    Nikos

    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 !!

    #1669507
    Ying
    Staff
    Customer Support

    Hi 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 πŸ™‚

    #1669609
    Nikos

    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 you

    #1669663
    Ying
    Staff
    Customer Support
    #1669760
    Nikos

    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 you

    #1669799
    Ying
    Staff
    Customer Support

    I checked your site again, I found this issue in format:
    https://www.screencast.com/t/hfBPc7WlkC

    There’s a;missing after 700.

    #1669866
    Nikos

    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 !!!

    #1669920
    Elvin
    Staff
    Customer Support

    Hi 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 to Entire 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?"

    #1670326
    Nikos

    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 !!

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.