Color tables for a shiny Confluence page

Color tables is a user macro that makes your table awesome for you. It applies colors and styles to basic confluence table and make it shiny. 

1111 (1).png

 

Key features

  • Ability to change colors of your choice 
  • Ability to change the font family of your choice 
  • Ability to change the text alignment of whole table 

22222 (1).png

 

## Developed by: Alana Fernando
## Shared with love


## @param style:title=style type|type=enum|required=true|desc=Choose a style.|enumValues=Style1,Style2,Style3,Style4,Style5

## @param alignment:title=Text alignment|type=enum|desc=Choose Text alignment.|enumValues=Right,Left,Center

## @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,Open Sans

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


#if ($paramstyle == "Style1")
<style>
.styletableth1 table.confluenceTable th.confluenceTh {
color:white;
text-align: $paramalignment;
background: #0288D1;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont1 th div.tablesorter-header-inner{
color:white;
text-align: $paramalignment;
}

.styletableeven1 tr:nth-child(odd){
color:black;
background:#E0E0E0;
border:#1976D2 2px solid;
}

.styletableodd1 tr:nth-child(even){
color:black;
background: #FAFAFA;
border:#1976D2 2px solid;
}

.styletable1 td{
text-align: $paramalignment;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable1 styletableth1 styletableeven1 styletableodd1 styletableheaderfont1 " style="font-family:$paramfontfamily;">$body</div>

#elseif ($paramstyle == "Style2")
<style>
.styletableth2 table.confluenceTable th.confluenceTh {
color:#fff2df;
text-align: $paramalignment;
background: #ff9e22;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont2 th div.tablesorter-header-inner{
color:#fff2df;
}

.styletableeven2 tr:nth-child(odd){
color:black;
background:#ffc77d;
border:white 2px solid;
}

.styletableodd2 tr:nth-child(even){
color:black;
background: #ffddb0;
border:white 2px solid;
}

.styletable2 td{
border: white 4px solid;
outline: 1px solid #f2f2f2;
text-align: $paramalignment;
}
</style>
<div class="styletable2 styletableth2 styletableeven2 styletableodd2 styletableheaderfont2 " style="font-family:$paramfontfamily;">$body</div>

#elseif ($paramstyle == "Style3")
<style>
.styletableth3 table.confluenceTable th.confluenceTh {
color:#F9FBE7;
text-align: $paramalignment;
background:#AFB42B;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont3 th div.tablesorter-header-inner{
color:#F9FBE7;
}

.styletableeven3 tr:nth-child(odd){
color:black;
background:#D4E157;
border:white 2px solid;
}

.styletableodd3 tr:nth-child(even){
color:black;
background: #F0F4C3;
border:white 2px solid;
}

.styletable3 td{
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable3 styletableth3 styletableeven3 styletableodd3 styletableheaderfont3 " style="font-family:$paramfontfamily;">$body</div>

#elseif ($paramstyle == "Style4")
<style>
.styletableth4 table.confluenceTable th.confluenceTh {
color:#33691E;
text-align: $paramalignment;
background: #7CB342;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont4 th div.tablesorter-header-inner{
color:#33691E;
}

.styletableeven4 tr:nth-child(odd){
color:black;
background:#EEEEEE;
border:white 2px solid;
}

.styletableodd4 tr:nth-child(even){
color:black;
background: #FAFAFA;
border:white 2px solid;
}

.styletable4 td{
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable4 styletableth4 styletableeven4 styletableodd4 styletableheaderfont4 " style="font-family:$paramfontfamily;">$body</div>


#elseif ($paramstyle == "Style5")
<style>
.styletableth5 table.confluenceTable th.confluenceTh {
color:#EFEBE9;
text-align: $paramalignment;
background: #BF360C;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont5 th div.tablesorter-header-inner{
color:#EFEBE9;
}

.styletableeven5 tr:nth-child(odd){
color:black;
background:#D7CCC8;
border:white 2px solid;
}

.styletableodd5 tr:nth-child(even){ ;
color:black;
background: #EFEBE9;
border:white 2px solid;
}

.styletable5 td{
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable5 styletableth5 styletableeven5 styletableodd5 styletableheaderfont5 " style="font-family:$paramfontfamily;">$body</div>

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

How to use

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

Adding user macro 

Remember to select Rendered as macro body processing. 

Make it grow and glow ...

You are welcome to change the styles as of your choice and cut off lengthy codes and make it efficient. 

38 comments

Davin Studer
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.
May 17, 2018

Looks good. Nice color choices!

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.
May 17, 2018

Thanks @Davin Studer :-)

Monique vdB
Community Manager
Community Managers are Atlassian Team members who specifically run and moderate Atlassian communities. Feel free to say hello!
May 17, 2018

Thanks for the article and the great macro, @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.
May 17, 2018

Welcome @Monique vdB :-)

Fabienne Gerhard
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
May 17, 2018

Wow @Alana Fernando thanks for this wonderful macro - actually that's something I was really looking for but I don't have your coding skills to create that macro. Thank you!

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.
May 17, 2018

I am really happy to hear that this is helpful to you @Fabienne Gerhard 😊. And thank you very much for your feedback. 

Tarun Sapra
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
May 18, 2018

Looks great!

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.
May 18, 2018

thanks @Tarun Sapra 😊

Adrián Plaza [DEISER]
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.
May 21, 2018

Amazing great Job @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.
May 21, 2018
Stefan Krooshof May 22, 2018

Thanks for sharing!

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.
May 22, 2018

you are welcome @Stefan Krooshof 😊

Rafael Corredor May 22, 2018

Veeery nice user macro!

I will use it for sure!

Thank you very much for sharing

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.
May 22, 2018

Glad to hear @Rafael Corredor

tumblr_low73p0PYs1qbteqxo2_r2_500.gif

Like Ahsan likes this
Helen Jakes May 23, 2018

Exactly what I've been looking for - thank you!

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.
May 23, 2018

@Helen JakesGreat to hear that. 😊 

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.
May 23, 2018

Thanks, I'll use it and share it around for sure :)

Chase B. May 24, 2018

This user-macro is pretty freakin' awesome! One question, how would you suggest renaming the styles to the color pallet? Add a Style Name value or renaming the style to the color pallet?

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.
May 24, 2018

Thanks @jndeverteuil 😊 

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.
May 24, 2018

@Chase B. correct me If i am wrong. as i understood you want to style 1, style 2... changed to colors available.

if so change enum values of below code. 

## @param style:title=style type|type=enum|required=true|desc=Choose a style.|enumValues=Style1,Style2,Style3,Style4,Style5
Chase B. May 25, 2018

@Alana Fernando

I believe so? I'm wanting to change the name selection when adding the macro for folks that are not all the familiar with the preview or have nothing in their table yet.

Ex: "Style1" to "Blue-Gray", "Style2" to "Peach-Orange", "Style3" to "Field of Green", etc. 

I'm guessing changing the enum value will require me to also change the values in each style, yes?

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.
May 27, 2018

exactly @Chase B., simply find and replace the style names with name you want to add. 

K H May 31, 2018

Amazing, thank you!

BiancaE
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
June 20, 2018

This is super extra and I like it!

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 20, 2018

Thank you verymuch @K H and @BiancaE 😊 

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events