How can I edit the Info macro style globally

[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?

[Andrew Frayling]

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 > table.noteMacro > tbody > tr > td > b:first-child {
	display: none;
}

div.panelMacro > table.noteMacro > tbody > tr > td > p:nth-of-type(1) {
	margin-top: -15px;
}

Info Macro

div.panelMacro > table.infoMacro > tbody > tr > td > b:first-child {
	display: none;
}

div.panelMacro > table.infoMacro > tbody > tr > td > p:nth-of-type(1) {
	margin-top: -15px;
}

Warning Macro

div.panelMacro > table.warningMacro > tbody > tr > td > b:first-child {
	display: none;
}

div.panelMacro > table.warningMacro > tbody > tr > td > p:nth-of-type(1) {
	margin-top: -15px;
}

Tip Macro

div.panelMacro > table.tipMacro > tbody > tr > td > b:first-child {
	display: none;
}

div.panelMacro > table.tipMacro > tbody > tr > td > 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.

[Joe Clark]

That's awesome! Thanks for much for sharing this, Andrew! :)

[none]

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

[Joe Clark]

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.

[none]

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

[Joe Clark]

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

[Stacia Parfionov]

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

[Joe Clark]

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, Firefox, IE) 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:

<div class="aui-message hint shadowed information-macro">
    <p class="title">"Your Title"</p>
    <span class="aui-icon icon-hint">Icon</span>
    <div class="message-content">
        <p>"Your Content"</p>
    </div>
</div>

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

[Stacia Parfionov]

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