Output specific Table Style CSS

[Fiztban]

After setting up output specific css styles to match the different brands the documentation is published in I have been looking to do the same with table styles.

However I cannot find a way to make this happen. My aim is to change the background colours of the cells to match multiple colour themes for the same table in different outputs.

Can someone confirm whether this is at all possible? Or if maybe there is a different workflow to making it happen?

[NorthEast]

I don't think there's an easy way to do that.

You can't use CSS variables in the table stylesheet editor, you can only specify fixed colours.

You could possibly use mediums, but that's a really bad way to handle it, and wouldn't work if you use mediums for anything else in your projects.

If it were me, I'd hand-code some CSS to handle it (using CSS variables for the colours).

[doloremipsum]

I haven't used table styles, but it seems like it could be worth a shot. If you use mediums for the different companies (like I do sometimes), you could go into the table style css code and add in the code for each company medium. There's a chance that Flare will see the @medium flag and treat it the same way it would in the regular stylesheet.

If you use separate stylesheets for your different companies (like I also do sometimes), then maybe instead you could look into CSS variables (e.g. var(--brand-color-1), defined in your main stylesheet and rolling through to the table stylesheet). Again, worth a shot.

[Fiztban]

Hi Both,

I had thought of mediums too, but it would be a terrible implementation as they are already in use for the intended purpose.

The only solution I am thinking of investigating is whether the actual table content can be put in a snippet while the table container can be conditionaled to used 2 different styles with the same classes for rows etc.

I don't believe it will work out but I will attempt a few things and report back.

[ChoccieMuffin]

Sounds like it's crying out for a feature request - allow users to select different TABLE stylesheets per target, the same as you can select REGULAR stylesheets. It's a pretty massive hole, IMHO. (See my signature for a link to feature requests.)

[Fiztban]

Sounds like it's crying out for a feature request - allow users to select different TABLE stylesheets per target, the same as you can select REGULAR stylesheets. It's a pretty massive hole, IMHO. (See my signature for a link to feature requests.)

I have exprimented and quickly ran into all the problems with implementing snippets and tables together which leads to more headaches. See following posts:

• Create a Snippet from a Table
• Snippet for a row in a table
• Snippets as table rows? Well, I never...
• Snippet as Table row?

..etc

As a result I have made a feature request to do a tablestyles system that works similarly to alternative variables per output so that for each table style you can set the table style sheet with different colours. It's not single sourcing the base stylesheet for the table like you would with the CSS using @mediums, but it would be a massive step forward.

If you are reading this post and looking for the same thing, please join in making this feature request. In fact please feel free to copy my own request below and use it as your own:

I would like to feature request the ability to specify table style sheets per output target, just like it is possible to do with style sheets. Because each table uses a different style sheet I would suggest being able to set table style sheets similarly to how you set alternative variables for each output. This would improve the single sourcing situation for tables massively, though it would be best if a better style sheet implementation were possible which would allow a base table style and then an @import to add colours for specific outputs for that table style. Also, it would be beneficial if CSS variables were compatible which they currently are not.

[NorthEast]

Sounds like it's crying out for a feature request - allow users to select different TABLE stylesheets per target, the same as you can select REGULAR stylesheets. It's a pretty massive hole, IMHO. (See my signature for a link to feature requests.)

Yep, I agree - Flare does not handle conditional CSS for targets very well at all.

If table stylesheets supported CSS variables, it may be enough for what most people need; although CSS variables are maybe seen as something 'advanced'.

What Flare calls mediums would actually kind of work as a mechanism to deliver different CSS per target - but only if they weren't implemented as mediums! The problem is that Madcap allows you to create mediums that aren't real CSS mediums / media types. They're not real media types that are processed by the browser, and are instead essentially just a way to conditionalise CSS on a per target basis that is processed during the build (not by the browser). But as they're implemented as mediums, they clash with the 'real' mediums/media types that are used for reponsive layouts, print, etc. Anyway, I digress!

[Fiztban]

Ok I have actually found a work-around. It isn't perfect but it works on my end and I am curious to know if it would work on other people's machines. I am on MCF 2019r2.

