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

Daniel Drahnak April 10, 2014

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

1 vote
jing_hwa_cheok
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 10, 2014

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 April 13, 2014

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;

}

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 23, 2014

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

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 17, 2014

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 April 17, 2014

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 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;
}

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events