XF 2.2 How to change the warning text and backgound colour

[DigNap15]

Hello
I'd like to change the colour of warning text and the background


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!)

 

[beerForo]

It's "Accent 1" or "Accented content background color" try both.

 

[DigNap15]

Thanks for that
That was quick!
Can I do it on the fly, or do I have to turn the board off?

 

[beerForo]

You can style live.

 

[DigNap15]

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

 

[Paul B]

Add to the extra.less template:

.messageNotice.messageNotice--warning
{
    background-color: orange;
    color: black;
}

Teach a man to fish, give a dog a bone, tie a yellow ribbon around the old oak tree, etc.: https://xenforo.com/community/resources/how-to.4390/

 

[DigNap15]

Thanks Brogan, I'll give that a go
Can I use rgb numbers?

 

[Old Nick]

Yes !

.messageNotice.messageNotice--warning
{
    background-color: rgb(123, 120 111);
    color: rgb(200, 200, 200);
}

 

[DigNap15]

Hi
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;
}

Thanks

 

[DigNap15]

Can anyone tell me about extra.less ?

Can it only cover one subject

If I add that code it upsets other things (eg my heading loso)

 

[Paul B]

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.

 

[DigNap15]

Yes !

.messageNotice.messageNotice--warning
{
    background-color: rgb(123, 120 111);
    color: rgb(200, 200, 200);
}

Ha Ha
My problem was that I copied the above code and it did not work due to the missing comma in the background colour line!

 

[DigNap15]

Now all I need is to find the orange warning triangle and replace that with a red or yellow one!

 

[Paul B]

The browser inspector is your friend.

 

[Old Nick]

Ha Ha
My problem was that I copied the above code and it did not work due to the missing comma in the background colour line!

sorry for that.

 

[DigNap15]

sorry for that.

Thats's OK
its amazing what problems one missing comma can cause
At least I got there in the end.