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

[Daniel Drahnak]

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;

}

[jing_hwa_cheok]

Hi Daniel,

I believe this is what you are looking for.

.aui-message.warning {
background-color: #FFFFCE;
border-color: #F0C000;
}
.aui-message.problem {
background-color: #FFCCCC;
border-color: #CC0000;
}
.aui-message.hint {
background-color: #D8E4F1;
border-color: #6699CC;
}
.aui-message.success {
background-color: #DDFFDD;
border-color: #009900;
}

Regards,
Jing Hwa

[Daniel Drahnak]

Outstanding! Thanks Jing. I was able to suppress the background color and border. Now I'd like to move the text of the note macros to the same line as the macro title. Any chance you know how to do this?

/*Note macro styling */

.aui-message.warning {

background-color: #FFFFFF;

border-color: #FFFFFF;

}

/*Warning macro styling */

.aui-message.problem {

background-color: #FFFFFF;

border-color: #FFFFFF;

}

/*Info macro styling */

.aui-message.hint {

background-color: #FFFFFF;

border-color: #FFFFFF;

}

/*Tip macro styling */

.aui-message.success {

background-color: #FFFFFF;

border-color: #FFFFFF;

}

[Steffen Heller]

@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.

[Steffen Heller]

You must check the underlying html code and then

1. find a way to clearly define the html element you want
2. move this element upwards

In my case the code looks something like this:

...<td>
<b>Some signal word!</b>
<br>
<p>Some text...</p>
</td>...

What you want to move upwards is a <p> that follows a <br> that follows a <b> and all of that is inside a <td>. So you could try something like this

.noteMacro td b+br+p {
margin-top: -30px;
}

But beware, your code might be different or sometimes the text might not be in a <p> but in a <ul> list or the <br> is missing or lots of other reasons why it is very difficult to find code that always works.

Generally I am not sure if this is what you really want since it makes the texts overlap.

[Daniel Drahnak]

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

<div class="aui-message warning shadowed information-macro">
            <p class="title">Note:</p>
                <span class="aui-icon icon-warning">Icon</span>
             <div class="message-content">
                <p>This is a Note macro.</p>
             </div>
</div>

to this:

<div class="aui-message warning shadowed information-macro">
            <p class="title">Note: <span class="message-content">This is a Note macro.</span></p>
               <span class="aui-icon icon-warning">Icon</span>  
 </div>

[Davin Studer]

If you work with the float property on the <p> and <div> 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;
}