Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Confluence Nested Macro Highlighting

Have you ever clicked edit on a Confluence page only to be presented with a screen that more or less looks like a jail cell with nested macro upon nested macro in a maze of indistinguishable grey borders? Cold sweats ensue as you realize you need to pick the correct spot to add your new content and if you pick the wrong spot the fate of the whole company … possibly the world could be placed in peril. So you fall back to your training. You place your finger on your screen making sure to keep it steady Then you slowly scroll the page following the line down the page till you hit the bottom of the macro. Making sure not to move that finger off the screen you move the mouser pointer just below bottom border and click. Cursor placed. You sigh with relief. Finally, you pull out a wet napkin and clean the finger print smudge off your screen. You’ve just prevented another catastrophe and the world will continue to turn for another day.

Seriously! You’ve never experienced that? Huh!? Ok, well maybe I’m the only person that happens to. However, I can bet you’ve still seen a Confluence page with LOTS of macros and gotten confused as to which was which.

That is the inspiration for this browser bookmarklet. Simply drag the below bookmarklet link to your browser’s bookmarks bar. When you are in edit mode you can click the bookmarklet to change the borders of your macros from this …

greymacros.pngto this …

rainbowmacros.pngEach macro now has a distinctive color making it easy to see which border goes with which macro. Problem solved! Unfortunately, I could not change the color of the macro header. It’s actually a dynamically generated image that is LONG with the grey color hard-coded into it. Also, I tried hard to make sure that each color is distinct from the colors next to it so that it is easy to see which is which. I even thought about color-deficient people with the color choices … as I myself am red/green color-deficient.

Bookmarklet:
The bookmarklet can be found on my blog as I cannot post it here due to post security sanitizing rules.

If you would like to change out the colors or add more nesting levels the below JavaScript is the code for the bookmarklet. Just change/add values to the colors array to fit your needs. Once you’ve done that you can use a site like Bookmarklet Maker to turn it into your own personalized bookmarklet.

// Add/Change the hex color values to add more levels of nesting or choose different colors.
var colors = ['#800000','#F58231','#3CB44B','#42D4F4','#000075','#FFE119','#808000','#469990','#911EB4','#FFD8B1','#E6BEFF','#9A6324','#FABEBE','#000000'];

// Don't edit past this line var styles = ''; for (var i = 0; i < colors.length; i++) { styles += '.wiki-content table.wysiwyg-macro table.wysiwyg-macro'; for (var x = 0; x < i; x++) { styles += ' table.wysiwyg-macro'; } styles += ' {\n'; styles += ' background-color: ' + colors[i] + ';\n'; styles += '}\n'; } AJS.$('iframe').contents().find('head').append($('<style type="text/css">' + styles + '</style>'));

Hope it is helpful.

2 comments

Thanks Davin!

Indeed I recognize those cold sweat moments when I enter such a page. As a Confluence admin I am often asked to troubleshoot large and complex pages and usually there is a clutter of nested macros present.

I am guilty of such nesting myself as well now and then so am looking forward to trying out the bookmarklet!

Thanks again :)

Michiel

Like Davin Studer likes this

Thanks :)

Nice ! It's definitely happened to me too, clicking "edit" and freaking out.

Most the time on my own pages haha

damien

Like Davin Studer likes this

Comment

Log in or Sign up to comment
TAGS
Community showcase
Published in Confluence Cloud

🎨 Add some visual life to your templates

Hi Atlassian Community, My name is Avni Barman, and I am a Product Manager on the Confluence Cloud team. Based on feedback from you, we are giving admins more power to create templates that a...

155 views 1 7
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you