{Composition-Setup} {Deck....} problem with Confluence 3.0

I've seen this problem as well, and I've found out what's going on.

The tabs are all there: they are just printed in white-on-white. To see for yourself, highlight the text on you page by pressing ctrl+A or something.

A quick fix is to add color, like this:

{composition-setup}
deck.memory.duration=5
deck.tab.active.background=#3355ff
deck.tab.inactive.background=#3355ff
deck.card.border=1px solid #3355ff
{composition-setup}

I haven't been able to figure out how to add the color back globally either.

If anyone knows how to edit global styles for the composition plugin, please post: my users are navigating to pages and complaining of lost content.

From the source of the page, you can see where the css is coming from:

http://[yoursite]//confluence/styles/main-action.css?pluginCompleteKey=net.customware.confluence.plugin.composition:composition-setup&stylesheetName=deck

You can also see that the overrides in my previous comment are added right after the CSS is included here.

If that CSS can be found in the plugin, it should be possible add this to the end:

.deck .tabBar .tab a {
background: #3355ff;
}

.deck .tabBar #current.tab a {
background : #3355ff;
border-bottom: solid #3355ff;
}

.deck .cards.tabbed {border: 1px solid #3355ff;
}

to apply the styles globally. Will post back when I've got it.

Solution:

1. Download the jar
2. Change the extension to .zip
3. unzip it
4. Open composition-plugin-2.3.2/net/customware/confluence/plugin/composition/css/composition.css.vm in a text editor
5. Add
.deck .tabBar .tab a {
background: #3355ff;
}

.deck .tabBar #current.tab a {
background : #3355ff;
border-bottom: solid #3355ff;
}

.deck .cards.tabbed {border: 1px solid #3355ff;
}

...to the bottom of the file.

6. repackage the jar file. http://neptune.netcomp.monash.edu.au/...

It probably had a color like this before:

#3C78B5

WOW! Thanks a lot. My first time using this and I was surprised!
Ryan thanks a lot from Argentina!
Regards
Fabian

Note: if you are reading this thread, you may want to just wait until Customware updates the plugin. I made these changes because my users rely on pages with the card macro. When Customware officially updates the plugin, I'm also going to use that version.

FYI, looks like this issue is captured in the JIRA project for the composition plugin at: http://jira.adaptavist.com/browse/POS...

Can someone from CustomWare comment on when we might be able to see an update to fix this issue? We are using the card/deck macro extensively on our site and I want to know if I should manually fix the JAR as suggested above.

I have the same question as Duane. Or perhaps Ryan could provide an updated jar file?

Hey everyone, have you all heard of Dojo Tabs? It's a plugin, for Confluence 3.0 that does basically the same thing that the composition macro did...

I'd rather not provide an updated jar, and I don't even know if it's legal to do so. Use this fix *only* if you can't wait, and have the technical ability to do so.

You don't have to modify the composition plugin jar file and upload a modded version as Ryan suggested to make the workaround successful. An easy peasy lemon squeezy fix is to take the style addon that Ryan listed here and add that CSS chunk to the space stylesheet as seen in the following screenshot:



This worked for me like a charm without having to modify the jar at all. Of course, you can add this to the global space stylesheet as well should you have the composition macro peppered in the entire wiki site...

The 2.3.3 plugin update indeed fixes the issue but contains a silly schoolboy mistake - namely to have copy/pasted Ryan's CSS workaround verbatim which means even the color (#3355ff) is hard coded!

With the color being hard coded, the deck/card does not adhere to the global/space color scheme and causes the end-user to always have to explicitly set the color.

Please upload a revised version where the color is set to "$action.navBackgroundColor" - which would make the CSS code look like:


.deck .tabBar .tab a {
background: $action.navBackgroundColor;
}

.deck .tabBar #current.tab a {
background: $action.navBackgroundColor;
border: 1px solid $action.navBackgroundColor;
border-bottom: solid $action.navBackgroundColor;
}

.deck .cards.tabbed {
border: 1px solid $action.navBackgroundColor;
}


NOTE Ryan's CSS Workaround missed the second CSS line shown in the code above in the ".deck .tabBar #current.tab a" CSS block! Please don't forget that line!