Say hello to MoMoss!

[#1]

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.

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  

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 vdB and @Erica Moss. This one is for you.

[Alexey Matveev]

@Alana Fernando Thanks for the article :) 

[Alana Fernando]

Thanks @Alexey Matveev 😊

[Patrick Cartier [Candylio]]

shnazzy!

[Alana Fernando]

Thanks @Patrick Cartier [Candylio] 😊

[Sloan]

Fancy, thank you for sharing!

[Erica Moss]

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

[Alana Fernando]

Thanks @Sloan N_ B_ 😊.

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

[Bryan Trummer - ReleaseTEAM]

Wow this is fantastic @Alana Fernando!

[jndeverteuil]

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]

Thank you verymuch @Bryan Trummer - ReleaseTEAM 😊. 

Wow @jndeverteuil 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.☺

[Monique vdB]

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

[Alana Fernando]

Aww thanks @Monique vdB 😊😊

[Jens Iwanenko]

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]

Thanks @Jens Iwanenko 😊😊

[sponjworthy]

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]

Thanks @sponjworthy 😊. 

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 😊. 

[Noga Tal]

Thank you for sharing and making our material more vivid!

[Gaius A]

flabbergasted with that piece of damn simple code..