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

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;
}

3 answers

0 votes

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

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;

}

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.

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

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

to this:

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

Davin Studer Community Champion Apr 23, 2014

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;
}

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 11, 2018 in Confluence

What are your project planning tips?

Hello Community,  Jessica here from the Confluence product marketing team! Today I wanted to get your takes on project planning –– what works, what doesn’t, how do you know if you’re doing it r...

292 views 1 4
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you