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

Say hello to MoMoss!

MoMoss is a user-macro where you can change your paragraph into a tip/warning/ info/bug report/special announcement or any other eye catching note with just a few clicks.  

Why its called MoMoss?

“Mo” means the way a particular person tends to do things. “Moss” are small plants that typically grow in dense green clumps or mats. In this case this user-macro do changes to the look of your paragraph and make it eye-catching.

1.1.jpeg

 

Key features

  • Ability to change colors of your choice 
  • Ability to add icons
  • Ability to change the font family of your choice 
  • Ability to change border style of your choice
  • Ability to change header size of your choice  

1.2.jpeg

Code

## Developed by: Alana Fernando
## Date created: 26/06/2018
## Shared with love

<link href="https://fonts.googleapis.com/css?family=Kurale" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

## @param title:title=Note title|type=string|required=true|desc=Title to display

## @param icon:title=Note icon|type=enum|desc=Choose note icon. |enumValues=calendar,bug,bitbucket,check,close,cloud,code-fork,code,comment,cube,download,envelope,folder-open,gear,paperclip,puzzle-piece,thumbs-o-up,

## @param style:title=Note style|type=enum|desc=Choose note style. |required=true|enumValues=Lime,Blue,Amber,Red,Pink,Gray,Cyan

## @param fontfamily:title=Font family|type=enum|desc=Choose font family. (some font families may not compatible with browsers)|enumValues=Times New Roman,Arial,Courier New,Tahoma,Trebuchet MS,Courier New,Kurale,Cormorant Infant,Rancho,Indie Flower,Bad Script

## @param borderstyle:title=border style|type=enum|required=true|desc=Choose a note style.|enumValues=dashed,solid

## @param fontsize:title=Heading|type=enum|required=true|desc=Choose a font size.|enumValues=h1,h2,h3,h4,h5,h6


#if ($paramstyle == "Lime")
<table style="width: 100%;">
<td class="TH">
<div class="Lime Limeb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#827717;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#elseif ($paramstyle == "Blue")
<table style="width: 100%;">
<td class="TH">
<div class="Blue Blueb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#0D47A1;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#elseif ($paramstyle == "Amber")
<table style="width: 100%;">
<td class="TH">
<div class="Amber Amberb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#FFA000;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>
</td>
</table>

#elseif ($paramstyle == "Red")
<table style="width: 100%;">
<td class="TH">
<div class="Red Redb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#B71C1C;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#elseif ($paramstyle == "Pink")
<table style="width: 100%;">
<td class="TH">
<div class="Pink Pinkb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#AD1457;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#elseif ($paramstyle == "Gray")
<table style="width: 100%;">
<td class="TH">
<div class="Gray Grayb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#616161;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#elseif ($paramstyle == "Cyan")
<table style="width: 100%;">
<td class="TH">
<div class="Cyan Cyanb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#E0F7FA;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

#else
<div>$body</div>
#end

<style>
.Lime {
border:#827717 1px solid;
border-radius: 5px;
}

.Limeb{
padding: 5px;
background:#E6EE9C;
}

.Blue {
border:#0D47A1 1px solid;
border-radius: 5px;
}

.Blueb{
padding: 5px;
background:#E3F2FD;
}

.Amber {
border:#FFA000 1px solid;
border-radius: 5px;
}

.Amberb{
padding: 5px;
background:#FFD54F;
}

.Red {
border:#B71C1C 1px solid;
border-radius: 5px;
}

.Redb{
padding: 5px;
background:#FFEBEE;
}

.Pink {
border:#AD1457 1px solid;
border-radius: 5px;
}

.Pinkb{
padding: 5px;
background:#F8BBD0;
}

.Gray {
border:#757575 1px solid;
border-radius: 5px;
}

.Grayb{
padding: 5px;
background:#F5F5F5;
}

.Cyan {
border:#E0F7FA 1px solid;
border-radius: 5px;
}

.Cyanb{
padding: 5px;
background:#00BCD4;
}

.TH {
background:none;
border:white;
width: 100%;
}
</style>

How to use it?

  1. Insert MoMoss macro and use macro options to add your preference
  2. Add content inside macro body 
  3. Save changes 

Adding user macro 

Remember to select Rendered as macro body processing. 

Make it more shimmer and shine

You can always explore and groom the default looks of this macro to take the best out from this.

 

MoMoss is named after @Monique van den Berg and @Erica Moss. This one is for you.

18 comments

@Alana Fernando Thanks for the article :) 

Fancy, thank you for sharing!

Erica Moss Community Manager Jun 26, 2018

@Alana Fernando, you have totally made my week! This is so cool. 🎉

giphy

Alana Fernando Community Leader Jun 26, 2018

Thanks @Nick -bitvoodoo- 😊.

Yeii @Erica Moss I'm glad to hear that. 

BryanT Community Leader Jun 26, 2018

Wow this is fantastic @Alana Fernando!

Very nice, @Alana Fernando!

I really appreciate you sharing your efforts, this macro is awesome! I have installed it in our Confluence instance and it works wonderfully.

I did a small addition on my side as I wanted to be able to specify the width of the macro so I added a new param :

## @param tablewidth:title=Width|type=string|required=true|desc=Width of macro (px or %)|default=100%

Then I modified the core of the CSS to replace the already set 100% by the $paramtablewidth :

#if ($paramstyle == "Lime") 
<table style="width: $paramtablewidth;">
<td class="TH">
<div class="Lime Limeb panel-body" style="font-family:$paramfontfamily; border-style:$paramborderstyle;">
<$paramfontsize style="color:#827717;"><i class="fa fa-$paramicon"> </i> $paramtitle </$paramfontsize>
<div style="font-family:$paramfontfamily; font-size:$paramfontsize;">
$body
</div>
</div>
</td>
</table>

I love itttt! Thank youu!

Alana Fernando Community Leader Jun 26, 2018

Thank you verymuch @BryanT 😊. 

Wow @Julien Nicolas de Verteuil I am very happy to hear that you are already using it. And I like your code change. also thanks for sharing the code with us it is really valuable.☺

sohonored.gif

I am so honored to have a small part in one of your amazing macros @Alana Fernando!!

Alana Fernando Community Leader Jun 26, 2018

Aww thanks @Monique van den Berg 😊😊

Great macro! I see some refinement potential against the code repetition, but it's cool as it is.

Unfortunately our customers still only get PDF versions of our documentation. I haven't tried, but I bet the Scroll exporters won't support this eye candy. :)

Alana Fernando Community Leader Jun 27, 2018

Thanks @Jens Iwanenko 😊😊

Awesome macro! I'm using Server 6.9.1 and it seems to change the scaling of the custom site logo (top left) and the icon for the space. Making the site logo tiny and the space icon huge. Is this a MacOS web browser problem (behaves the same in Chrome and Safari)? Thanks again for an awesome toy to make confluence docs that much easier to read!

Alana Fernando Community Leader Aug 06, 2018

Thanks @S. Blake 😊. 

Also regarding your question, I highly recommend you to raise a question here. so that all the experts could reach your question and answer you 😊. 

Thank you for sharing and making our material more vivid!

flabbergasted with that piece of damn simple code.. 

Like Jens Iwanenko likes this

Comment

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

Introducing Confluence Cloud and Jira Software Cloud Premium

Wherever you are in your team’s journey , our goal is to support your big ambitions. We’re a cloud-first company with the mission of unleashing the potential of every team, and to address the range ...

694 views 5 18
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