Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to change Header and Footer background color.

Featured Lock Resolved Issue
Hi guys,

Just been trying to change the background color of the whole template - Header and Footer from:
rgba(33, 34, 63, 0.95)
to
rgba(8, 70, 118, 0.99)

I added this into the templates 'Helix' Custom code section, but nothing changed.

I then tried editing it directly in the templates.css file which worked, but when I clear the cache, it changes back to the original colour...

Can you please give me the correct code, plus where should I add this edit in to the template?

Thanks
Michael

28 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
I added a short guide about Header bg color customization to Indigo template.
https://www.joomshaper.com/documentation/joomla-templates/indigo#documentation-heading-1_12

Paul Frankowski - Staff

More than a month ago #Permalink
Hi Mike,
Template Options > Layout builder > Bottom > Row options > Style > Background Color


here.png

Attachments (1)

  • here.png
    here.png 122.1 KB

Paul Frankowski - Staff

More than a month ago #Permalink
about the header, probably you have to add "!important" for your custom CSS code.

Michael

More than a month ago #Permalink
Thanks Paul,

Perfect fix for the FOOTER.... :)

But how do I do the same for the HEADER? (where the menus are?)
This drops down as you scroll down.

Any ideas?

Cheers,

Michael

Paul Frankowski - Staff

More than a month ago #Permalink
Code Inspector (from your browser) + Custom CSS + Coffee = done

Michael

More than a month ago #Permalink
Thanks Paul,
but my question remains sorry... :(

I added this into the templates 'Helix' Custom code section, but nothing changed.
I then tried editing it directly in the templates.css file which worked, but when I clear the cache, it changes back to the original colour...


I have found the line of code that needs to be changed (line 325 on the templates.css) :

#sp-header.header-sticky {
position: fixed;
z-index: 9999;
background: rgba(33, 34, 63, 0.95);
padding-bottom: 15px;
height: auto;
transition: 0.3s;
}


So can you please give me a link directing me on how SP3 create / add custom.css

Cheers,

Michael

Paul Frankowski - Staff

More than a month ago #Permalink
Mike, please ... SPPB has documentation and there I explained how to use custom CSS code
p.s.
Custom.css file is feature of Helix template only


css-page-front-end.png

Attachments (1)

  • css-page-front-end.png
    css-page-front-end.png 28.4 KB

PhoenixGB

More than a month ago #Permalink
Helix Ultimate just doesn't work! I shouldn't be needing to add custom css to every damn page, what is the point of having a custom colors section in the Helix settings if a) they don't work and b) they are overwritten in the layout section.

Even adding custom css to the custom css section of Helix is hit and miss and adding !important doesn't make any difference in some cases.Why can't u guys just admit that it is a flawed product and look at fixing the issues we have, it's driving me mad trying to find where u have hidden css

Michael

More than a month ago #Permalink
Fair Call, I agree !

I added a custom.css file, with the change, but it still didn't.
I contacted Toufiq via PM, and he was excellent... as he logged in to the back end and fixed it straight away, but without explaining where he did this.

Seems silly that the Footer Color edit is Global... and the Header is NOT?

Paul Frankowski - Staff

More than a month ago #Permalink
Some areas in some templates are defined in template styles, so it requests more effort to change them (colors included).
In free moment I will update template manual about that.

Michael

More than a month ago #Permalink
Thanks Paul. Look forward to that ! :D

Sfiso

More than a month ago #Permalink
I have the same problem. How do i fix this? Im on local host

Michael

More than a month ago #Permalink
As Paul mentioned (See his attached image), you have to go to 'each' page and add your required css to the 'PAGE CSS' tab.

eg,

#sp-header.header-sticky {
position: fixed;
z-index: 9999;
background: rgba(33, 34, 63, 0.95);
padding-bottom: 15px;
height: auto;
transition: 0.3s;}


Very long winded fix... Sorry I can't be of more help.

Michael

More than a month ago #Permalink
Thanks Paul.

But just to be clear for Sfiso's sake, ... these .css edits still need to be added to every page?

