How can I edit the Info macro style globally
Asked by none:

pre-upgrade, the info, warning, tip macros did NOT use a word - now they display an icon AND a word (NOTE, bold and in caps, for Info).

This is rather ugly and takes up a lot of space - I can edit individual instances of the macro, but is there a way to edit it globally, so it never adds a word?


Answers:
author: Andrew Frayling
body: Hi,

I've been playing around with the CSS for this and the following will remove any titles that people may have entered and collapse the whitespace left by the removed title:

Note Macro

```
div.panelMacro &gt; table.noteMacro &gt; tbody &gt; tr &gt; td &gt; b:first-child {	display: none;}div.panelMacro &gt; table.noteMacro &gt; tbody &gt; tr &gt; td &gt; p:nth-of-type(1) {	margin-top: -15px;}
```

Info Macro

```
div.panelMacro &gt; table.infoMacro &gt; tbody &gt; tr &gt; td &gt; b:first-child {	display: none;}div.panelMacro &gt; table.infoMacro &gt; tbody &gt; tr &gt; td &gt; p:nth-of-type(1) {	margin-top: -15px;}
```

Warning Macro

```
div.panelMacro &gt; table.warningMacro &gt; tbody &gt; tr &gt; td &gt; b:first-child {	display: none;}div.panelMacro &gt; table.warningMacro &gt; tbody &gt; tr &gt; td &gt; p:nth-of-type(1) {	margin-top: -15px;}
```

Tip Macro

```
div.panelMacro &gt; table.tipMacro &gt; tbody &gt; tr &gt; td &gt; b:first-child {	display: none;}div.panelMacro &gt; table.tipMacro &gt; tbody &gt; tr &gt; td &gt; p:nth-of-type(1) {	margin-top: -15px;}
```

It's a bit messy because there are no classes or IDs for the title or the first line of content following the title, but the above should be specific enough so they don't interfere with other elements on the page.

As for where you enter this CSS there are a couple of options:

1. Login as an admin and select Browse -\> Confluence Admin -\> Look and Feel -\> Stylesheet and enter the CSS there. This will apply the CSS globally.

2. Login as a Space Admin, navigate to a specific Space and select Browse -\> Space Admin -\> Look and Feel -\> Stylesheet and enter the CSS there. This will apply the CSS to just that one Space.

Hope that helps?

Andrew.

comments: author: Joe Clark
body: That's awesome! Thanks for much for sharing this, Andrew! :)


author: none
body: Since I can't see what styles are controlling that, I don't understand how I can just create random css that will apply. There's no custom stylesheet and I can't see the global one that's used, so how would I figure this out? this is controlled by macros, what style would I enter into a custom stylesheet? thx


author: Joe Clark
body: What version of Confluence did you upgrade from/to? As far as I know, the macros aren't supposed to add any additional text other than what you type in to the macro body \& parameters.

comments: author: none
body: ah, I think you are right, sorry. I'd still like to be able to edit the macro style globally, is this possible?

some of our macro styles have the words and some do not, plus they (seem to) take up a lot of space in the newer confluence, so the ability to change the overall appearance of these would be key.

thanks


author: Joe Clark
body: The easiest way is to probably edit your Confluence global stylesheet and provide some custom CSS that overrides the default appearance of the macros.

Are you familiar with CSS? It's easy to add it in to Confluence if you are - <http://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS>


author: Stacia Parfionov
body: Hi Joseph,

At the risk of asking a dumb question, where can I find out how to reference the macros in the CSS so that I can style them as you suggested. I haven't found any information on this topic.

Thanks!  
Stacia


author: Joe Clark
body: Hi Stacia,

Identifying how to target specific HTML elements with CSS selectors is a general-purpose skill that designers and developers learn - there's nothing "Atlassian-specific" about it, and not a silly question to ask if you don't have much experience in this area :-)

Generally speaking, you can work out how to style an element by using your web browser's developer tools (eg. [Chrome](https://developer.chrome.com/devtools/index), [Firefox](https://developer.mozilla.org/en-US/docs/Tools), [IE](http://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx)) to inspect the underlying HTML and work out a good CSS selector.

For example, if I use the Chrome developer tools on a Confluence page with an info macro, I can see that the info macro is built using this HTML structure:

```
&lt;div class="aui-message hint shadowed information-macro"&gt;    &lt;p class="title"&gt;"Your Title"&lt;/p&gt;    &lt;span class="aui-icon icon-hint"&gt;Icon&lt;/span&gt;    &lt;div class="message-content"&gt;        &lt;p&gt;"Your Content"&lt;/p&gt;    &lt;/div&gt;&lt;/div&gt;
```

Using the developer tools, I can see that the background color is applied to the top-level div element. Confluence has the following CSS selector \& style:

```
.aui-message.hint {    background: #fcfcfc;    border-color: #aab8c6;}
```

So if I want to change the background color, I need to override this style with a *more specific* style, or by adding the *!important* suffix to my style. For example:

```
.aui-message.hint {    background: #FF0000 !important;}
```


author: Stacia Parfionov
body: Joseph,

Thanks for your response! Essentially I'd have to reverse engineer the underlying HTML so that I could style it. I was hoping instead that Atlassian might have the macro code documented somewhere (which is what I was trying to ask with my question), but I can understand that info is proprietary.

Thanks so much for your help and for providing this information. :-)

Stacia