Custom CSS and DocBook XML documents
We have previously mentioned using XML documents in DocBook format. We now turn our attention to the question of the format of the tables. A previous blog on DocBook table format mentioned the two types of tables supported by DocBook, but not every document table necessarily has to be in the same format. We have an ‘in-house’ style used for some time and the desire was to retain a similar format with our web pages.
We are using a Joomla component named DocImport written by Nicholas K. Dionysopoulos and are very pleased with its behaviour even though it is still in an ‘alpha’ release form. A credit to the authors abilities. The component presents each web page with headers and footers which are using a ‘table style’ which does not display column separators. This is understandable since the standard format for tables is basic to put it bluntly.
The classic manner to format HTML tables is to make use of CSS style sheets and this is the route we have travelled. Having designed an appropriate CSS style the next task is to apply it to the document. Note that we desire to only modify our ‘internal’ tables within the document not the DocImport generated headers and footers. Attempts to make use of the ‘role’ attribute in the XML document was unsuccessful since the attribute was stripped out by the XSLT transformation. Fortunately the ‘class’ attribute is retained so the generated HTML documents have the correct css style. The next step is to ensure that the style sheet is available in the presented web page. This proved more difficult and attempts to embed a style sheet in the XML document and the DocImport generated HTML documents failed to work.
Here a feature of DocImport proved very useful. It is possible to override all media files in any FOF-powered extension which, simplistically, means that you can follow the same steps to override media files in any FOF extensions. DocImport's media files are stored under media/com_docimport. So one can create a directory named media/com_docimport under the site template. Then we copy the folders and files we desire to override in there. Magically, DocImport (being FOF powered) will now load whatever is under your template instead of what it's in the media directory under your site's root.
The next step is to incorporate our custom CSS style sheet in the standard frontend template, which we accomplish by using the import command:
where ‘styles.css’ is the name of our custom style sheet. We know that this involves an extra call to the underlying operating system file system but the ease of implementation overrides this possible concern.
The final step is to ensure that the XML documents contain the attributes to our custom style and regenerate the HTML articles.
The result is shown in our extension documentation.
It is of course possible to create multiple table styles (or indeed any type of style) within a document, the limit being ones’ own ability to create the styles themselves.