- This topic has 17 replies, 3 voices, and was last updated 4 years ago by
Leo.
-
AuthorPosts
-
February 8, 2017 at 9:01 am #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.94February 8, 2017 at 10:29 am #276185Tom
Lead DeveloperLead DeveloperYou 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 15, 2017 at 10:17 am #279213johnno43
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
February 15, 2017 at 11:05 am #279240Tom
Lead DeveloperLead DeveloperI 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/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 20, 2017 at 12:58 am #281203johnno43
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 helpsMany thanks
JohnFebruary 20, 2017 at 6:28 am #281341Leo
StaffCustomer SupportHi John,
Is the Navigation Location set to either Float Left or Float Right in Customizer > Layout > Primary Navigation?
Let us know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 20, 2017 at 6:41 am #281359johnno43
Yes it is I never thought about that
February 20, 2017 at 6:58 am #281372Leo
StaffCustomer SupportJust 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 20, 2017 at 7:09 am #281375johnno43
No I put it in wp_head
I’m assuming it’s something I’m doing wrong rather than Tom’s codeFebruary 20, 2017 at 7:11 am #281377Leo
StaffCustomer SupportTry adding it to Before Header Content hook and it should work π
Let us know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 20, 2017 at 7:17 am #281378johnno43
Thanks I will try later as I’m out of the office at the moment
February 20, 2017 at 7:18 am #281381Leo
StaffCustomer SupportSounds good. Then you can change the background color in Customizer > Colors > Header > Background π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 21, 2017 at 6:30 am #281866johnno43
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
JohnFebruary 21, 2017 at 7:39 am #281904Leo
StaffCustomer SupportHi 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 21, 2017 at 8:33 am #281941johnno43
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
-
AuthorPosts
- You must be logged in to reply to this topic.