Some help with CSS please

[Canjucks]

Hey all, just trying to piece together some updates to my layout without asking for a paid version - I'm in a learning environment and would really like to achieve the success of doing myself but as I am needing some guidance please assist if you can. I've come a bit of a way since I started week leading into Xmas. The good thing for me is I am having some fun making things work or at least trying too.

I am trying to change the alert panel. I can see it comes from the style.css and bootstrap,min,css when I inspect the page. I have made some minor updates to both files but what am I missing?

For example I would like the success to go from:

to:

Update: can we delete post I made the update without realising....cleared some history lol job done! Also now have managed to find the way to make a login CSS and game style that works out. Success and sense of achievement. Working with DIVS and CSS is my next big challenge to see if I can learn it and develop my skills in this area. I should have done this a long long time ago tbh. Never to late to catch up I guess.

[AinzOoalGown]

I believe you can change the colour in bootstrap.css if that is what your trying to achieve.

You would amend this part:

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}

It is then used in file loggedin.php to display:

            public function __construct() {
     
                $this->globalTemplates["success"] = '<div class="alert alert-success">
                    <button type="button" class="close">
                        <span>&times;</span>
                    </button>
                    <{text}>
                </div>';
                $this->globalTemplates["error"] = '<div class="alert alert-danger">
                    <button type="button" class="close">
                        <span>&times;</span>
                    </button>
                    <{text}>
                </div>';
                $this->globalTemplates["info"] = '<div class="alert alert-info">
                    <button type="button" class="close">
                        <span>&times;</span>
                    </button>
                    <{text}>
                </div>';
                $this->globalTemplates["warning"] = '<div class="alert alert-warning">
                    <button type="button" class="close">
                        <span>&times;</span>
                    </button>
                    <{text}>
                </div>';
                
            }

I am still learning myself so I could be wrong, but from looking this seems correct.

[Magictallguy]

Don't change vendor files!
Make a custom.css (or equivalent) and source it in after the bootstrap.css

[AinzOoalGown]

1 hour ago, Magictallguy said:

Don't change vendor files!
Make a custom.css (or equivalent) and source it in after the bootstrap.css

What you mean dont change vendor files?

I have made a whole new Theme (mccodesTheme copied it, changed name of it and activated it) and editing that.

[BeNiiiBoiii]

13 minutes ago, AinzOoalGown said:

What you mean dont change vendor files?

I have made a whole new Theme (mccodesTheme copied it, changed name of it and activated it) and editing that.

He means dont edit bootstrap.css

I'd recommend adding them into your styles.css

This did the trick for me.

[AinzOoalGown]

1 minute ago, BeNiiiBoiii said:

He means dont edit bootstrap.css

I'd recommend adding them into your styles.css

This did the trick for me.

Ah right, cool thanks