XF 2.0 How to change background color and text color of notices?

[coolbreeze86]

I checked in style properties but i cannot find notices. please help.

thank you

 

[gorman]

I'd like to know this, too.

 

[Mr Lucky]

I think you have to use CSS (or LESS) which involves defining the properties for background and text color in the extra.less template.

For example:

.custom-notice

{background:rgb(141, 9, 49);
color:#fff}

Then use custom-notice as a class in your notice settings:

 

[coolbreeze86]

Worked perfectly thank you

 

[Mr Lucky]

You’re welcome

Tip: this exact same css actually doubles for custom prefixes, can use the same class for notices and thread prefixes.

 

[CFMack]

Thank you, @Mr Lucky. Just what I was looking for.

 

[gorman]

Then use customnotice as a class in your notice settings:

View attachment 175705

Where did you grab this screen from? I feel like I've looked everywhere but can't find this.

 

[Mr Lucky]

Where did you grab this screen from? I feel like I've looked everywhere but can't find this.

That's in the notice options

 

[gorman]

That's in the notice options

Ehm... you wrote as much before.

But where are these "notice options" located? If I use the filter in the Setup/Options page, there's no entry.

In the Style Properties? Where exactly? Again, there's no main entry for notices. Am I missing something?

Please, do assume I am stupid and I can't find it.

 

[gorman]

Sorry. I found it. And it's notices, not alerts... not even what I was looking for. Sorry for wasted time. As I said, assume I'm stupid.

 

[TdC Network]

Hi, I can't find where notice options is can you let me know (version 2.012)

 

[TdC Network]

OK found it. You have to open up the actual notice and it's in a list there. I was looking for a specific section on styling of notices.

 

[kella]

I'm also interested in being able to change the background color for alerts. Users are complaining that there's not enough contrast between old and new alerts. I've fiddled with colors but can't figure it out. Any ideas?

 

[Taz362]

I made a screen grab of my extra.less page:

Where exactly would I put the above code:

CSS:
.custom-notice

{background:rgb(141, 9, 49);
color:#fff}

and can I add more than one variation of that code so i can create 4 custom background colors for my notices?

I'm trying to learn how to do these simple (seems simple to someone who know's what they're doing but it seems like Greek to those, like me, who are novices). I want to learn. I just need a little help.

Thanks in advance

T

 

[Paul B]

Create a custom class for the notice.



Add the CSS to the extra.less template:





For four different notices, use four different class names - ensure they are uniquely named and don't conflict with any core XF classes.

 

[Taz362]

Create a custom class for the notice.

View attachment 237277

Add the CSS to the extra.less template:

View attachment 237278

View attachment 237279

For four different notices, use four different class names - ensure they are uniquely named and don't conflict with any core XF classes.

Thank you Brogan.

That helps a lot, lol.

One more thing. In the screengrab of my extra.less page above where would I put the first

.ctaNoticeRed
{
background-color: Red;
}

?

After line 10? After line 9 before line 10?

Or is there something I'm not understanding or missing?

Here's the image again:

 

[Paul B]

Anywhere in the template as long as it's on a new line.

You can just hit return twice and start on line 12 - it's standard practice to leave a gap between custom code so it's easier to read.

FYI, the cta prefix is for my own site - it ensures it won't interfere with any core class names - you can use that or whatever works for you.

 

[Taz362]

Great!

I'll use .nvNotice then ... my site is Neo Vistas.

Thank you so much. I'll do it and come back here and brag about it a little.

 

[Taz362]

Well, I had success with adding the Red one but ...

I added a Green one but it doesn't work the background is transparent on the notice ...

I checked and there were server errors that say:

• Logs

Server error logs​

Clear

Error rendering template public:extra.less: ParseError: missing closing } in public:extra.less on line 8898, column 1 (on or near line 8898) 18 minutes ago src/XF/CssRenderException.php:87

Error rendering template public:extra.less: ParseError: missing closing } in public:extra.less on line 8898, column 1 (on or near line 8898) 20 minutes ago src/XF/CssRenderException.php:87

any suggestions on what to do?

Showing all items

 

[Paul B]

Is that the entire contents of the template?

The error suggests a closing } is missing.

What do the other extra.less templates look like in other styles?