Footer Suffix - how to change the color

[Tom]

I have used my overrides user.css to successfully alter items on the website
The footer suffix black bar doesn't change to the colour I choose
I can change it in inspect element and achieve the colour change.
When I copy the code to my user.css file and save it nothing happens
All other minor .css changes take effect.

[burt]

What version Phoenix? <-- always supply at the very least this info when asking for help

What template?
What custom changes (if any) have you made to the template?

Does this file exist in the template you are using:
/templates/{name of template}/includes/components/footer

[Tom]

V1.0.9.6
Default template using overide to alter user.css

I have not altered the template but not sure if the Addons below have:

Google recaptcha
Recaptcha maths
Admin Left hand menu
Payment module Bank transfer
Payment Cartmart module - Paid addon - Brockley John
Shipping module Store pickup changed to collection in person
Tiny MCE text box editor for admin
Zipur Language edit tool
Canned comments

All of the addons are working as they should

[burt]

Drop a COPY of

/templates/default/includes/components/footer.php

TO

/templates/override/includes/components/footer.php

In that New file;

Change
<div class="bg-dark text-white pt-3">

To (eg)
<div class="bg-white text-dark pt-3">

[Tom]

Worked brilliantly.
Thanks for the help!

Is it possible to change the :root.scss colors in the .css?

[burt]

To keep things simple as most of our users are not technical, we don't mess about with SCSS and the like. Therefore the colours you can use are bg-* colours here;

https://getbootstrap.com/docs/4.6/utili ... ound-color

You can add in your own;

<div class="bg-fish text-dark pt-3">

and in stylesheet;

.bg-fish {
background: salmon !important;
}

But we advise to stick with the colours that Bootstrap provide as that is (a) easier and (b) does not go wrong with accessibility and (c) is easier for us to give support where needed.

But, more or less, anyone with an eye for colours/design can pretty much do anything they want to in Phoenix, there is no limit. If you come across a bottleneck in design or code just let us know and we are (usually) receptive to changing it so the bottleneck disappears.

[heatherbell]

The footer suffix black bar doesn't change to the colour I choose
I can change it in inspect element and achieve the colour change.
When I copy the code to my user.css file and save it nothing happens

Would help if you'd told what code you used
In any case, a quick tutorial on how we'd do it (but there is more than one way).
Guess you were using your browser Developers Tools to inspect.
You would see something in the top panel like:

Screenshot 2024-09-30 114418.png

Note the element structure, indicated by the indents, showing that the div is inside a <footer> element.

and in the bottom panel like:

Screenshot 2024-09-30 114531.png

Note the style showing background-color. This means a style of background-color with a value of #343a40 is targeted to elements assigned with the class bg-dark. Also note the !important which mean it will take importance over another similar set style.

Let's illustrate this by saving in the template /static/user.css file:

Code: Select all

.bg-dark {background-color: red;

nothing will change and this is shown in Dev Tools:

Screenshot 2024-09-30 115505.png

See it struck out because the existing style has importance.

Let's edit the user.css to:

Code: Select all

    .bg-dark {background-color: red!important;

It changes and the success is shown in Dev Tools:

Screenshot 2024-09-30 115726.png

However, what has been done has changed background-color to red for every element that has the class bg-dark throughout the site. OK if that's what desired but better to target with greater accuracy.
Already noted that the div is inside a <footer> element.
There's only 1 <footer> element on the site so let's specifically target elements that have class bg-dark but only if they are inside a <footer> element.
Let's edit the user.css to:

Code: Select all

  footer .bg-dark {background-color: red!important;

Note the space between footer and .bg-dark which means target elements that have class bg-dark that are inside a <footer> element.
It changes and the success is shown in Dev Tools:

Screenshot 2024-09-30 120619.png

Read more:
https://phoenixcart.org/phoenixcartwiki ... _and_Color
As well as the resource links on that page.

[14Steve14]

Just remember that if you change bg-dark, and any other area of your css, to another colour it will also change wherever bg-dark is used throughout the rest of the site, so don't just check the change on the one page. Look at other pages on the site to see how the colour change affects other areas. You may be surprised. Sometimes to get the effect you need you may have to create your own bg-something.

[Tom]

To keep things simple as most of our users are not technical, we don't mess about with SCSS and the like. Therefore the colours you can use are bg-* colours here;

https://getbootstrap.com/docs/4.6/utili ... ound-color

Point taken as I class myself as within that category and will leave the inserting a <div class> until I improve my knowledge.

[Tom]

The footer suffix black bar doesn't change to the colour I choose
I can change it in inspect element and achieve the colour change.
When I copy the code to my user.css file and save it nothing happens

However, what has been done has changed background-color to red for every element that has the class bg-dark throughout the site. OK if that's what desired but better to target with greater accuracy.
Already noted that the div is inside a <footer> element.
There's only 1 <footer> element on the site so let's specifically target elements that have class bg-dark but only if they are inside a <footer> element.
Let's edit the user.css to:

Code: Select all

  footer .bg-dark {background-color: red!important;

Note the space between footer and .bg-dark which means target elements that have class bg-dark that are inside a <footer> element.
It changes and the success is shown in Dev Tools:
Screenshot 2024-09-30 120619.png
Read more:
https://phoenixcart.org/phoenixcartwiki ... _and_Color
As well as the resource links on that page.

This latter part of you assistance allowed me to change the footer only to green giving me the effect I wanted.
Thanks for your help.