Change footer / bottom color

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
tompasworld
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Wed Jun 14, 2006 10:20 am

Change footer / bottom color

Post by tompasworld » Thu Oct 21, 2021 7:02 am

Hi,

I wrote this in the swedish forum first, but no luck so trying here.
I´ve had a "can´t see the forest for all the trees" for about a week now and nothing I do seems to do the trick.
What do I need to add / change in my created user.css or template.css to make the *blue/purple footer / bottom part to become white instead?
Thanks to anyone who can help me get out of the forest. :)
Joomlafooter.jpg
You do not have the required permissions to view the files attached to this post.

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 310
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Change footer / bottom color

Post by ghazal » Thu Oct 21, 2021 9:20 am

* Use Firefox/Chrome feature -> Inspect, if you don't already.
* Don't modify template.css. Anyway, it is actually template.min.css which is in use.
* Create a user.css file is the way to go.

I guess this is what you want to change:

Code: Select all

.footer {
    margin-top: 1em;
    color: #fff;
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}

Code: Select all

/* set background-image to none */
background-image: none;
But you will loose the gradient effect.

Then, either you learn CSS Custom Properties (or CSS Variables), or you set whatever color you wish to :

Code: Select all

background-color: var(--cassiopeia-color-primary);

Code: Select all

background-color: #123456;

tompasworld
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Wed Jun 14, 2006 10:20 am

Re: Change footer / bottom color

Post by tompasworld » Thu Oct 21, 2021 1:29 pm

Thank you, kind Sir. That worked like a charm and I am out of the forest (for now). :)

northbra
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Thu Apr 16, 2015 4:52 pm

Re: Change footer / bottom color

Post by northbra » Tue Oct 26, 2021 2:04 pm

I would like to have both a look and title, how do I do this


Post Reply

Return to “Templates for Joomla! 4.x”