How can I edit the Info macro style globally

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?

3 answers

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 Atlassian Team Apr 15, 2012

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

0 votes
Joe Clark Atlassian Team Apr 11, 2012

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.

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 Atlassian Team Apr 12, 2012

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

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 Atlassian Team Jun 05, 2014

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

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

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

Suggest an answer

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

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,181 views 20 14
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