Customize a notice

[rnedelkow]

I'm trying to add an image to a notice, but having difficulty placing the image in the top right corner.

[glennrocksvb]

Are you trying to add an icon in the top right corner just like I did on my guest notice here where there is a blue pin icon in the top right corner?

[rnedelkow]

That's exactly it. I have a small image I want to place in the same corner but it never looks right.

[glennrocksvb]

This is what I did here:

#notices .notice {
    position: relative;
}
#notices .notice:before {
    content: '';
    background: transparent url('path/to/the/image.png') no-repeat;
    width: 22px;
    height: 22px;    
    right: -5px;
    top: -7px;
    display: inline-block;
    position: absolute;
}

Update the background image path, dimensions and right/top coordinates accordingly.

[rnedelkow]

That looks perfect Glenn. Coffee on me!

[KawaiiHannah]

Question does this go in the notice itself.or on a template I would.love to implement this myself

[glennrocksvb]

Add the CSS code in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor for each active theme you are using.

[KawaiiHannah]

And how do I call it in the notice like I do with the pulsing signup button html

[glennrocksvb]

The CSS will be applied to all the notices. You don't have to call it.

[KawaiiHannah]

Ahh thanks Glen