You suggested that you may add a global feature to the templates style... (like you can with editing the footer).
Are you still think about doing this?

Thanks

Michael

Paul Frankowski - Staff

More than a month ago #Permalink
Header, unfortunately, yes from CSS in that template
Footer and Bottom from Helix Options

---
I hope in upcoming Helix updates we will all suggestions which are on the wish-list.

Michael

More than a month ago #Permalink
Thanks for the reply

Michael

3 weeks ago #Permalink
Hi Paul,

Hope you are well. I'm just about to send a site live and have added the CSS to all the SP page, but there is one page (NEW / BLOG) where I'm not sure how to add the CSS, as it's not one of the SP pages.

When you scroll down the page on this page, it has the PURPLE color from the original template, but I need this to also be the new BLUE color I added.


#sp-header.header-sticky {
position: fixed;
z-index: 9999;
background: rgba(8, 70, 118, 0.99);
padding-bottom: 15px;
height: auto;
transition: 0.3s;
}


Here's
Header Color is incorrect.

Thank you in advance.

Attachments (1)

  • header_color.jpg
    header_color.jpg 46.8 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
In your CSS code on WWW is a mistake


background: rgba(7, 70, 117, 0.70) padding-bottom: 15px;


do you see it on "foto_2961_2019.jpg"


please add ";" between

Attachments (1)

  • foto_2961_2019.jpg
    foto_2961_2019.jpg 151.5 KB

Michael

3 weeks ago #Permalink
Hi Paul,

Sorry, but I'm little confused on where you actual place / 'ADD' the CSS for this page.
It's a SP Simple Portfolio for that PAGE (Blog/News), and not SPPB

I understand where you place the CSS for SPPB page
SPPB.png

But where do you place it for SP Simple Portfolio???

Sorry if I didn't explain myself previously.

Cheers

Attachments (1)

  • SPPB.png
    SPPB.png 28.4 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
Michael I will repeat this one again, the last one

foto_2962_2019.jpg

this is YOUR code, look deeper what is wrong (!?)
Small mistake. Not mine.

I wrote 40 min ago. Probably you added inside Helix custom CSS.

Attachments (1)

  • foto_2962_2019.jpg
    foto_2962_2019.jpg 66.7 KB

Michael

3 weeks ago #Permalink
Hi Paul

Are you talking about the HEADER... or FOOTER?

It's the header I'm trying to fix.

I didn't ADD any CSS for this page... that's why I'm asking you?
That code you READ in the development tool... is the templates original code (bootstrap).
As I siad, it's a SP Simple Portfolio PAGE... NOT a SPPB... so I haven't added any CSS, like i have on all the other pages (which you see are working fine) .... and I can't find in the SP Simple Portfolio Component or MENU item for this page, ... where I can ADD CSS.

Ok... I'll have a look in the inside Helix custom CSS... to see if that's effecting it then.

Thanks in advance.

Paul Frankowski - Staff

3 weeks ago #Permalink
Do we talk about pipelinesuppliesaustralia.com.au ?
If yes, who added it?
This is your website, not mine. Do you have control over it?

You wrote
foto_2963_2019.jpg

Sorry, but I am confused. And you have to be tired.

Attachments (1)

  • foto_2963_2019.jpg
    foto_2963_2019.jpg 106.3 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
I can fix a purple-blue bg color issue for ONE DOLLAR to prove you one thing.

Michael

3 weeks ago #Permalink
Cool !!! Yes the CSS was in the Helix custom CSS, which fixed it !!!

Thanks :D

Michael

3 weeks ago #Permalink
I can still send the one dollar as a thank you if you like !!!! :p

Paul Frankowski - Staff

3 weeks ago #Permalink
You have no other choice, it's a matter of honor.
Almost like here: https://youtu.be/NPMQ2W--vwI?t=28

Michael

3 weeks ago #Permalink
Hahaha... blast from the past... funny movie !


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Sifat

Sifat

Total Accepted Answers: 61
Toufiq

Toufiq

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 14
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303042

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us