XF 2.1 Custom CSS for Notices

[Deleted member 68499]

Hi all,

Could someone provide me a template CSS for notices?

I'm lacking in the CSS knowledge department and would appreciate the help

Thanks!
Turtle

 

[hemant_bhardwaj]

Custom CSS to Notice Welcome Box

Simple combo of Html and css to make a welcome box in any theme With Xenforo Notice Set view permission TO guest :) .p-body-inner .notice{ background: #226ea5; color: white; }

xenforo.com

This might helpfull ?

 

[Davey-UK]

In extra.less

.notice-special {
        color: #fff;
        background: rgb(27,5,56);
        border: 4px solid #fff;
a {
        color: #af79f6;
    }
    }
.notice-image img {
    max-width: 72px;
    max-height: 72px;
    padding-right: 15px;
}

In your notice set the following:

Other, using custom CSS class name:

notice-special

Notice no . (dot) before the class name.

 

[Donske]

This is what I was looking for myself, but I can not figure out what css to add to this to make my font size a little larger. I have tried this, but the font size must be buried withing something else.
I think I figured it out - sorry - I added HTML inside my notice text and not use the CSS for that.

 

[Davey-UK]

font-size: 10px !important;
Will override for you

 

[Taz362]

I hate to glom onto this thread but my need is similar, I think.

Can someone share with me a CSS code template to add a custom background color for Notices in XF2.1? Also, exactly where I should add it. I want a Red background, a Blue background and a Green background and a Yellow background. I've looked and looked but I can't find a template nor instructions how to do it myself. I am not fluent in CSS code or LESS code. I'm flying by the seat of my pants and learning as I go.

I will greatly appreciate help with this.

 

[Donske]

in the extra.less, I added this css:

.notice-special {
color: #f1e3c0;
background: rgb(51,51,51);
border: 1px solid #000000;
text: 20px;
}
Of course, the color, and other variables can be assigned accordingly to suit you.

When you create a notice (in communications) the criteria will show up to fill in the info you need to create your notice. I just chose
"notice-special" to remember. Then in the Display styling, check the OTHER. Then enter the css "name" that you wish, again , in this case,
I chose something easy to remember.