Advanced: Custom CSS

In the Details view, you can in the settings select one of three different ways to visualise the item: Links/Table/Text. Behind the scenes, all of the visualisations are actually done using HTML and CSS. In case you want to customise the look of the Links or the Table visualisation, this can be done by providing your own CSS files and add them to the CSV Touch / CSV Lite documents folder in iCloud.

Here’s how it looks in the Files app on your iOS device:

You can of course add the files to the correct folder from your desktop computer as well.

Depending on the visualisation customised, you can do slightly different things with the CSS.

Links CSS customisations

The HTML for the Links visualisation works like this:

  • The HTML consists of a single table.
  • The table has two columns.
  • In the first column the cells will be tagged as being of type <th>, ie header cells. The values will be the column headers from the CSV file.
  • In the second column the cells will be tagged as being of type <tr>. The values will be the item’s value for the column header indicated by the first column.
  • Every second table row will also include the CSS class name odd (<tr class=”odd”>).
  • If you have hidden columns, the segment between the “normal” rows and the hidden rows will likewise be a single table row with HTML code approximately <tr class=”rowstep”>.
  • URLs found will be inserted using a simple <a href=”…”>…</a> but for images and videos, depending on the settings, <img src=”…”> might be used.

The CSS file should be named doublecolumn.css and then put in the folder mentioned above.

Table CSS customisations

The HTML for the Table visualisation works like this:

  • The HTML consists of one or two separate tables; one for “normal” columns, one for hidden columns.
  • The tables have a single column and rows consisting of <tr><td>Column header: Column value
  • The two tables (if both exists) are separated using <br><br>.

The CSS file should be named singlecolumn.css and then put in the folder mentioned above.

Font size

Since the visualisations support changing the font size, before the CSS file is actually loaded into the HTML page, a single search-and-replace is performed: All occurrences of the text FONTSIZE (case-sensitive) will be replaced by Xpx, where X is just a number corresponding to the current zoom level.

Example files

Here are the currently used default CSS files inside a zip file:

css

And here as standalone files (NOTE! Slow and somewhat unreliable server which is why I also have the .zip file above which is handled by WordPress):