How do you override the Note macro color and border styles?

Question

I'd like to suppress the default background color and border for the Note, Info, Tip, and Warning macros. I've found the seemingly appropriate CSS selectors in Firebug, however, modifying them in my global stylesheet doesn't produce any changes. Any suggestions would be greatly appreciated!

.noteMessage, .noteMacro, .warningPanel {

background-color: #FFFFCE;
 border-color: #F0C000;

}

.warningMessage, .warningMacro {

background-color: #FFCCCC;
 border-color: #CC0000;

}

.infoMessage, .infoMacro {

background-color: #D8E4F1;
 border-color: #6699CC;

}

.tipMessage, .tipMacro {

background-color: #DDFFDD;
 border-color: #009900;

}

Davin Studer · Answer

If you work with the float property on the

and

you should be able to get them appear side by side. Another option would be to change the display property to inline or inline-block. Try this. .aui-message.warning .title, .aui-message.warning .message-content { display: inline-block; }

Steffen Heller · Answer

@Daniel:

So you want to change the html code of something. What is this code? The macro itself?

If it the macro, it should be possible to adapt it. But I am not familiar with that since I don't have access to that.

Daniel Drahnak · Answer

Thanks Steffen. I want the title and note content to appear on the same line. So I want to change this:

Note:

Icon

This is a Note macro.

to this:

Note: This is a Note macro.

Icon