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

18 comments

Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

@Alana Fernando Thanks for the article :) 

Alana Fernando
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

Thanks @Alexey Matveev 😊

Patrick Cartier [Candylio]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

shnazzy!

Alana Fernando
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018
Sloan N_ B_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

Fancy, thank you for sharing!

Erica Moss
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

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

giphy

Alana Fernando
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

Thanks @Sloan N_ B_ 😊.

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

Bryan Trummer
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
June 26, 2018

Wow this is fantastic @Alana Fernando!

jndeverteuil
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

Thank you verymuch @Bryan Trummer 😊. 

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
Community Manager
Community Managers are Atlassian Team members who specifically run and moderate Atlassian communities. Feel free to say hello!
June 26, 2018

sohonored.gif

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

Alana Fernando
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 26, 2018

Aww thanks @Monique vdB 😊😊

Jens Iwanenko June 27, 2018

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 27, 2018

Thanks @Jens Iwanenko 😊😊

sponjworthy August 6, 2018

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 6, 2018

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 August 30, 2018

Thank you for sharing and making our material more vivid!

Gaius A December 2, 2018

flabbergasted with that piece of damn simple code.. 

Like Jens Iwanenko likes this

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events