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 vote

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
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted yesterday in Confluence

Calling all marketing teams who use Confluence - we want to hear from you!

Hi Community! me again 🙂 If you’re a marketing team using Confluence, we want to hear your story! How did you start using Confluence? What are your use cases? What have been some of the benefits?...

48 views 1 2
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