What my workaround does: it allows output specific CSS for any table I create and allows me to create that table ONLY ONCE in the documentation, however it requires a table style for each output that has to have a different style. Note it only affects the COLOURS of the table.

The trick is to do the following:

1. Create a base table style for the table that you wish to have in different colours.
2. Copy that table style for as many different outputs you wish to have with a different style/colour. In my case I wanted to have one in Blue and one in Green so I made 2 copies.
3. Modify the table styles with the desired colours. BUT DO NOT CHANGE ANY OF THE COLUMN/ROW NAMES OR CLASSES. This is SUPER important!
4. Include the BASE table style AND all the table styles for the desired colours at the top of your page using

   Code: Select all

   <link href="../Resources/TableStyles/Table 1 - BASE.css" rel="stylesheet" MadCap:stylesheetType="table" />
   <link href="../Resources/TableStyles/Table 1 - Blue.css" rel="stylesheet" MadCap:stylesheetType="table" />
   <link href="../Resources/TableStyles/Table 1 - Green.css" rel="stylesheet" MadCap:stylesheetType="table" />

5. Now here comes the tricky part! Create empty tables at the beginning of your document (I put it after my topic h1) with conditionals for each brand which in my case are Blue and Green (I will explain more later) in my code for 2 brand colours I used code like this:

   Code: Select all

   <div>
   	<table style="height: 0;padding: 0;margin: 0;visibility:hidden;position:absolute;mc-table-style: url('../Resources/TableStyles/Table 1 - Blue.css');" class="TableStyle-Property_Tables" cellspacing="4">
   		<col MadCap:conditions="Brand.Blue" />
   		<tbody>
   			<tr style="height: 0;padding: 0;margin: 0;border: 0;background: white;">
   				<td style="height: 0;padding: 0;margin: 0;border: 0;background: white;">
   				</td>
   			</tr>
   		</tbody>
   	</table>
   	<table style="height: 0;padding: 0;margin: 0;visibility:hidden;position:absolute;mc-table-style: url('../Resources/TableStyles/Table 1 - Green.css');" class="TableStyle-Property_Tables" cellspacing="4">
   		<col MadCap:conditions="Brand.Green" />
   		<tbody>
   			<tr style="height: 0;padding: 0;margin: 0;border: 0;background: white;">
   				<td style="height: 0;padding: 0;margin: 0;border: 0;background: white;">
   				</td>
   			</tr>
   		</tbody>
   	</table>
   </div>

6. Now create the table you wish to have in all the different output-specific colours, but USE THE BASE STYLE within the topic.

What will happen is the invisible tables will load the Output specific styles and those will apply to the base one for each output. Now the code above has a lot of inline styles to make sure the <div>, <table>, <tr>, and <td> have no height, padding, or margin so that they will not appear in the PDF output either. But if it was ONLY for HTML you would be able to just use the visibility: hidden; inline-style.

For it to work It is important that:

• The tables at the top of your document reference the correct output-specific table style sheet AND have the correct conditional for that output, if not you will get the wrong colour for the wrong output.
• The tables have at least 1 <tr> and <td>, but they don't need to have any data.
• All the tables for that table style (Table 1 in my example) use the BASE style throughout the topic after the invisible tables used at the top.
• That all the classes for your rows/columns are unchanged otherwise it will not be able to apply the colour change on top of the base style.

This is still in experimentation and by no means perfect AT ALL as you will have to add all this extra code in EVERY topic that uses these cell colours until Flare decide to fix it. The worst-case scenario however is that at some point this stops working and all tables revert to the base style, so I recommend making it a neutral colour.

[Fiztban]

Wanted to add more to this method and its imperfections. I have found that the order in which the links are pasted at the beginning of the XML file (topic) can affect performance because the order in which they are pasted affects whether they work for all or not.

Also this method does NOT WORK for PDF even if the preview suggests it does.

In further experimentation I have found that they don't seem to be needed. So I have removed them and the tables still seem to work as intended. Doing so continues to allow HTML preview/build to work.