how to change Phoenix 1075 CSS?

[ce7]

hi,

I have Phoenix 1075, did not know how to update the CSS...google posts and found out to use firefox inspector,
i am using JcM more new themes addon, and select Cyborg-bootstrap.min as template.

the firefox inspector that I manage to save the
.bg-white {
 background-color:#565656 !important; /* original #fff;*/
}
original style

I tried to copy this to user.css, but it did not change anything,
I tried to upload the saved changed file /exe/themes/Cyborg-bootstrap.min.css, again it did not change anything neither...

My desired style

How can I change the color of the btn?

any help or suggestion is appreciated, thanks!

[Heatherbell]

20 minutes ago, ce7 said:

any help or suggestion is appreciated, thanks!

After any css changes, make sure you clear your browser cache or you will keep seeing the old page.

[♥14steve14]

Also check if your host use any cache that you can clear.

If you want to change the colour of every button with the same css class search the button code and see what definition is used. You should see something similar to btn-info. That is the pre set css that controls the colour of that particular button. If you want to change just the background colour try adding something like this to the user.css file

Quote

.btn-info {
  background-color: #2780e3;
  border-color: #1e5ea6;
}

That will change the background and border colours of that particular button type. There are lots of other bits that also control that button so look for

Quote

.btn-info {
  color: #fff;
  background-color: #2780e3;
  border-color: #1e5ea6;
}

.btn-info:hover {
  color: #212529;
  background-color: #1a6dca;
  border-color: #1967be;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #1a6dca;
  border-color: #1967be;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(71, 147, 231, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(71, 147, 231, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #2780E3;
  border-color: #2780E3;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #1967be;
  border-color: #1761b3;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(71, 147, 231, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(71, 147, 231, 0.5);
}

 

Then you will probably need to do something similar for all the other button classes and there are a few in bootstrap. If you want to see more about bootstrap have a look here https://getbootstrap.com/docs/4.5/components/alerts/

[Heatherbell]

The OP is wanting to change the bg-white in card-footer, not a button.

[♥14steve14]

3 hours ago, ce7 said:

How can I change the color of the btn?

any help or suggestion is appreciated, thanks!

I read that as wanting to change the colour of the button.  I may have misinterpreted it somehow. Sorry.

[burt]

It's unclear what the OP wants as the image shows a white background changed to grey but the text asks how to change the "btn" (which is the button class).

Complicating factor that none of us should have to deal with;  it's an addon causing problems

OP, can you ask again and be more clear?

[ce7]

Hi, @Heatherbell  @14steve14 @burt

Thank you for all your replies.
I want to change the background of the card buttons area, and the next stage is to change the color of button as well, (special thanks to Steve about the buttons setting....) so all of your replies did help heaps.

Although it's JcM addon, I think it is not the addon problem, mainly myself lack of knowledge of how to use firefox css. After I read the stackover posts how to change and save css, redo it couple times and nothing change, and could not understand why....just now read your replies and follow suggestions to clear cache, it did show up the setting I desire, yeah....thank you!

Be honest, after read through few forum posts and suggested the custom.css, and user.css, I still quite confused of how and what to do to change the css, I was suggested to use firefox inspector, only this time i finally learned how to change and save.... but i am still in cloud....for example how to manipulate the filter styles or when click on style editor, there are bunch of list of different .css files  on the left column..which file to use, and after tried few files and finally figure out which file and how to change it....I guess I am not smart enough to learn the code, but I am trying on my way....😅