XF 2.1 Quick question - styling a Notice

beerForo

Well-known member
When I am in the acp and there's an "attention" message, this is how I want to style one of my front end notices. With the yellow banner and explanation point icon.

Would anyone be able to help style this for the boxes:

Display styling
Other, using custom CSS class name: (the same yellow)

and

Display image
Specify an image: (the same exclamation point)

Thanks!

(I want to replicate the red banner with X as well but I think I can figure that out after this help.)
 
Last edited:
Screenshot 2020-02-24 at 20.02.37.webp


extra.less template:
Less:
.cxf-notice {
    color: #aa6709;
    background: #fff4e5;
    border-left: 3px solid #f2930d;
    text-align: left;
    position: relative;
    padding-left: 3em;
    min-height: 4em;

    &:before {
        .m-faBase();
        .m-faContent(@fa-var-exclamation-circle);
        color: #f2930d;
        font-size: 280%;
        position: absolute;
        top: 0;
        left: 6px;
    }
}



Result:
Screenshot 2020-02-24 at 20.04.57.webp
 
How can I use this:

I've tried a few different things and never can get it to work.
To use the "sollid" icon, use this .m-faBase('Pro', @faWeight-solid); instad of this .m-faBase(); in the code above.
 
Back
Top Bottom