Color tables for a shiny Confluence page

38 comments

Ronald Koster June 28, 2018

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

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

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

Mike Bowen
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.
October 5, 2018

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
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.
October 9, 2018

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

Mike Bowen
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.
October 9, 2018

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
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.
December 13, 2018

@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
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.
December 13, 2018

@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

Capture.PNG

Viewing the Page

Capture1.PNG

Like Mike Bowen likes this
Mike Bowen
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.
December 13, 2018

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 August 23, 2019

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 23, 2019

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 February 11, 2020

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 August 28, 2020

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:

Table Header Hover Original.png

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!

Table Header Hover Fixed.png

Like Fabienne Gerhard likes this
Gonchik Tsymzhitov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 2, 2021

Wow! it's really live 

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events