[Resolved] Using 2 fonts in the header text

Home Forums Support Using 2 fonts in the header text

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #276134
    johnno43

    Hi There

    I have a client who wants their header text set using 2 different fonts. She has it set that way on her current website which she created with a website builder from her hosting provider. She wants the header retaining for the website im doing for her. Is there a way of achieving this without turning it into an image, which im not keen on but will use if all else fails

    GP Premium 1.2.94
    #276185
    Tom
    Lead Developer
    Lead Developer

    You would have to disable the site title in the Customizer and then add it inside GP Hooks where you can control the exact HTML output.

    Like this:

    <div class="site-branding">
        <p class="main-title"><a href="URL TO YOUR HOMEPAGE" alt="YOUR SITE TITLE">My awesome <span class="second-font">title</span></a></p>
    </div>

    Then your CSS:

    .second-font {
        font-family: Whatever;
    }
    #279213
    johnno43

    Hi There

    Thanks for the reply. I’ve not used GP hooks before so im excited to try it out. Just a few questions if you don’t mind.
    1. Does the CSS go into the GP Hooks box as well as the HTML or does that go somewhere else?
    2. I have got the Site title set inline with the menu, but when i use the GP Hook it goes above. How can i make it so it stays inline again?
    3. What code would i need to add to change the background colour to match the rest of the site?

    The site is now live at http://www.alexandrahazard-soprano.com

    John

    #279240
    Tom
    Lead Developer
    Lead Developer

    I just adjusted the HTML above so it should look identical to what you have there now.

    As for the CSS, this should help: http://docs.generatepress.com/article/adding-css/

    #281203
    johnno43

    Hi Tom
    Im still having trouble getting this to work.
    The CSS changes the second font but not in the way i want it to but the main problem is the name still appears above the menu instead of along side it. And the background needs changing to black
    At the moment im testing it on my dev site on my local machine using desktop server
    I have screenshots if that helps

    Many thanks
    John

    #281341
    Leo
    Staff
    Customer Support

    Hi John,

    Is the Navigation Location set to either Float Left or Float Right in Customizer > Layout > Primary Navigation?

    Let us know.

    #281359
    johnno43

    Yes it is I never thought about that

    #281372
    Leo
    Staff
    Customer Support

    Just trying to help 🙂

    I just tested Tom’s code and it’s working without additional code when navigation location set to float right.

    Did you add it to Before Header Content hook?

    #281375
    johnno43

    No I put it in wp_head
    I’m assuming it’s something I’m doing wrong rather than Tom’s code

    #281377
    Leo
    Staff
    Customer Support

    Try adding it to Before Header Content hook and it should work 🙂

    Let us know.

    #281378
    johnno43

    Thanks I will try later as I’m out of the office at the moment

    #281381
    Leo
    Staff
    Customer Support

    Sounds good. Then you can change the background color in Customizer > Colors > Header > Background 🙂

    #281866
    johnno43

    Hi Guys

    Just to let you know that changing the code to the before content header worked perfectly. Thank you both so much for your help.
    If i may i have another small problem now.
    I need to have 2 pages on the site with black backgrounds and the rest with white backgrounds.
    I have tried this method:
    body.page-id-xx {
    background-color: #FFFFFF;
    }
    I placed this in simple css but it didnt work. Does it need to go somewhere else or is there another way?

    Many thanks
    John

    #281904
    Leo
    Staff
    Customer Support

    Hi John,

    That code should work. Make sure the page id number is correct and the color code is changed to #000000 if you want black.

    Give it another show and let me know if it still doesn’t work?

    #281941
    johnno43

    Still not working so here is some more info.

    This is the code for the home page
    body.page-id-7 {
    background-color: #000000;
    }

    Im using Elementor page builder. I set the content colour to white in customiser for the rest of the site and its now just the home page that i want black. This is currently how it looks though

    http://www.alexandrahazard-soprano.com/

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