Color tables for a shiny Confluence page

[Ronald Koster]

I like it! Keep on coming with these kind of snacks @Alana Fernando. #Addiction

[Alana Fernando]

thanks @Ronald Koster 😊 ! hope you have seen MoMoss macro as well

[Mike Bowen]

Fantastic looking macro. How does one add this macro to the already existing list of macros available in Confluence? Did you post the code for this purpose? 

[Alana Fernando]

Thanks @Mike Bowen 😊 ! if you are a confluence server user follow these steps and add this user macro. 

[Mike Bowen]

Thanks @Alana Fernando 

I am a full blown confluence user and loving the ease of this wiki. I'll give your instructions a try. Many thanks.

Mike

[Mike Bowen]

@Alana Fernando, is there a solution for the Confluence Cloud users? Back in October when you asked the question, "if you are a confluence server user", it hadn't dawned on me there was a difference between cloud and server. I am on cloud. Is there any such beautiful macro for the cloud? 

[Davin Studer]

@Mike Bowen You could use the style macro along with the div macro in Confluence Cloud to style your tables. There are no user macros, but all Alana is doing is putting CSS styles on the page behind the scenes which you could do with the style macro. See the below screenshot. It is in essence just manually doing what Alana's user macro does.

Editing the Page

Viewing the Page

[Mike Bowen]

Hi @Davin Studer,

Oh wow! that is fantastic. I'll give that a tryout.

Thank you very much for that piece of advice. 

Mike

[Ahsan]

Hi @Alana Fernando,

It looks great but unfortunately I am totally new to confluence and have no idea where to place this piece of code. 

Any guideline would be really appreciated :)

[Fabienne Gerhard]

Hi @Ahsan - a warm welcome.

It depends on what confluence you use - are you using a server version? Then you would create a user macro -> have a look here and feel free to contact this wonderful community for more help.

If you are on cloud have a look on @Davin Studer great solution above where he combined this wonderful style macro from @Alana Fernando with a div macro to style the tables.

[Thomas Bahon]

This is a very nice feature and it works like a charm in most cases (I mean in combination with other add-ons like table filters).

Is there any chance it could work as well for Page Properties Report? Whenever I tried to use it, it starts well but in a second, header text and background are all white and then unusable.

Only header background color is becoming white with default Styles (ex: Style 1 is supposed to be blue), but as predefined Styles color text for header are also white and remain white, it's useless.

Create new custom style is not helping (ex: text=black and background=red, everything turn white when using with Page Report Properties) and I'm definitely not a great fan of Style 4 (Header = light green background + dark green text) which is some-how working here (background still turn white, but text remains dark green).

[Dom]

The original code doesn't align the on-hover sort arrows to the right. In version 7+, as written, they appear repeated in the background when you hover over them:

The fix is easy! In the original header CSS for each style (style 1 shown here):

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

Change the background value to include center right no-repeat:

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

Make this change for all of the table header styles (should be one per style) and the hover box is restored!

[Gonchik Tsymzhitov]

Wow! it's really live