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

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. 

35 comments

Davin Studer Community Leader May 17, 2018

Looks good. Nice color choices!

Alana Fernando Community Leader May 17, 2018

Thanks @Davin Studer :-)

Thanks for the article and the great macro, @Alana Fernando!

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

Looks great!

Alana Fernando Community Leader May 18, 2018

thanks @Tarun Sapra 😊

Thanks for sharing!

Alana Fernando Community Leader May 22, 2018

you are welcome @Stefan Krooshof 😊

Veeery nice user macro!

I will use it for sure!

Thank you very much for sharing

Alana Fernando Community Leader May 22, 2018

Glad to hear @Rafael Corredor

tumblr_low73p0PYs1qbteqxo2_r2_500.gif

Like Ahsan likes this

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

Alana Fernando Community Leader May 23, 2018

@Helen JakesGreat to hear that. 😊 

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

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

@Chase Brown 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

@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 Community Leader May 27, 2018

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

Amazing, thank you!

BiancaE Atlassian Team Jun 20, 2018

This is super extra and I like it!

Alana Fernando Community Leader Jun 20, 2018

Thank you verymuch @K H and @BiancaE 😊 

Comment

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

What's New in Confluence Cloud – November 2019 Edition

Hey community! This month we’re excited to share brand new features to help you make your mark on Confluence. If you haven’t already, check out our updates from October and September too! Expre...

41 views 1 2
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