Forum
- Home
- Forum
- Template Support
- Premium Joomla Templates
- Procar - changing colour of header
Important - Hands Up!
- Please ask using the account with which you made the purchase or download of our products and in its respective category.
- If you bought our products in another market, ask your questions in that market, not here.
* ADD PRODUCT NAME IN START OF SUBJET
Procar - changing colour of header
- B
- bob-dobelina New Member
- Topic Author 1 month 2 weeks ago #1
Hi
I need to change the background colour of the header (behind the menu). On your demo, you have the page title enabled on all pages, so the header background is white. However, I don't have the page title enabled so it doesn't look right. I managed to work around it in SP Pagebuilder, see here, 91.197.231.101/~knitwirespringcr/products/anti-vibration-mounts
But on the article pages such as this, 91.197.231.101/~knitwirespringcr/news I need to change it to green so it matches the SP Pagebuilder pages. Can you advise how to do this?
Regards
Bob
I need to change the background colour of the header (behind the menu). On your demo, you have the page title enabled on all pages, so the header background is white. However, I don't have the page title enabled so it doesn't look right. I managed to work around it in SP Pagebuilder, see here, 91.197.231.101/~knitwirespringcr/products/anti-vibration-mounts
But on the article pages such as this, 91.197.231.101/~knitwirespringcr/news I need to change it to green so it matches the SP Pagebuilder pages. Can you advise how to do this?
Regards
Bob
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 1 month 2 weeks ago #2
Hi.
For that, you don't need to create sections in SP Page Builder. You just need to disable Header Overlap in the template style you're using. To do this, go to: System >> Site Template Styles >> ut_procar - STYLE THAT YOUR ARE USING >> Template Options (green button) >> Basic >> Header >> Header Overlap and disable it.
Then, if you want the header to be green, you can change the header colors by editing the preset you're using or in Custom Style. Remember to enable SCSS compilation and disable it when you're finished.
Regards.
For that, you don't need to create sections in SP Page Builder. You just need to disable Header Overlap in the template style you're using. To do this, go to: System >> Site Template Styles >> ut_procar - STYLE THAT YOUR ARE USING >> Template Options (green button) >> Basic >> Header >> Header Overlap and disable it.
Then, if you want the header to be green, you can change the header colors by editing the preset you're using or in Custom Style. Remember to enable SCSS compilation and disable it when you're finished.
Regards.
Please Log in or Create an account to join the conversation.
- B
- bob-dobelina New Member
- Topic Author 1 month 2 weeks ago #3
Hi
The problem with this solution, is that it means my menu header is then always one colour. I want it to be green but then change to white when scrolling, as per this page, 91.197.231.101/~knitwirespringcr/products/anti-vibration-mounts
It also means that the menu header is white on the home page but I want it to be semi transparent over the large image, as it is now, 91.197.231.101/~knitwirespringcr/
Let me know if this is not possible, I can just create my pages in SP pagebuilder.
Thanks
The problem with this solution, is that it means my menu header is then always one colour. I want it to be green but then change to white when scrolling, as per this page, 91.197.231.101/~knitwirespringcr/products/anti-vibration-mounts
It also means that the menu header is white on the home page but I want it to be semi transparent over the large image, as it is now, 91.197.231.101/~knitwirespringcr/
Let me know if this is not possible, I can just create my pages in SP pagebuilder.
Thanks
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 1 month 2 weeks ago #4
For the following solution, we'll do the following:
1. Edit your Home menu item and in the tab Page Display >> Page Class field, add the class no-add-title (without the initial dot, exactly as I'm showing it to you).
2. In templates/ut_procar/css/custom.css, add the following:
With this, you no longer need to add sections in SP Page Builder, and it also works for pages of any other component. Additionally, the CSS variable gets the header height for all devices.
TIP: Add any other customizations to custom.css.
Regards
1. Edit your Home menu item and in the tab Page Display >> Page Class field, add the class no-add-title (without the initial dot, exactly as I'm showing it to you).
2. In templates/ut_procar/css/custom.css, add the following:
Code:
body:not(.no-add-title) #sp-titles{min-height: var(--header_height); background: #6a9f3d;}
With this, you no longer need to add sections in SP Page Builder, and it also works for pages of any other component. Additionally, the CSS variable gets the header height for all devices.
TIP: Add any other customizations to custom.css.
Regards
Please Log in or Create an account to join the conversation.
- B
- bob-dobelina New Member
- Topic Author 1 month 1 week ago #5
That is great thank you, works perfectly.
Please Log in or Create an account to join the conversation.
Secure Payment
Use your cards with Paypal.
Â
Â
Â
Â
Â
Â
Â
Â