XF 2.2 How to change the warning text and backgound colour


Well-known member
I'd like to change the colour of warning text and the background
XF warning.png

I have used the Firefox Inspector feature, but I cannot find it
Can someone give me a heads up for extra.less ?

(PS sorry about the R rated text in my warning!)
Thanks I tried that and it worked!
My first attempt at styling

But that changes all the occurences of Accent1 from the default Orange 242 147 13

I really only want to change the warning text and background as shown in my OP
So that it really stands out as a WARNING

So I think I need the edit less names
I added that code to my Extra.Less and then it changed my whole logo

I added it at the end, and then tried it at the start
What I am doing wrong?

.p-header-logo.p-header-logo--image img {
max-height: 120px;

.p-header {
background: #ffffff url(welcome.png);

.actionBar-action.actionBar-action--sv-rate .sv-rating-type__text {
justify-content: flex-start;
display: none;

.p-nav-smallLogo {
display: none !important;

.p-header-logo {
max-width: none !important;

.has-js .p-header {
display: block;

.sv-rate-menu--type-bar.sv-rate-menu--location-standalone a, .sv-rate-menu--type-bar.sv-rate-menu--location-bar a {
margin-left: 8px;

It can be used to style any element on the front end.

Invalid or incorrectly formatted code will cause issues.
Code which overrides default code will change the layout and affect core styling.

Remove all of the code you added and add it back one line at a time until you identify which section is causing issues.
Top Bottom