Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

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

38 comments

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

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? 

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

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

@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? 

@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

Hi @Davin Studer,

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

Thank you very much for that piece of advice. 

Mike

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 :)

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.

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).

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

Wow! it's really live 

Comment

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

Confluence Mythbusters: Does Atlassian even use Confluence?

Hi, Confluence collaborators! As part of #Confluence-Collaboratory month, we’ve created a very special Mythsbusters segment, where we're dive into an interesting myth and uncover the truth behind i...

1,645 views 7 30
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